Check box is used to get user inputs within the form. A group of checkbox is used or a single check box is used to collect the options of the visitor. The difference in check box and period button is the user can't select more than one option in case of period buttons. In checkbox the user can give more than one option. For example in a newsletter script you can ask the visitor to select their interested areas. Here the user can give one or more than one are as the area of interest. So all options are to be stored or covered for the user. This way we can get more than one option for a choice. Here we will try with one checkbox and in another tutorial we will consider more than one checkbox.

In signup forms you will see one checkbox asking you to read the term and condition of the site and the user must agree to this by selecting a checkbox. On submit of the form the status of this checkbox is checked and if not checked by the user then alert message is displayed saying the user has to agree to the terms and conditions.

Related Tutorial

• Period button validation • Closing Window

Here is one example of this system. For easy understanding one period button validation is included in the checking also. The user has to select one of the sexes and must agree to terms and condition by checking the checkbox. Here is the demo.

SexMale Female

I agree to terms and conditions

The JavaScript code is kept within the head tag of the page. See the validation

<script type="text/javascript">
function validate(form) {
// Checking if at least one period button is selected. Or not.
if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){

alert("Please Select Sex");
return false;}


if(!document.form1.agree.checked){alert("Please Read the guidelines and check the box below");
return false; }


return true;
}
</script>


To display the period button and check box see the code below.


<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>

<tr bgcolor='#ffffff'><td align=center ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr>

<tr><td align=center bgcolor='#f1f1f1'><font face='verdana' size='2'><input type=checkbox name=agree value='yes'>I agree to terms and conditions </td></tr>
<tr bgcolor='#ffffff'><td align=center ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>
</table></form>

Javascript Form Validation Period button Validation of a form How to limit number of checkboxes allowed to be clicked inside a form Checkbox Validation of a form Displaying checked value of a check box array All Checking & Un checking in a group of checkboxes by single button Adding options to a drop down list box Removing options from a drop down list box Moving options from one drop down list box to other Dynamic population of second list box based on value of first list box