时间戳

首页 > 解决方案 > 形式中的语义用法

html - 形式中的语义用法

问题描述

根据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>

那是对的吗？

然后在他们的示例中包含问题的for第一个属性也<label>指的id是元素的。但是我不能这样做，因为我有 3 个元素，所以这意味着我不可能使用该for属性？

标签： htmlformsradio-buttonsemantic-markup

解决方案

解决此问题的语义方法是将单选按钮与 fieldset 元素组合在一起。

<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 的 Fieldset 文章：https ://developer.mozilla.org/en-US/建议使用这种方法来处理您的场景文档/Web/HTML/元素/字段集

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

推荐阅读