Archives: 2007

Checkbox

The code

HTML

<form action="someScript" method="post"> <fieldset> <legend>Groceries</legend> <label for="grocery">Fruits</label> <p><input type="checkbox" name="grocery" value="apples"> Apples</p> <p><input type="checkbox" name="grocery" value="oranges"> Oranges</p> <p><input type="checkbox" name="grocery" value="bananas"> Bananas</p> <input type="submit" value="Submit"> <input type="reset" value="Clear"> </fieldset> </form>

What is a checkbox

A checkbox should be used when wanting to supply the users with options where more than one option can be selected at the same time. A grocery list lends itself nicely because you might need to get apples AND oranges. A true/false does not, because only one answer can be correct.

Notice the use of <p>

I have wrapped each checkbox in a paragraph in order to put each checkbox and its text on one line. In this case the label cannot be used for each option because the checkbox collectively represents one Form item, "grocery"

Notice the name of each checkbox

Each element has the name "grocery" because I could purchase apples and oranges and they're both groceries. This allows me to attached more than one item to a given label.

Example

Groceries

Apples

Oranges

Bananas

Creative Styling

The code

HTML

<form action="someScript" method="post"> <fieldset> <legend>Groceries</legend> <label for="grocery">Fruits</label> <p><input type="checkbox" class="checkbox" name="grocery" value="apples"> Apples</p> <p><input type="checkbox" class="checkbox" name="grocery" value="oranges"> Oranges</p> <p><input type="checkbox" class="checkbox" name="grocery" value="bananas"> Bananas</p> <input type="submit" value="Submit"> <input type="reset" value="Clear"> </fieldset> </form>

CSS

input.checkbox{margin-right:5px;} p{ line-height:30px; font-size:120%; }

Example

Groceries

Apples

Oranges

Bananas

Minimal styling

I don't recommend crazy styling with these. Make it simple to use. Changing background, border color, or border size may confuse the user because its not what a typical checkbox looks like.

More Form Elements