Menu
HTML Checkbox Basics

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.

Crust
Cheese
Meat
<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.


Learn more at amazon.com

More HTML Code:
• Adding Space Around an Image
• Checkbox Basics
• Easy Code to Add Bing Site Search to Your Website
• HTML Special Characters - Character Entities
• HTML Blockquote Basics
• Make an HTML Element Editable
• HTML5 Header Element
• Add an Image to a Web Page
• Setting the Number of Items Visible in a Select List
• Use fieldset to Organize Form Elements