Checkboxes are a key part of web forms, allowing users to select one or more options from a set. They are commonly used for preferences, terms and conditions, and multiple-choice selections. Creating a checkbox in HTML is simple and highly effective when done correctly.
So, what is the correct HTML for making a checkbox?
The Answer: <input type="checkbox">
To create a checkbox in HTML, you use the <input> element with the type attribute set to "checkbox".
Basic Syntax:
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
<label for="subscribe">Subscribe to newsletter</label>
Explanation:
type="checkbox"tells the browser to render a checkbox.idlinks the checkbox with its<label>for accessibility.nameidentifies the checkbox when the form is submitted.valueis the data sent if the checkbox is checked.<label>makes the text clickable and improves user experience.
Example Output:
This code will display a single checkbox labeled “Subscribe to newsletter”. When checked and the form is submitted, the value "newsletter" will be sent with the field name "subscribe".
Multiple Checkboxes with the Same Name
If you want users to select multiple items under one category, use the same name attribute for each checkbox:
<p>Select your hobbies:</p>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">Reading</label><br>
<input type="checkbox" id="hobby2" name="hobby" value="traveling">
<label for="hobby2">Traveling</label><br>
<input type="checkbox" id="hobby3" name="hobby" value="cooking">
<label for="hobby3">Cooking</label>
✅ This allows the form to submit all selected values under the same
name.
Making a Checkbox Checked by Default
Use the checked attribute to have a checkbox selected when the page loads:
<input type="checkbox" id="agree" name="terms" value="yes" checked>
<label for="agree">I agree to the terms and conditions</label>
Disabling a Checkbox
You can disable a checkbox so that users cannot interact with it:
<input type="checkbox" id="disabledOption" name="option" value="disabled" disabled>
<label for="disabledOption">Unavailable Option</label>
Conclusion
The correct way to create a checkbox in HTML is by using the <input type="checkbox"> element, optionally paired with a <label> for better accessibility and usability. With simple attributes like checked, disabled, and value, checkboxes offer versatile functionality in forms.
They are an essential part of creating interactive, user-friendly websites.
