HTML Checkbox – How to Insert Checkbox in HTML

0
71

In the last tutorial you learned about HTML Radio Buttons. This tutorial is about checkboxes  in HTML input elements.

Why Checkboxes in HTML Form ?

Suppose you have listed some items on the website like mangoes , bananas , apples etc. You have given choice to choose any of them for users. So how you will know that which items users have selected ?. This is where you will use checkbox in your code.

Syntax of HTML Checkbox

<input type=”checkbox”>

Code

Checkbox simple

Output

check box output

Attributes of Checkbox in HTML

There are different attributes as you used in radio buttons like name attribute , value attribute and checked attribute.

Name Attribute in Checkbox

You can name the checkboxes with anything you want but it should be meaningful so that when you will save the values of these attributes it will not be difficult to track. Name attribute will not affect your output in the browser. See example below.

Code

Name attribute in checkboxes

 

Value Attribute in Checkbox

Value attribute is used to add the value of a particular item so that when you will store data from a form you will know which items user have selected. Selection is based on those checkboxes which was checked by the user.

Code

value attribute in checkboxes

 

Checked Attribute in Checkbox

Same as radio buttons you can add default checked boxes for users in your web page. This is done by adding checked attribute inside the checkbox tag. Suppose you want to check the mangoes and apples by default then you can add checked attribute to both of these tags. See example below. Checked attribute can have no value but it does make sense if you add true to the value of checked attribute.

Code

checked attribute in checkboxes

Output

checked attribute in checkboxes output

In the above example you can see that Mangoes and Apples checkboxes are checked by default.

LEAVE A REPLY

Please enter your comment!
Please enter your name here