Introduction to HTML checkbox Tag
The checkbox is a type of input element available in HTML which allows users to check it or leave it as unchecked and allows user to select or deselect the option displayed on the web page. The checkbox allows an application to display input for selection in the form of a box and provides user access to select or deselect the displayed option. HTML checkbox can be used for user selection in the form of a yes/no statement or agreement kind of statement; depending upon this value, different functionality can be achieved.
Syntax:
Just like for other input type parameters, we will change the type of input as ‘checkbox’ in the case of a checkbox.
<input type = "checkbox">
Just like other types of input, we can add additional parameters in the syntax.
Function of HTML checkbox Tag
- The HTML checkbox Tag assigns value as true or false to the input element as parameter ‘checked’.
- When we click on the checkbox, it modifies the value of this element as true or false, which then can be used further for checking.
Examples of HTML checkbox Tag
Given below are the examples of HTML checkbox Tag:
Example #1 – Create a Simple Checkbox.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare input box with type as checkbox, we have also assigned name to this element-->
Checkbox 1 <input type = "checkbox" name = "checkbox1" >
</br>
Checkbox 2 <input type = "checkbox" name = "checkbox2" >
<p id = "result"> </p>
</div>
</body>
</html>
Output:
Here, we have declared two input elements as checkbox 1 and Checkbox 2 on the web page. We have not taken any action on clicking in a checkbox.
Example #2 – Multiple select elements.
Code:
<!DOCTYPE html> Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> Choose languages </h4>
<div>
<input type = "checkbox" name = "English">
<label for = "English"> English </label>
</div>
<div>
<input type = "checkbox" name = "Hindi" >
<label for = "Hindi" > Hindi </label>
</div>
<div>
<input type = "checkbox" name = "German" >
<label for = "German" > German </label>
</div>
<div>
<input type = "checkbox" name = "French" >
<label for = "French" > French </label>
</div>
<p id = "result"> </p>
</div>
</body>
</html>
4.5 (6,492 ratings)Course Price
₹6999 ₹41999
View Course
Related CoursesBootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)
Output:
This example shows how we can create multiple checkbox input elements at the same time. Here, we have created a total of four checkbox elements for choosing the languages. Note that we can select more than one checkbox at a time; this is in contrast with radio button input, where only one option can be chosen from all displayed element options.
Example #3 – Checked Attribute.
As it can be observed from the examples until that, the checkbox is unchecked on a web page loading. In case if we want to display a checkbox with checked as default, we can use the “checked” attribute with the checkbox element.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> Choose languages </h4>
<div>
<input type = "checkbox" name = "English" checked>
<label for = "English"> English </label>
</div>
<div>
<input type = "checkbox" name = "Hindi" checked>
<label for = "Hindi" > Hindi </label>
</div>
<div>
<input type = "checkbox" name = "German" >
<label for = "German" > German </label>
</div>
<div>
<input type = "checkbox" name = "French" >
<label for = "French" > French </label>
</div>
<p id = "result"> </p>
</div>
</body>
</html>
Output:
Here, out of four checkbox elements, we have made two checkboxes to load as checked by default. Note the first two languages are displayed as checked by default.
Example #4 – Checkbox in HTML Form.
Another way of using the checkbox. It will be added in HTML form, and we will see how we can identify whether a checkbox is checked or not.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<form>
<div>
Checkbox 1 <input type = "checkbox" name = "checkbox1" id = "selected" value = "Yes" >
</div>
<br>
<div>
Checkbox 2 <input type = "checkbox" name = "checkbox2" id = "selected" value = "Yes" >
</div>
</br>
<div>
<button type = "submit" > Submit </button>
</div>
</form>
<p id = "result"> </p>
</div>
</body>
</html>
Output:
Here, we have included checkbox elements within a form element. This is useful for processing the value of the checkbox on the server. When the form is submitted to the server, the values of the checkbox will also be sent with it. The value can be seen in the URL generated; it is created as the name of the checkbox followed by the value attribute in the checkbox element.
For example, in our case, when both checkboxes are sent as checked, the URL will contain “checkbox1=Yes&checkbox2=Yes” in it.
Conclusion
A checkbox in HTML is a type of input element which is used to select or deselect the option displayed by the user. In this article, we have seen multiple use cases of the same.
Recommended Articles
This is a guide to HTML checkbox Tag. Here we discuss the introduction, function, and different examples of HTML checkbox Tag, respectively. You may also have a look at the following articles to learn more –