HTML Form Checkbox

HTML checkboxes are an easy way to present your visitors with a number of alternatives, from which they can select one or more options. For example, you might have a list of hobbies and ask your visitors to tick the ones that interest them.

Checkboxes are simple to insert into your HTML code; just use the standard <input> tag and set the type attribute to checkbox. You can also assign a name to your checkbox using the name attribute, and you can give it a value using the value attribute. This value will be passed over to the processing page once the submit button is clicked.

Another useful attribute is the checked attribute. By default checkboxes will be empty, but you can use the checked attribute to make it ticked by default.

Take a look at the following example to see all of these features in action, and have a play around with the output below:

<form>

What animals do you like?
<br />
<input type="checkbox" name="cat" value="cat" />Cats
<br />
<input type="checkbox" name="dog" value="dog" checked="checked" />Dogs
<br />
<input type="checkbox" name="hamster" value="hamster" />Hamsters
<br />
<input type="checkbox" name="tortoise" value="tortoise" />Tortoises

</form>

This will produce the following form:

What animals do you like?
Cats
Dogs
Hamsters
Tortoises

You will notice that you can tick as few or as many checkboxes as you like, which is great in certain situations, but sometimes you only want to allow the user to choose one option. For this you need to use a radio button, which is discussed on the next page.