为什么要使用<label>标签和'for'属性？</label>

Question

您可以使用<label>标记标记输入字段，如下所示：

<label for="username">Username:</label>
<input id="username" name="username" type="text">

但为什么？

对SEO有效吗？还是浏览器渲染？或者更好地支持移动设备或其他设备？

Answer 1

label代码支持点击input元素上的焦点，其中id属性等于标签for属性。 如果您有例如您也可以通过单击标签选择此复选框。

示例：

<input type="checkbox" value="1" id="myCheckbox"/>

// A click here set the focus on the according checkbox without javascript things 
// And it's easier to select than a small checkbox element 
<label for="myCheckbox">My Checkbox</label>  

Answer 2

主要好处是：

• 辅助功能 - 它让屏幕阅读器知道文本适用于哪种表单控件，这样可以让用户准确地告诉用户他们希望在字段中输入什么内容
• 单击目标 - 单击标签与单击表单控件具有相同的效果，更容易点击更大的单击目标，尤其是当输入小到单选按钮时