HTML中label与input标签for属性的设计需求与核心作用

<body>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</body>

基本设计需求 #

这个属性从HTML早期版本就存在，设计的核心出发点非常务实，就是解决原生表单控件两个天生的使用痛点：一是单选框、复选框这类控件默认尺寸极小，不管是鼠标点击还是触屏点按都很容易误触、点不准；二是单纯把说明文本摆在控件旁边，浏览器、屏幕阅读器这类工具没法自动判定哪段文本对应哪个控件，视障用户根本无法正常理解表单选项的含义。

实际承担的核心作用 #

• 放大可交互热区：只要for的属性值和对应<input>的id值完全匹配，点击label标签内的文本，就等同于直接触发对应input的交互。拿你贴的单选框代码举例，不用精准瞄准那个小小的圆形选钮，直接点旁边的「HTML」「CSS」文字就能选中对应选项，对手部操作不便的用户、触屏设备用户友好度提升非常明显。
• 建立明确的语义关联：屏幕阅读器、语音控制这类辅助工具切换到对应表单控件时，会自动读出绑定的label文本，不会出现只播报「单选按钮 未选中」这类让人完全摸不着头脑的无效提示，是实现无障碍表单必须遵守的基础规范。
• 适配复杂布局场景：不写for属性、直接把input嵌套在label内部也能实现关联效果，但这种写法要求控件和说明文本必须放在同一个标签层级下，遇到多列表单、自定义浮层选框这类控件和文本需要分开摆放的场景，只有显式写for属性才能完成跨位置绑定，后续调整页面布局时也不容易弄乱文本和控件的对应关系。

内容的提问来源于stack exchange，提问作者jack