HTML Checkbox

« Prev Next »

A checkbox lets a user select one or more options from a list. It's created using:

<input type="checkbox" name="option_name" value="option_value"> Label
  • name: Groups checkboxes under the same field name.
  • value: The data sent to the server when selected.

html-checkbox

Example

<p>Select your hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Reading</label>

<input type="checkbox" id="traveling" name="hobby" value="traveling">
<label for="traveling">Traveling</label>

<input type="checkbox" id="gaming" name="hobby" value="gaming">
<label for="gaming">Gaming</label>
Run ›

Checkbox Attributes

Attribute Description
type Must be "checkbox"
name Group name — helps in backend form processing
value Value sent if the checkbox is checked
checked Pre-selects the checkbox
required Makes at least one checkbox required (works with JS)
disabled Disables the checkbox

With checked Attribute

<input type="checkbox" name="newsletter" value="yes" checked>
<label for="newsletter">Subscribe to newsletter</label>
Run ›

This checkbox is checked by default when the page loads.

 

notepad
  • Use the same name when options belong to the same category.
  • Use the label tag for better usability and accessibility.
  • Use checked to preselect options when necessary.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.