HTML 复选框标签-html教程-PHP中文网

HTML 复选框标签

PHPz

发布： 2024-09-04 16:30:43

原创

438 人浏览过

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