复选框是 HTML 中提供的一种输入元素，允许用户选中或不选中它，并允许用户选择或取消选择网页上显示的选项。复选框使应用程序能够以框的形式显示供选择的输入，并为用户提供选择或取消选择所显示选项的访问权限。 HTML复选框可以以是/否声明或同意类型声明的形式供用户选择；根据这个值，可以实现不同的功能。
语法：
就像其他输入类型参数一样，如果是复选框，我们会将输入类型更改为“复选框”。
<input type = "checkbox">
就像其他类型的输入一样，我们可以在语法中添加额外的参数。
HTML 复选框标签的功能
下面给出的是 HTML 复选框标签的示例：
代码：
<!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>输出:
在这里，我们在网页上声明了两个输入元素作为复选框 1 和复选框 2。我们尚未对点击复选框采取任何操作。
代码：
<!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>输出：
这个示例展示了我们如何同时创建多个复选框输入元素。在这里，我们总共创建了四个复选框元素来选择语言。请注意，我们可以一次选择多个复选框；这与单选按钮输入形成对比，单选按钮输入只能从所有显示的元素选项中选择一个选项。
从示例中观察到，该复选框在网页加载时未选中。如果我们想显示默认为选中的复选框，我们可以在 checkbox 元素中使用“checked”属性。
代码：
<!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>输出：
在这里，在四个复选框元素中，我们制作了两个复选框来默认加载为选中状态。请注意，前两种语言默认显示为选中状态。
使用复选框的另一种方式。它将以 HTML 形式添加，我们将了解如何识别复选框是否被选中。
代码：
<!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>输出：
在这里，我们在表单元素中包含了复选框元素。这对于处理服务器上复选框的值很有用。将表单发送到服务器时，提交内容将包含复选框值。 URL 值是通过组合复选框名称和复选框元素中的 value 属性来生成的。
例如，在我们的例子中，当两个复选框均以选中状态发送时，URL 中将包含“checkbox1=Yes&checkbox2=Yes”。
称为复选框的输入元素允许用户选择或取消选择 HTML 中呈现给他们的选项。在本文中，我们看到了相同的多个用例。
以上是HTML 复选框标签的详细内容。更多信息请关注PHP中文网其他相关文章！
