How to Create a Checkbox in HTML?
Last Updated :
30 Aug, 2024
The checkbox is the HTML form element that lets users select one or more options from predefined choices. It can often be used when a user selects multiple items in the list. Checkboxes can be checked or unchecked, and they are created using the <input> tag with the type attributes set to the checkbox.
There are various ways to create the checkboxes in HTML, including:
Basic Checkbox
This approach is the simplest form of the checkbox. It can use the <input> HTML tag with the type attribute set to the checkbox. This creates a single check that users can select or deselect of the checkbox.
Syntax:
<input type="checkbox" name="option1">
Example: This example shows the basic checkbox.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Basic Checkbox Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Basic Checkbox Example</h2>
<input type="checkbox" name="option1"> Option 1
</body>
</html>
Output:
OutputCheckbox with Labels
Using the label makes the checkbox more accessible and the user-friendly. Clicking on the label will toggle the checkbox of the website.
Syntax:
<label><input type="checkbox" name="option2"> Option 2</label>
Example: This example shows the checkbox with labels.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Checkbox with Label Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Checkbox with Label Example</h2>
<label><input type="checkbox" name="subscribe">
Subscribe to newsletter
</label>
</body>
</html>
Output: This code displays the checkbox next to the text "Subscribe to newsletter". Clicking on the either the checkbox or the text will check or uncheck on the box.
OutputCheckbox inside the Form
Checkboxes are often used inside the forms to collect the mulitple inputs from users. This example can demonstrates the how checkboxes can be integrated into a form.
Syntax:
<form>
<input type="checkbox" name="option3"> Option 3<br>
<input type="checkbox" name="option4"> Option 4<br>
</form>
Example: This example shows the checkbox inside the form.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Checkbox in Form Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Checkbox inside a Form Example</h2>
<form action="/submit_form" method="post">
<input type="checkbox" name="news"> Daily News<br>
<input type="checkbox" name="offers"> Special Offers<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
OutputGrouping the Checkboxes
When mulitple checkboxes can represents the related options, they can be grouped using the same name attribute. It can helps in the categorizing the inputs when processing the form data.
Syntax:
<input type="checkbox" name="group1" value="1"> Option 1<br>
<input type="checkbox" name="group1" value="2"> Option 2<br>
Example: This example shows the grouping of checkbox.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Grouped Checkboxes Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Grouped Checkboxes Example</h2>
<form>
<label>Select your hobbies:</label><br>
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="traveling"> Traveling<br>
<input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
</body>
</html>
Output:
outputCheckbox with Default Checked State
The checkbox can be set to be checked by the default using the checked attribute.
Syntax:
<input type="checkbox" name="option5" checked>
Example: This example shows the checkbox with default chcekd state.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Checkbox with Default Checked State</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Checkbox with Default Checked State</h2>
<input type="checkbox" name="terms" checked> I agree to the terms and conditions
</body>
</html>
Output:
outputStyling the Checkboxes with CSS
While basic checkboxes are sufficient for the funcationality, they can be styled using the CSS to match the design of the webpage.
Syntax:
<style>
.styled-checkbox {
width: 20px;
height: 20px;
}
</style>
<input type="checkbox" class="styled-checkbox">
Example: This example shows the Styling the Checkboxes with CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Styled Checkbox Example</title>
<style>
.styled-checkbox {
width: 20px;
height: 20px;
accent-color: blue;
margin-right: 5px;
}
.styled-label {
font-size: 18px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Styled Checkbox Example</h2>
<label class="styled-label">
<input type="checkbox" class="styled-checkbox"> Remember Me
</label>
</body>
</html>
Output
Output
Similar Reads
How to Add Checkbox in HTML Table ? Adding checkboxes to an HTML table can be useful for various purposes, such as selecting multiple rows for batch processing or toggling the state of individual items. In this article, we will explore two methods to add checkboxes to an HTML table i.e. using basic HTML and JavaScript for dynamic inte
2 min read
How to add a checkbox in forms using HTML ? In this article, we will learn how to add a checkbox in HTML Forms. Basically, the checkbox is used to select one or more options from a variety of options. It is a multi-control unit that will be presented as a small square box on the screen. Normally, Checkbox has 3 states namely- Checked, uncheck
1 min read
How to create an HTML checkbox with a clickable label? To create an HTML checkbox with a clickable label, use the <label> element and associate it with the checkbox using the for attribute, matching the checkbox's id. This makes the label clickable, toggling the checkbox state when clicked. The clickable label means the checkbox gets on/off when t
1 min read
How to Set Checkboxes Readonly in HTML ? In this article, we will learn whether it is possible to make checkboxes readonly in HTML or not. Checkboxes are commonly used to allow users to select multiple options from a set of choices. They are represented in HTML by the <input> tag with the type="checkbox" attribute. It is not possible
4 min read
HTML | DOM Input Checkbox checked Property The DOM Input Checkbox Property is used to set or return the checked status of a checkbox field. This property is used to reflect the HTML Checked attribute. Syntax: It is used to return the checked property.checkboxObject.checkedIt is used to set the checked property.checkboxObject.checked = true|f
2 min read
HTML DOM Input Checkbox Object The input checkbox object in HTML represents a checkbox in an HTML form. For each instance of an <input type = "checkbox"> element in an HTML form, a checkbox object is created. To access the checkbox object use indexing the elements array of the corresponding form or by using objects(); Table
2 min read