HTML - Checkbox

  »   HTML forms  »   HTML Tutorial - Using Checkbox Tag

Checkboxes, as we said in a previous tutorial, are part of the applications that the input tag offers.

What is different from the previous tutorial is that we will look more into the subject this time.

Checkbox - Creating the lists

The checkboxes come in helping the user, by allowing him to simultaneously choose more than one option from the given ones.

html<p>Choose your favorite colors .</p>
<p>
	Blue: <input type="checkbox" name="colors" value="blue" /><br />
	Yellow: <input type="checkbox" name="colors" value="yellow" /><br />
	Red: <input type="checkbox" name="colors" value="red" /><br />
	Green: <input type="checkbox" name="colors" value="green" />
</p>

Demo

Choose your favorite colors .

Blue:
Yellow:
Red:
Green:

Checkbox - Default selected boxes

Checkboxes also offer the possibility of being already checked in order to ease up the user's work in some situations.

This thing is done with the help of the checked attribute, setting his value to yes, like fallows.

html<p>Choose your favorite colors .</p>
<p>
	Blue: <input type="checkbox" name="colors" value="blue" checked="yes" /><br />
	Yellow: <input type="checkbox" name="colors" value="yellow" /><br />
	Red: <input type="checkbox" name="colors" value="red" /><br />
	Green: <input type="checkbox" name="colors" value="green" checked="yes" />
</p>

Demo

Choose your favorite colors .

Blue:
Yellow:
Red:
Green:

You can try to play with this application a little. It is quite simple but very useful like you will see.