A checkbox is a type of input element for a form. A checkbox is similar to a radio button except 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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268