Forms Tutorials
Check Boxes
The checkbox input form element allows visitors to choose many options from a list with many options. This is handy for surveys and polls where a question can have more than one possible answer.
The checkbox uses a standard <input> tag defined with its own special 'type'. It has several attributes that should be defined for best results:
- TYPE - specify the type of input to use for this field
- NAME - unique name to identify this field
- VALUE - assign what this field should represent
Let's write a basic checkbox input tag, step by step, to show how the tag is correctly coded. First we start with the opening input tag:
Next we need to define what sort of input field we want to use. In this case we are coding a checkbox, so we enter "checkbox" as the type:
Checkboxes help us create a list of choices a visitor can choose multiple answers from. Unlike radiobuttons, which get grouped together by setting the name to a common topic, checkboxes are usually grouped by setting the value as a common result:
This checkbox will be presented as one choice of several. Now that we have given the checkbox a common result, we have to define what the box specifically represents within the common result:
The checkbox code is now complete and correct, lets add some text so that the visitor will know what the checkbox represents:
Here is how the checkbox will appear on a webpage:
Let's group several checkboxes together into a list of choices. The common result we have defined is 'yes' so let's create a form and code up some extra choices for the list:
<input type="checkbox" value="yes" name="apples" style="border-width: 0px"> Apples
<input type="checkbox" value="yes" name="oranges" style="border-width: 0px"> Oranges
<input type="checkbox" value="yes" name="lemons" style="border-width: 0px"> Lemons
<input type="checkbox" value="yes" name="limes" style="border-width: 0px"> Limes
</form>
The list will display the selections and allow visitors to click any or all of the boxes in the group and add a check to each box. Here is how the list will appear on a webpage, try clicking the boxes to see how they behave:
The list is almost complete, but we want a couple of choices from the list to be displayed as pre-selected when the visitor first views the list of choices. We can do that easily by adding the word checked to the tags we want to show as selected, in the group:
<input type="checkbox" value="yes" name="apples" style="border-width: 0px" checked> Apples
<input type="checkbox" value="yes" name="oranges" style="border-width: 0px" checked> Oranges
<input type="checkbox" value="yes" name="lemons" style="border-width: 0px"> Lemons
<input type="checkbox" value="yes" name="limes" style="border-width: 0px"> Limes
</form>
Now the list is complete and it will appear on the webpage like this:
If you have more than one question requiring multiple answers for your form, add the new group of choices and change the common result for each group of check boxes. Add your questions and the coding is finished:
What fruits do you like most?<br>
<input type="checkbox" value="yes" name="apples" style="border-width: 0px"checked> Apples
<input type="checkbox" value="yes" name="oranges" style="border-width: 0px"checked> Oranges
<input type="checkbox" value="yes" name="lemons" style="border-width: 0px"> Lemons
<input type="checkbox" value="yes" name="limes" style="border-width: 0px"> Limes
<br>
What animals are the coolest?<br>
<input type="checkbox" value="cool" name="bears" style="border-width: 0px" checked> Bears
<input type="checkbox" value="cool" name="lions" style="border-width: 0px" checked> Lions
<input type="checkbox" value="cool" name="tigers" style="border-width: 0px"> Tigers
<input type="checkbox" value="cool" name="giraffes" style="border-width: 0px"> Giraffes
</form>
Your checkboxes will now be displayed in your browser like this:
Apples Oranges Lemons Limes
What animals are the coolest?
Bears
Lions
Tigers
Giraffes
