How to Use HTML Form Checkboxes
In this guide you will learn how to use HTML checkboxes into web forms to allow users to select multiple items on a form.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this guide, we are going to learn how to use checkboxes in HTML.

So far, we've been working on a contact form, so we'll just add a little bit of space and create some example checkboxes.

Let's start with a label, and then create a checkbox with the code <input type="checkbox">. As with other elements, we'll have a name and a value. The name attribute should have a value that is the same as the value we give in our label. Another thing to note is the name attribute's value should be the same for all checkboxes that are grouped together.

Let's create a few checkboxes like this:

<label for="options">Packing Requirements (select all that apply):</label><br>
<input type="checkbox" name="options" value="premium"> Premium<br>
<input type="checkbox" name="options" value="automated"> Automated<br>
<input type="checkbox" name="options" value="rush"> Rush<br>

The output looks like this:

medium

Obviously, you can select more than one option, as checkboxes are meant for that only.

So, this is how you can create checkboxes in HTML.