数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何创建一个带有可点击标签的复选框？
HTML 的<checkbox>标签用于定义激活时被勾选（选中）的方框。复选框用于允许用户从有限数量的选项中选择一个或多个选项。<input>元素的type属性（如下语法所示）创建它。
<input type="checkbox" name="field name" value="Initial value">
复选框支持以下属性
Checked: 一个布尔属性，指示此复选框默认情况下是否被选中（页面加载时）。它不指示此复选框当前是否被选中：如果复选框的状态发生变化，此内容属性不会更新。
Value: value属性为所有输入类型共享，但它对复选框输入具有特定用途：提交表单时，只有当前选中的复选框才提交到服务器，报告的值是value属性的值。
创建带有可点击标签的HTML复选框意味着当点击标签时，复选框会打开或关闭。在本教程中，我们将讨论两种创建带有可点击标签的复选框的方法。
包裹Label标签
在HTML中，<label>标签用于改进鼠标可用性；例如，如果用户点击<label>元素内的文本，它会切换控件。<label>标签指定按钮、输入、计量器、输出、进度条、选择或文本区域元素的标签。标签也可以通过将其包含在<label>元素中来绑定到元素。
它支持以下属性。
For: for属性指定标签绑定到的哪个表单元素。
Form: form属性指定标签所属的表单。
示例
在下面的示例中，我们在label标签内使用复选框并应用某些CSS样式属性。
<!DOCTYPE html>
<html>
<head>
<title>How to Create Checkbox with a Clickable Label?</title>
<style>
.label1 {
background-color:floralwhite;
color:darkolivegreen;
font-weight:550;
font-size:20px;
border:2px solid darkolivegreen;
border-radius:10px;
padding:8px 20px 12px 15px;
display:inline-block;
margin:10px;
text-align:center;
}
</style>
</head>
<body>
<h2>This is a Clickable Checkbox</h2>
<label class="label1">
<input type="checkbox" name="checkbox" value="text">Click Me
</label>
</body>
</html>
使用“for”属性
for 属性是<label>和<output>的有效属性。当用于<label>元素时，它指示此标签描述的表单元素。当我们点击标签时，我们将焦点带到关联的输入元素。
for属性将正在定义的标签显式链接到另一个控件。当此属性存在时，它必须与同一文档中另一个控件的id属性具有相同的值。当缺少标签时，元素的内容与标签关联。
要将标签隐式关联到另一个控件，控件元素必须包含在Label元素的内容中。在这种情况下，标签只能有一个控件元素。标签可以出现在关联控件之前或之后。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Create Checkbox with a Clickable Label?</title>
<style>
.label1,
.label2{
background-color:thistle;
color:purple;
font-weight:550;
font-size:20px;
border:3px solid rebeccapurple;
border-radius:20px;
padding:8px 20px 12px 15px;
display:inline-block;
text-align:center;
}
.container{
height:200px;
width:300px;
background-color:powderblue;
margin:20px;
border-radius:10px;
padding:10px;
}</style>
</head>
<body>
<div class="container">
<h3>This is a clickable checkbox! Try it.</h3>
<input type="checkbox" name="checkbox" id="checkbox_id1" value="text">
<label class="label1" for="checkbox_id">Click Here</label><br><br>
<input type="checkbox" name="checkbox" id="checkbox_id2" value="text">
<label class="label2" for="checkbox_id2">Click Here</label>
</div>
</body>
</html>
结论
如上所示，第一种方法比使用for属性具有一些优势。如果标签包含最多一个输入但缺少for属性，则假定它是为其中包含的输入。
包裹label标签更高效且更有用。它比for属性有很多优点。无需为每个复选框分配id。无需在<label>中包含额外的属性。输入的可点击区域也是标签的可点击区域，因此无论输入>和实际标签文本相隔多远，或者您为其应用何种CSS，都只有一个可点击的地方来控制复选框。
933 次浏览
