HTML Checkbox

HTML checkbox is a control to select more than one option from multiple options presented to a user. It is presented as a small clickable square. When a user clicks in this square, a check symbol or a tick toggles in it. If it is checked then on clicking or pressing space bar from keyboard the option turns unchecked and vice-versa.  

The example of data that can  be entered in an HTML checkbox are qualifications of a person, choice of color for filtering clothes in an online store, selecting pizza toppings for ordering, specifying personal preferences or choices and so on .

Syntax – HTML Checkbox

A checkbox in an HTML form is created by using INPUT tag. The TYPE attribute is set to value “CHECKBOX”. It indicates that the control will allow the user to select multiple options by clicking in the small square given along with text or label. 

<INPUT TYPE=” CHECKBOX”  [other attributes]>

Attributes- HTML Checkbox

HTML Checkbox control uses the following attributes.

TYPE

The TYPE attribute is used to define the type of control to be added in the HTML form. Here it is give as “CHECKBOX”.

ID

This attribute is used to give identification to the checkbox in a web form element. The ID must be an alphanumeric string. The ID value for each field of web form must be unique. This ID is used in a script to manipulate the data entered by a user in the checkbox.

NAME

The NAME attribute is used to give name to one checkbox or common name to a group of checkboxes.  The name is used to access its values by the associated php or asp script file. If you need to select multiple values against one field, like qualifications, you can use a group of checkboxes with same name. The selected options will be sent as an array of values chosen.

If you need to read different options for different fields like acceptance of terms and conditions, accepting subscription letter option and other unrelated options then you must give different names to all the checkboxes.  If you want user to simply select the value instead of typing in a textbox then a set of uniquely named checkboxes will be good design choice.

VALUE

The VALUE attribute represents the value of the checkbox when it is selected. If the checkbox is checked it is ‘ON’ else it is ‘OFF’

CHECKED

If a specific checkbox is to be presented as checked by default when the HTML Form is rendered in the browser, then this attribute must be included in the INPUT tag with TYPE=’CHECKBOX”. You can check more than one checkboxes in your HTML form.

HTML Checkbox Example

<p>Choose Pet's Accessories you are looking for:</p>

<div>
  <input type="checkbox" id="leash" name="leash" checked>
  <label for="Leash">Leash</label>
</div>

<div>
  <input type="checkbox" id="feedbowl" name="feedbowl">
  <label for="feedbowl">Feeding Bowl</label>
</div>

<div>
  <input type="checkbox" id="Collar" name="Collar" checked>
  <label for="Collar">Collar</label>
</div>

<div>
  <input type="checkbox" id="chewtoy" name="chewtoy">
  <label for="chewtoy">Chewable Toys</label>
</div>
HTML Checkbox