- Read Tutorial
- Watch Guide Video
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:
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.