标准答案
- label 解决“这个控件叫什么”的问题。它把可见文字和具体 input、select、textarea 关联起来。
- 关联后，点击 label 可以聚焦或切换控件，屏幕阅读器也会把 label 读成控件名称。
- fieldset 解决“哪些控件属于同一组”的问题，适合单选、多选、地址、支付方式这类组合表单。
- legend 解决“这一组控件在回答什么问题”的问题，它相当于这个 fieldset 的标题。
- placeholder 不能替代 label，fieldset 和 legend 也不是为了样式，而是为了让复杂表单有清楚的语义和上下文。
题目解析
- label：通过 for 绑定控件 id，或包裹控件，让点击文字也能聚焦或切换控件。
- fieldset：表示一组表单控件属于同一个问题或同一个业务块。
- legend：给 fieldset 提供分组名称，屏幕阅读器会把它作为上下文读出。
代码示例
单选题里只给每个 radio 写 label 还不够，还需要 legend 说明这一组到底在问什么。
HTML
<fieldset>
<legend>你期望的面试方向是？</legend>
<label>
<input type="radio" name="track" value="frontend">
前端
</label>
<label>
<input type="radio" name="track" value="backend">
后端
</label>
</fieldset>常见误区
- 只用 placeholder 代替 label。placeholder 会消失，也不是稳定的控件名称。
- 多个 input 共用一个 label，导致辅助技术读出的名称混乱。
- 成组 radio 没有 fieldset 和 legend，用户只听到选项，听不到问题。
追问方向
- placeholder 为什么不能替代 label？因为 placeholder 会在输入后消失，也不是稳定的控件名称。
- label 的 for/id 写法和包裹 input 写法有什么区别？两者都能建立关联，但 for/id 更适合布局分离和复杂表单。
- radio 或 checkbox 成组时为什么还需要 fieldset 和 legend？因为每个选项的 label 只能说明选项本身，legend 才能说明这一组在回答什么问题。