如何创建一个带可点击标签的复选框

HTML 的 <checkbox> 标签用于定义在激活时被选中（勾选）的方框。复选框用于允许用户从有限的选项中选择一个或多个选项。使用<input>元素的 type 属性来创建它，如下所示的语法。

<input type="checkbox" name="field name" value="Initial value">

复选框支持以下属性：

Checked: 一个布尔属性，指示该复选框在默认情况下是否被选中（当页面加载时）。它不表示该复选框当前是否被选中：如果复选框的状态发生更改，该内容属性不会更新。
Value: value属性被所有输入类型共享，但它对于复选框输入有特定的用途：当提交表单时，只有当前被选中的复选框才会被提交到服务器，并且报告的值是value属性的值。

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

包裹标签

在HTML中，标签用于改善鼠标的可用性；例如，如果用户点击元素中的文本，则切换控件。标签指定按钮、输入、计量器、输出、进度、选择或文本区域元素的标签。标签也可以通过将其包含在元素中来绑定到元素中。

它支持以下属性。

For: for属性指定要绑定标签的表单元素。
Form: form属性指定标签所属的表单。

例子

在下面的例子中，我们使用标签标签中的复选框，并应用一些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>