The checkbox is a type of input element available in HTML that allows users to check it or leave it unchecked and allows users to select or deselect the option displayed on the web page. The checkbox enables an application to display input for selection in the form of a box and provides the 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 to a ‘checkbox’ in the case of a checkbox.
<input type = "checkbox">
Copy after login
Just like other types of input, we can add additional parameters in the syntax.
Function of HTML checkbox Tag
- The HTML checkbox Tag assigns a value as true or false to the input element as the parameter ‘checked.’
- When we click on the checkbox, it modifies the value of this element as true or false, which 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>Copy after login
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 on a checkbox.
Example #2 – Multiple select elements.
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">
<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>Copy after login
Output:
This example shows how we can create multiple checkbox input elements simultaneously. 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 contrasts with radio button input, where only one option can be chosen from all displayed element options.
Example #3 – Checked Attribute.
As observed from the examples until that, the checkbox is unchecked on a web page loading. 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>Copy after login
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 to identify whether a checkbox is checked.
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>Copy after login
Output:
Here, we have included checkbox elements within a form element. This is useful for processing the value of the checkbox on the server. The submission will include the checkbox values when sending the form to the server. The URL value is generated by combining the checkbox name and 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
An input element called a checkbox allows users to choose or unchoose an option presented to them in HTML. In this article, we have seen multiple use cases of the same.
The above is the detailed content of HTML checkbox Tag. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
