Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

HTML Checkbox Basics

By Stephen Bucaro

A checkbox is a type of input element for a form. A checkbox is similar to a radio button except it's square and, when set by clicking on it with the mouse, is displayed with a check mark rather than a dot. Another difference between a checkbox and a radio button is that a radio button can be part of a group, so a previously selected radio button automatically de-selects. Whereas checkboxes are each independent so you can have multiple checkboxes checked at the same time.

Shown below is the most basic html code for a checkbox.

<form id="form1" action="http://domain.com/process_from.asp">
<input type="checkbox" name="agree" value="crust" checked />Crust<br />
<input type="checkbox" name="agree" value="cheese" />cheese<br />
<input type="checkbox" name="agree" value="meat" />Meat<br />
<input type="submit" name="submit" value="Submit" />
</form>

Note the checked attribute in the first checkbox causes it to be checked by default.

Your first question after viewing the code above should be "how do I get the user's selections out of the form? To do that you'll need to submit your form to your web server and access its elements with a server-side language like ASP (Active Server Pages) or PHP (Personal Home Page). For that you'll need to add a Sumit button to the form, as shown.

Note that I also added an action attribute to the <form> tag. The action attribute contains the URL of the script or program on the web server that will handle the form. An example of ASP code in the server-side script to retrieve the value of a checkbox is shown below.

<%
If Request.Form("crust") = "crust" Then
   Response.Write ("crust checked")
Else
   Response.Write ("crust not checked")
End If
%>

Note that this code works because when you post the form to the server, the only the value of checkboxes that are checked will be posted. In other words If Request.Form("crust") = "" Then Response.Write ("crust not checked") would check for a checkbox not checked.

You can also access the value of a checkbox with JavaScript on your webpage. You could use this for validation purposes or to make changes to your webpage based upon weather the user checked a box. Example cod efor this is shown below.

function getCheckbox(form)
{
   if(form1.crust.checked)
      document.write("crust checked");
   else
      document.write("crust not checked");
  form.submit();
}

<form id="form1" action="http://domain.com/process_from.asp">
<input type="checkbox" name="agree" value="crust" checked />Crust<br />
<input type="checkbox" name="agree" value="cheese" />cheese<br />
<input type="checkbox" name="agree" value="meat" />Meat<br />
<input type="submit" name="submit" value="Submit" onClick="getCheckbox(this.form);">
</form>

To access the value of a checkbox call a JavaScript function with the button's onclick event, passing the form to the script as shown above. Note that the form is then submitted to the server by the JavaScript function.

More HTML Code:
• HTML5 Input Type - Email
• HTML Blockquote Basics
• Adding Space Around an Image
• Make an HTML Element Editable
• Form Input Labels
• Line Breaks in HTML
• HTML5 Slider Control
• Image Map Basics
• HTML Select List Basics
• The Heading Tags