与<label>无线电的形式中的语义用法

Question

根据HTML5医生：

标签表示用户界面中的标题。标题可以是 与特定窗体控件(称为标签元素的 标记的控件，使用 for 属性，或通过放置窗体 标签元素本身内的控件。

因此，将其放入带有单选按钮的上下文中。在要求您以表格选择最喜欢的水果的示例中，如果我说标签"Apple"是其单选按钮的<label>，为了使标签可点击，我会将无线电控件放在里面，例如：

<label>
<input type="radio" name="fruit" value="apple"/> Apple
</label>

由于他们示例中的<label>元素也显示为整个输入值的标签，因此显示了我的问题"你最喜欢的水果？"进入标签，从而使整个部分充满标签？

<label>Your favourite fruit?</label>
<label>
<input type="radio" name="fruit" value="apple"/> Apple
</label>
<label>
<input type="radio" name="fruit" value="banana"/> Banana
</label>
<label>
<input type="radio" name="fruit" value="watermelon"/> Watermelon
</label>

这是对的吗？

然后，在他们的示例中保存问题的第一个<label>上的for属性也引用了元素的id。但是我不能这样做，因为我有 3 个元素，所以这意味着我无法使用for属性？

Answer 1

解决此问题的语义方法是使用字段集元素对单选按钮进行分组。

<fieldset>
<legend>Your favourite fruit?</legend>
<label>
<input type="radio" name="fruit" value="apple"/> Apple
</label>
<label>
<input type="radio" name="fruit" value="banana"/> Banana
</label>
<label>
<input type="radio" name="fruit" value="watermelon"/> Watermelon
</label>
</fieldset>

W3C 的辅助功能教程：https://www.w3.org/WAI/tutorials/forms/grouping/和 MDN 的字段集文章：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset 推荐此方法

。字段集的默认呈现可以使用 CSS 进行改进。这方面的一个例子是 https://design-system.service.gov.uk/components/radios/