HTML 复选框标签

PHPz原创: 2024-09-04 16:30:43407浏览

复选框是 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>

输出:

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>

输出：

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>

输出：

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>

输出：

HTML 复选框标签

在这里，我们在表单元素中包含了复选框元素。这对于处理服务器上复选框的值很有用。将表单发送到服务器时，提交内容将包含复选框值。 URL 值是通过组合复选框名称和复选框元素中的 value 属性来生成的。

例如，在我们的例子中，当两个复选框均以选中状态发送时，URL 中将包含“checkbox1=Yes&checkbox2=Yes”。

结论

称为复选框的输入元素允许用户选择或取消选择 HTML 中呈现给他们的选项。在本文中，我们看到了相同的多个用例。

以上是HTML 复选框标签的详细内容。更多信息请关注PHP中文网其他相关文章！

html if for select checkbox include using Attribute function default this display input kind Access

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML frameset Tag下一篇：Address Tag in HTML

查看更多