HTML Checkbox Example

HTML checkbox is used for multiple item selection. Checkbox looks like square box.This tutorial gives information about attributes of checkbox element with example code.

HTML Checkbox Example

Syntax of checkbox:

<form>
 <input type="checkbox" />
</form>

There are following most common used attributes of checkbox element:

• checked
• disabled
• name
• tabindex
• value

Let's see each attributes in detail.

checked attribute:

Checked attribute is used for whether checkbox is checked or not. By default checkbox is not checked. To make checkbox checked provide checked="checked".

For example:

<form>
 <input type="checkbox" checked="checked" />
</form>

disabled attribute:

This attribute is used for to make checkbox disable. User can not interact with disabled checkbox.

For example:

<form>
 <input type="checkbox" disabled="disabled" />
</form>

name attribute:

This attribute is common attribute for all element. This is just name of particular object/element. You can give any name without special characters and white spaces.

For example:

<form>
 <input type="checkbox" name="cricket" />
</form>

tabindex attribute:

This attribute is also common attribute and available in all HTML elements. It specifies tab order of an element when you use tab button/key for navigation.

For example:

<form>
 <input type="checkbox" tabindex="2" />
 <input type="checkbox" tabindex="1" />
</form>

If you have multiple elements than and only then you can understand tabindex attribute.

value attribute:

Value attribute is important attribute of checkbox. This attribute sets value and it is used when you access value in submitted page.

For example:

<form>
 <input type="checkbox" value="cricket" />
 <input type="checkbox" value="badminton" />
</form>

HTML checkbox example:

<form>
     Hobbies:<br />
     <input type="checkbox" name="reading" value="reading"
         tabindex="1" /> Reading<br />
        <input type="checkbox" name="traveling" value="traveling" 
        tabindex="2" disabled="disabled" /> Traveling<br />
        <input type="checkbox" name="cricket" value="cricket"
         tabindex="3" /> Cricket<br />
        <input type="checkbox" name="blogging" value="blogging"
         tabindex="4" checked="checked" /> Blogging
</form>

OUTPUT:

Hobbies:
Reading
Traveling
Cricket
Blogging

Video Tutorial:


How To Create HTML Table