November 14, 2022

How to Make Checkbox Required in HTML

In this tutorial, you will learn how to make checkbox required in HTML. HTML checkboxes are used to let the users select one or more options on a given checkbox group. The checkboxes are shown square in shape when enabled. Sometimes when you are creating a form, you may want to create checkboxes that are must be selected (checked) by the users before submitting the form.

To make the checkbox required, we have to use the HTML required attribute. The required attribute is a Boolean attribute, which is used to specify that the user must select the required option before submitting the form. This required attribute can also be used in other form inputs like radio or text.

In the following example, we have 3 checkboxes and we will make one of them required. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have multiple elements such as div, h3, h2, and input. The parent div element is just a wrapper for the rest of the elements.
The h3 and h2 heading tags have some text content.
We have 3 inputs with type value set to checkbox to select the course. The first checkbox has a required attribute, which specifies that the user must select this option before submitting the form.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox required</title>
</head>

<body>
    <div>
        <h3>Checkbox Required</h3>
        <h2>Courses</h2>
        <div><input type="checkbox" name="course" required>HTML</div>
        <div><input type="checkbox" name="course">CSS</div>
        <div><input type="checkbox" name="course">JavaScript</div>
    </div>

</body>

</html>

You May Also Like: