HTML checkbox Tag-HTML Tutorial-php.cn

Table of Contents

Examples of HTML checkbox Tag

Example #1 – Create a Simple Checkbox.

Example #2 – Multiple select elements.

Example #3 – Checked Attribute.

Example #4 – Checkbox in HTML Form.

Conclusion

Home

Web Front-end

HTML Tutorial

HTML checkbox Tag

PHPz

Sep 04, 2024 pm 04:30 PM

html html5 HTML Tutorial HTML Properties HTML tags

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:

HTML checkbox Tag

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:

HTML checkbox Tag

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:

HTML checkbox Tag

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:

HTML checkbox Tag

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn