Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

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:

  1. TYPE - specify the type of input to use for this field
  2. NAME - unique name to identify this field
  3. 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:

<input

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:

<input type="checkbox"

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:

<input type="checkbox" value="yes"

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:

<input type="checkbox" value="yes" name="apples" style="border-width: 0px">

The checkbox code is now complete and correct, lets add some text so that the visitor will know what the checkbox represents:

<input type="checkbox" value="yes" name="apples" style="border-width: 0px"> Apples

Here is how the checkbox will appear on a webpage:

Apples

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:

<form>
<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:

Apples Oranges Lemons Limes

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:

<form>
<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:

Apples Oranges Lemons Limes

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:

<form>
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:

What fruits do you like most?
Apples Oranges Lemons Limes

What animals are the coolest?
Bears Lions Tigers Giraffes