Checkboxes allow users to select one or more options from a group of choices. They are commonly used for selecting skills, hobbies, terms and conditions, preferences, and multiple features.

Key Point: Unlike radio buttons, checkboxes allow multiple selections.

1. What is a Checkbox?

A checkbox is created using the <input> element with type="checkbox".

<input type="checkbox"> HTML

Output

HTML

2. Basic Checkbox Example

<input type="checkbox" name="skill" value="html">
<label>HTML</label>

<input type="checkbox" name="skill" value="css">
<label>CSS</label>

<input type="checkbox" name="skill" value="javascript">
<label>JavaScript</label>

Output

HTML CSS JavaScript

3. The type Attribute

The type attribute determines the type of input control. For a checkbox, use:

type="checkbox"

This tells the browser to display a checkbox control.

4. The name Attribute

The name attribute identifies the form field when the form is submitted. Multiple checkboxes can use the same name when they represent related choices.

<input type="checkbox" name="skills" value="html">
<input type="checkbox" name="skills" value="css">
<input type="checkbox" name="skills" value="javascript">

The important difference from radio buttons is that the same name does not prevent multiple checkboxes from being selected.

5. The value Attribute

The value attribute represents the value associated with the checkbox. When a checked checkbox is submitted, its value is sent with the form.

<input type="checkbox"
       name="skill"
       value="dotnet">

<label>.NET</label>

Here the submitted value is dotnet when the checkbox is checked.

6. Checkbox with Label

Connecting a checkbox with a label improves usability. The label's for attribute should match the checkbox's id.

<input type="checkbox"
       id="terms"
       name="terms"
       value="accepted">

<label for="terms">
    I agree to the terms and conditions
</label>

Output

I agree to the terms and conditions

7. Checked Checkbox

Add the checked attribute when a checkbox should be selected by default.

<input type="checkbox"
       id="newsletter"
       name="newsletter"
       value="yes"
       checked>

<label for="newsletter">
    Subscribe to newsletter
</label>

Output

Subscribe to newsletter

8. Required Checkbox

Use the required attribute when the user must check a checkbox before submitting the form.

<input type="checkbox"
       id="agreement"
       name="agreement"
       value="yes"
       required>

<label for="agreement">
    I agree to the terms
</label>

The browser will prevent form submission until the checkbox is selected.

9. Disabled Checkbox

Use the disabled attribute to prevent the user from selecting a checkbox.

<input type="checkbox"
       id="premium"
       name="plan"
       value="premium"
       disabled>

<label for="premium">
    Premium Features
</label>

Output

Premium Features

10. Multiple Checkbox Selections

Multiple checkboxes can be selected independently.

<p>Select your skills:</p>

<input type="checkbox"
       id="html"
       name="skills"
       value="html">
<label for="html">HTML</label>

<input type="checkbox"
       id="css"
       name="skills"
       value="css">
<label for="css">CSS</label>

<input type="checkbox"
       id="javascript"
       name="skills"
       value="javascript">
<label for="javascript">JavaScript</label>

<input type="checkbox"
       id="bootstrap"
       name="skills"
       value="bootstrap">
<label for="bootstrap">Bootstrap</label>

Output

Select your skills:

HTML

CSS

JavaScript

Bootstrap

11. Checkbox Inside a Form

Checkboxes are frequently used inside forms to collect multiple user selections.

<form>

    <p>Select your preferred technologies:</p>

    <input type="checkbox"
           id="technology-csharp"
           name="technology"
           value="csharp">
    <label for="technology-csharp">C#</label>

    <input type="checkbox"
           id="technology-java"
           name="technology"
           value="java">
    <label for="technology-java">Java</label>

    <input type="checkbox"
           id="technology-python"
           name="technology"
           value="python">
    <label for="technology-python">Python</label>

    <br><br>

    <button type="submit">Submit</button>

</form>

12. Example: Selecting Hobbies

<p>Select your hobbies:</p>

<input type="checkbox"
       id="reading"
       name="hobby"
       value="reading">
<label for="reading">Reading</label>

<input type="checkbox"
       id="music"
       name="hobby"
       value="music">
<label for="music">Music</label>

<input type="checkbox"
       id="travel"
       name="hobby"
       value="travel">
<label for="travel">Travel</label>

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

Output

Select your hobbies:

Reading

Music

Travel

Gaming

13. Checkbox for Terms and Conditions

A checkbox is commonly used when the user must confirm an agreement before continuing.

<form>

    <input type="checkbox"
           id="terms-condition"
           name="terms"
           value="accepted"
           required>

    <label for="terms-condition">
        I agree to the Terms and Conditions
    </label>

    <br><br>

    <button type="submit">Register</button>

</form>

14. Using fieldset and legend

The <fieldset> element can group related checkboxes, while <legend> provides a descriptive title.

<fieldset>

    <legend>Select Skills</legend>

    <input type="checkbox"
           id="skill-csharp"
           name="skills"
           value="csharp">
    <label for="skill-csharp">C#</label>

    <input type="checkbox"
           id="skill-sql"
           name="skills"
           value="sql">
    <label for="skill-sql">SQL</label>

    <input type="checkbox"
           id="skill-angular"
           name="skills"
           value="angular">
    <label for="skill-angular">Angular</label>

</fieldset>

15. Checkbox vs Radio Button

Feature	Checkbox	Radio Button
Selection	One or more options	Usually one option
Input Type	`checkbox`	`radio`
Example	Select multiple skills	Select one payment method
Multiple selections	Allowed	Not within the same group

16. Common Checkbox Attributes

Attribute	Purpose
`type`	Defines the control as a checkbox.
`name`	Identifies the form field.
`value`	Defines the value submitted when checked.
`id`	Uniquely identifies the checkbox.
`checked`	Selects the checkbox by default.
`required`	Requires the checkbox to be selected.
`disabled`	Prevents the checkbox from being selected.

17. Common Mistakes

Mistake 1: Forgetting type="checkbox"

<input>

Without type="checkbox", the browser does not create a checkbox.

Mistake 2: Missing label

<input type="checkbox" name="skill" value="html">

Always provide a descriptive label when the checkbox represents a user-facing choice.

Mistake 3: Missing value

<input type="checkbox" name="skill">

Use a meaningful value when the selected checkbox must be identified during form submission.

18. Best Practices

Use checkboxes when multiple choices are allowed.
Use clear and descriptive labels.
Provide meaningful name and value attributes.
Connect labels using matching id and for values.
Use required when a selection is mandatory.
Use fieldset and legend for logically related checkbox groups.

19. Practice Example

Create a form that allows the user to select multiple preferred technologies.

<form>

    <fieldset>

        <legend>Preferred Technologies</legend>

        <input type="checkbox"
               id="tech-html"
               name="technology"
               value="html">
        <label for="tech-html">HTML</label>

        <input type="checkbox"
               id="tech-css"
               name="technology"
               value="css">
        <label for="tech-css">CSS</label>

        <input type="checkbox"
               id="tech-javascript"
               name="technology"
               value="javascript">
        <label for="tech-javascript">JavaScript</label>

        <input type="checkbox"
               id="tech-bootstrap"
               name="technology"
               value="bootstrap">
        <label for="tech-bootstrap">Bootstrap</label>

    </fieldset>

    <br>

    <button type="submit">Submit</button>

</form>

Summary

HTML checkboxes are created using <input type="checkbox"> and allow users to select one or more options. Use meaningful name and value attributes, connect labels using id and for, and use attributes such as checked, required, and disabled when required.

← Previous: Radio Buttons Next: Buttons →