HTML 复选框标签
复选框是 HTML 中提供的一种输入元素，允许用户选中或不选中它，并允许用户选择或取消选择网页上显示的选项。复选框使应用程序能够以框的形式显示供选择的输入，并为用户提供选择或取消选择所显示选项的访问权限。 HTML复选框可以以是/否声明或同意类型声明的形式供用户选择；根据这个值，可以实现不同的功能。
语法：
就像其他输入类型参数一样，如果是复选框，我们会将输入类型更改为“复选框”。
<input type = "checkbox">
就像其他类型的输入一样，我们可以在语法中添加额外的参数。
HTML 复选框标签的功能
- HTML 复选框标签将 true 或 false 值分配给输入元素作为参数“checked”。
- 当我们点击复选框时，它会将该元素的值修改为 true 或 false，以便进一步检查。
HTML 复选框标签示例
下面给出的是 HTML 复选框标签的示例：
示例 #1 – 创建一个简单的复选框。
代码：
<!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。我们尚未对点击复选框采取任何操作。
示例 #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>输出：
这个示例展示了我们如何同时创建多个复选框输入元素。在这里，我们总共创建了四个复选框元素来选择语言。请注意，我们可以一次选择多个复选框；这与单选按钮输入形成对比，单选按钮输入只能从所有显示的元素选项中选择一个选项。
示例 #3 – 检查属性。
从示例中观察到，该复选框在网页加载时未选中。如果我们想显示默认为选中的复选框，我们可以在 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>输出：
在这里，在四个复选框元素中，我们制作了两个复选框来默认加载为选中状态。请注意，前两种语言默认显示为选中状态。
示例 #4 – 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
您如何在PHP中解析和处理HTML/XML？
Feb 07, 2025 am 11:57 AM
本教程演示了如何使用PHP有效地处理XML文档。 XML（可扩展的标记语言）是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储
