如何使用 HTML 指定计算绑定到哪个表单元素?

htmlweb developmentfront end technology更新于 2025/4/10 1:48:17

HTML label 标签允许我们点击标签，点击后将被视为点击了相应的输入类型。HTML 可以接受多种输入类型，例如单选按钮或复选框。for 属性指定了标签绑定到的表单元素。

语法

<label for="element_id"> Label Content </label>

以下是示例……

示例

在下面的示例中，如果我们点击学生，则相应的单选按钮将被选中，从而扩大选择范围。这是借助 for 属性实现的。


<!DOCTYPE html>
<html>
<body>
   <h1>Click On Labels To Select Radio Button</h1>
   <form>
      <label for="Student">Student</label>
      <input type="radio" name="Category" id="Student" value="Student" />
      <br />
      <label for="WorkingProfessional">
         Working Professional
      </label>
      <input
         type="radio"
         name="Category"
         id="WorkingProfessional"
         value="WorkingProfessional"/>
      <br />
      <label for="Retired">Retired</label>
      <input type="radio" name="Category"
      id="Retired" value="Retired" />
      <br />
      <br />
      <input type="submit" value="Submit" />
   </form>
</body>
</html>

输出

脚本执行时，浏览器窗口会打开一个包含不同标签的窗口，每个标签前面都有一个单选按钮，用于在选中时扩大选择范围。

示例

另一个使用 for 属性的示例如下所示 -


<!DOCTYPE html>
<html>
<body>
   <p>Education:</p>
   <form action="">
      <label for = "graduate">Graduate</label>
      <input type = "radio" name = "education" id = "graduate" value = "graduate"><br>
      <label for = "ugraduate">Under-graduate</label>
      <input type = "radio" name = "education" id = "ugraduate" value = "ugraduate"><br>
      <input type = "submit" value = "Submit">
   </form>
</body>
</html>