A checkbox field in HTML is a square-shaped box that users can click inside the form. You can create an HTML input type checkbox field using the syntax <input type="checkbox"> in HTML. You can check the below-given methods and examples to create an input type checkbox.
HTML Input Type Checkbox Field Using <input type=”checkbox”>
The checkbox field is useful when you want to allow users to select one or more options from the given number of choices. You can get user’s input data such as hobbies, technical skills, and other useful details using the input type checkbox field in a form. You can create this using the syntax given below.
The above syntax showing only the type attribute of the input checkbox. However, there are many other attributes available for it that you will learn further in this tutorial.
Add Label For HTML Input Type Checkbox Field
If you want to get the required value for the input checkbox field, you have to show the text with it. The text comes after the checkbox with each option in a form. Use the <label> tag after the checkbox to show the text as given below.
|
1 2 3 4 |
<form> <input type="checkbox" name="bootstrap" value="bootstrap"> <label>Bootstrap</label> </form> |
Output
The above example shows the input checkbox with the text showing after it. The text defines the purpose of the checkbox in the form.
Checkbox Field in HTML Using <input type=”checkbox”>
You can use the checkbox field in HTML using <input type=”checkbox”> to display multiple choices to users to select. Let’s see the simple example to create checkboxes using the above syntax.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<form> <input type="checkbox" name="php" value="php"> <label>PHP</label><br> <input type="checkbox" name="html" value="html"> <label>HTML</label><br> <input type="checkbox" name="bootstrap" value="bootstrap"> <label>Bootstrap</label><br> <input type="checkbox" name="jquery" value="jquery"> <label>jQuery</label><br> </form> |
Output
The above example contains four simple checkboxes for users to select single or multiple choices of programming skills. It also contains the name attribute that you need to give same to allow users to select and id of the input textbox.
Make Checkbox Field Required in HTML
When you want to get the user’s input for the checkbox field, you need to make it required in a form. If the checkbox field is required, it will not allow users to submit forms without selecting a choice.
You can easily make the input checkbox field required by using the jQuery script as given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> $(document).ready(function () { $('button').click(function() { checked = $("input[type=checkbox]:checked").length; if(!checked) { alert("Please select one checkbox to submit."); return false; } }); }); </script> <form> Please Select Your Gender:<br><br> <input type="checkbox" name="gender[]" id="male" placeholder="Male" required/> <label>Male</label><br> <input type="checkbox" name="gender[]" id="female" placeholder="Female" required/> <label>Female</label><br> <input type="checkbox" name="gender[]" id="other" placeholder="Other" required/> <label>Other</label><br><br> <button type="button">Submit</button> </form> |
Output
The above example showing three input type checkbox fields. When you click the button given above, the jQuery script will not allow users to submit the form. The users must have to select single or multiple checkboxes to submit the form.
If you do not select a choice, you will get an alert message to hint users to choose your choice for submitting the form.
Some Other Attributes of <input type=”checkbox”>
Below are the useful attributes you can use with the checkbox.
| Attribute Name | Description |
|---|---|
| value |
|