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:
• Text Features
• HTML Bulleted or Unordered List
• Use HTML Target Attribute to Specify Where to Open Document
• HTML5 Input Type - Email
• Wrapping Text Around Images
• Easy Code to Add Bing Site Search to Your Website
• Webpage DOCTYPE Declarations Explained
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• HTML Image Basics
• The Heading Tags