html怎样创建复选框,如何使用可点击标签创建HTML复选框

方法1：包装标签

将复选框包装在 label 标记内：

Text

方法2：使用for属性

使用 for 属性(匹配复选框 id )：

Text

NOTE ：页面上的ID必须是唯一的！

解释

由于其他答案没有提到它，标签最多可以包含1个输入并省略 for 属性，并且假定它是用于其中的输入 .

摘自w3.org(我的重点)：

[for属性]显式将正在定义的标签与另一个控件相关联 . 如果存在，则此属性的值必须与同一文档中某个其他控件的id属性的值相同 . 缺席时，定义的标签与元素的内容相关联 . 要隐式地将标签与另一个控件相关联，控制元素必须位于LABEL元素的内容中 . 在这种情况下，LABEL可能只包含一个控制元素 . 标签本身可以位于相关控件之前或之后 .

使用此方法比 for 有一些优势：

无需为每个复选框分配 id (太棒了！) .

无需使用 中的额外属性 .

输入's clickable area is also the label' s可点击区域，因此没有两个单独的位置可以控制复选框 - 只有一个，无论 和实际标签文本有多远，无论您应用什么类型的CSS它 .

用一些CSS演示：

label {

border:1px solid #ccc;

padding:10px;

margin:0 0 10px;

display:block;

}

label:hover {

background:#eee;

cursor:pointer;

}

Option 1

Option 2

Option 3