HTML Checkbox Code

This page contains HTML checkbox code. You can copy/paste this code into your own blog or website in order to create checkboxes.

A checkbox is a form element that allows the user to select multiple options from a range of options.

Checkboxes are created with the HTML <input> tag. Checkboxes can be nested inside a <form> element or they can stand alone. They can also be associated with a form via the form attribute of the <input> tag.

Basic Checkbox Example

Here's an example of HTML checkbox code:

Source Code	Result
<input type="checkbox" name="fruit" value="Apple"> Apple <input type="checkbox" name="fruit" value="Orange"> Orange <input type="checkbox" name="fruit" value="Banana"> Banana	Apple Orange Banana

Working Example

Here, we add a submit button so that the checkboxes can become useful. We also place the checkboxes within a <form> element that specifies a page to process the form.

Source Code	Result
<form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result" method="get"> <p>What would you like for lunch?</p> <input type="checkbox" name="fruit" value="Apple"> Apple <input type="checkbox" name="fruit" value="Orange"> Orange <input type="checkbox" name="fruit" value="Banana"> Banana <p><input type="submit" value="Submit"></p> </form> <h3>Result:</h3> <iframe name="result" style="height:100px;width:200px;"></iframe>	What would you like for lunch? Apple Orange Banana Result:

Source Code

Result

<form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result" method="get">
<p>What would you like for lunch?</p>
<input type="checkbox" name="fruit" value="Apple"> Apple
<input type="checkbox" name="fruit" value="Orange"> Orange 
<input type="checkbox" name="fruit" value="Banana"> Banana 
<p><input type="submit" value="Submit"></p>
</form>
<h3>Result:</h3>
<iframe name="result" style="height:100px;width:200px;"></iframe>

Result:

Checkboxes vs Radio Buttons

It's important to understand the difference between checkboxes and radio buttons. Radio buttons allow the user to select one option only. Checkboxes allow the user to select any number of options.

In the example below, try selecting more than one checkbox. You'll see that you can select as many (or as few) checkboxes as you like. This is how the checkbox element has been designed. It makes the checkbox suitable for times where the user should be able to select multiple options.

Next, try selecting more than one radio button. You'll notice that every time you select another radio button, the previous selection is de-selected. Radio buttons are designed to do this. This helps you enforce users to only select one option. There is no way for them to select multiple options (whether accidentally or intentionally).

Source Code	Result
<form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result2" method="get"> <h3>Checkboxes</h3> <p>What would you like for lunch?</p> <input type="checkbox" name="fruit" value="apple"> Apple <input type="checkbox" name="fruit" value="orange"> Orange <input type="checkbox" name="fruit" value="banana"> Banana <h3>Radio Buttons</h3> <p>What is your gender?</p> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="unknown"> Unknown <p><input type="submit" value="Submit"></p> </form> <h3>Result:</h3> <iframe name="result2" style="height:100px;width:200px;"></iframe>	Checkboxes What would you like for lunch? Apple Orange Banana Radio Buttons What is your gender? Male Female Unknown Result:

Source Code

Result

<form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result2" method="get">
<h3>Checkboxes</h3>
<p>What would you like for lunch?</p>
<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="orange"> Orange 
<input type="checkbox" name="fruit" value="banana"> Banana 
<h3>Radio Buttons</h3>
<p>What is your gender?</p>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="unknown"> Unknown
<p><input type="submit" value="Submit"></p>
</form>
<h3>Result:</h3>
<iframe name="result2" style="height:100px;width:200px;"></iframe>

Result:

The `form` Attribute

In the above example, we enclosed the checkboxes inside a form. HTML5 also allows you to specify a form using the form attribute. This method could be used in the event that the checkboxes are not inside the form that needs to submit its contents.

In the next example, add id="myForm" to the form. We then add form="myForm" to the checkboxes (via the <input> tags) and move the checkboxes outside of the form. Submitting the form should still submit the contents of the checkboxes, because they reference the id of the form in their form attributes.

Source Code	Result
<p>What would you like for lunch?</p> <input form="myForm" type="checkbox" name="fruit" value="apple"> Apple <input form="myForm" type="checkbox" name="fruit" value="orange"> Orange <input form="myForm" type="checkbox" name="fruit" value="banana"> Banana <form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result3" method="get" id="myForm"> <p><input type="submit" value="Submit"></p> </form> <h3>Result:</h3> <iframe name="result3" style="height:100px;width:200px;"></iframe>	What would you like for lunch? Apple Orange Banana Result:

Source Code

Result

<p>What would you like for lunch?</p>
<input form="myForm" type="checkbox" name="fruit" value="apple"> Apple
<input form="myForm" type="checkbox" name="fruit" value="orange"> Orange 
<input form="myForm" type="checkbox" name="fruit" value="banana"> Banana 	
<form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result3" method="get" id="myForm">
<p><input type="submit" value="Submit"></p>
</form>
<h3>Result:</h3>
<iframe name="result3" style="height:100px;width:200px;"></iframe>

What would you like for lunch?

Apple Orange Banana

Result:

Set a Default Value

You can set a default value by using the checked attribute. When this is added to a checkbox, that checkbox is selected as soon as the page loads (i.e. it doesn't need the user to select it). The user can then choose to "uncheck" that checkbox if so desired, but if they don't it will remain checked (along with any other checkboxes the user checks).

In this example, we've checked the first option.

Source Code	Result
<p>Choose your free gift:</p> <input type="checkbox" name="fruit" value="apple" checked> Apple <input type="checkbox" name="fruit" value="orange"> Orange <input type="checkbox" name="fruit" value="banana"> Banana	Choose your free gift: Apple Orange Banana

Disabling a Checkbox

You can disable a checkbox by using the disabled attribute. You could use this in conjunction with a script to enable/disable the checkbox depending on whether certain criteria has been met.

In this example, we've disabled the second option (Orange).

Source Code	Result
<input type="checkbox" name="fruit" value="apple"> Apple <input type="checkbox" name="fruit" value="orange" disabled> Orange <input type="checkbox" name="fruit" value="banana"> Banana	Apple Orange Banana

Also see radio button code for enforcing a single selection.

HTML Checkbox Code

Basic Checkbox Example

Working Example

Result:

Checkboxes vs Radio Buttons

Checkboxes

Radio Buttons

Result:

The form Attribute

Result:

Set a Default Value

Disabling a Checkbox

The `form` Attribute