November 15, 2022

How to Make Checkbox Checked by Default in HTML

In this tutorial, we will learn how to make checkbox checked by default in HTML. Generally, the checkboxes are square boxes, but may have rounded corners. The checkboxes are used to allow the users to select one or multiple options in a given checkbox group.

To create a checkbox, you have to use an input element with the type value of checkbox, and to make the checkbox checked by default, you have to use the HTML checked attribute.

In the following example, we have 3 checkboxes and we will make all of them be checked by default. 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 are heading tags with some text content.
We have 3 inputs with a type value set to checkbox to select courses with checked attribute. As a result, all the checkboxes will be checked by default.

<!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>Check box checked by deafult</title>
</head>

<body>
    <div>
        <h3>Checkbox checked by deafult</h3>
        <h2>COURSES</h2>
        <div><input type="checkbox" name="courses" checked>HTML</div>
        <div><input type="checkbox" name="courses" checked>CSS</div>
        <div><input type="checkbox" name="courses" checked>JavaScript</div>
    </div>

</body>

</html>

You May Also Like: