HTML 复选框标签

复选框是 HTML 中提供的一种输入元素，允许用户选中或不选中它，并允许用户选择或取消选择网页上显示的选项。复选框使应用程序能够以框的形式显示供选择的输入，并为用户提供选择或取消选择所显示选项的访问权限。 HTML复选框可以以是/否声明或同意类型声明的形式供用户选择；根据这个值，可以实现不同的功能。

语法：

就像其他输入类型参数一样，如果是复选框，我们会将输入类型更改为“复选框”。

<input type="checkbox">

就像其他类型的输入一样，我们可以在语法中添加额外的参数。

HTML 复选框标签的功能

• HTML 复选框标签将 true 或 false 值分配给输入元素作为参数“checked”。
• 当我们点击复选框时，它会将该元素的值修改为 true 或 false，以便进一步检查。

HTML 复选框标签示例

下面给出的是 HTML 复选框标签的示例：

示例 #1 – 创建一个简单的复选框。

代码：

<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>


<div class="results">
<h2 id="Check-Box-Example"> 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">

Checkbox 2 <input type="checkbox" name="checkbox2">
<p id="result"> </p>
</div>

输出:

在这里，我们在网页上声明了两个输入元素作为复选框 1 和复选框 2。我们尚未对点击复选框采取任何操作。

示例 #2 – 多个选择元素。

代码：

<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>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4 id="Choose-languages"> 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>

输出：

这个示例展示了我们如何同时创建多个复选框输入元素。在这里，我们总共创建了四个复选框元素来选择语言。请注意，我们可以一次选择多个复选框；这与单选按钮输入形成对比，单选按钮输入只能从所有显示的元素选项中选择一个选项。

示例 #3 – 检查属性。

从示例中观察到，该复选框在网页加载时未选中。如果我们想显示默认为选中的复选框，我们可以在 checkbox 元素中使用“checked”属性。

代码：

<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>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4 id="Choose-languages"> 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>

输出：

在这里，在四个复选框元素中，我们制作了两个复选框来默认加载为选中状态。请注意，前两种语言默认显示为选中状态。

示例 #4 – HTML 表单中的复选框。

使用复选框的另一种方式。它将以 HTML 形式添加，我们将了解如何识别复选框是否被选中。

代码：

<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>


<div class="results">
<h2 id="Check-Box-Example"> 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>

<div>
<button type="submit"> Submit </button>
</div>
</form>
<p id="result"> </p>
</div>

输出：

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

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

结论

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

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