如何创建带有可点击标签的复选框?

htmlweb developmentfront end technology更新于 2025/3/26 19:56:17

HTML <checkbox> 标签用于定义激活时被勾选(选中)的方框。复选框允许用户从有限数量的选项中选择一个或多个选项。<input> 元素的 type 属性(语法如下)用于创建复选框。

<input type="checkbox" name="字段名称" value="初始值">

复选框支持以下属性:

Checked:一个布尔值属性，指示此复选框是否默认选中(页面加载时)。它并不指示此复选框当前是否处于选中状态:如果复选框的状态发生变化，此内容属性不会更新。
值:value 属性由所有输入类型共享，但它对复选框输入具有特定用途:提交表单时，只有当前选中的复选框才会提交到服务器，并且报告的值是 value 属性的值。

创建带有可点击标签的 HTML 复选框意味着当点击标签时，复选框会打开或关闭。在本教程中，我们将讨论两种创建带有可点击标签的复选框的方法。

包裹标签标签

在 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> 中添加额外的属性。输入框的可点击区域也是标签的可点击区域，因此无需点击两个单独的位置来控制复选框——无论 input> 和实际标签文本之间的距离有多远，或者您应用了哪种 CSS，都只有一个位置。