自定义控件自定义标签“for”属性放置

Question

我正在尝试在这些堆叠无线电的顶部添加标签。这个方法有效，但是当我通过validator.w3.org

运行时，我正在返回一个警告

警告声明“标签元素的for属性必须引用非隐藏的表单控件。”这个错误正在弹出，因为我在不正确的位置有id字段，但我不确定它应该位于何处。我已经尝试了几种解决方案，但都返回了相同的属性警告。

<div class="col">
    <div class="custom-controls-stacked">
        <label for="gender"> Gender </label>
        <label class="custom-control custom-radio" id="gender">
            <input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description"> Male </span>
        </label>
        <label class="custom-control custom-radio">
            <input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description"> Female </span>
        </label>
    </div>
</div>

Answer 1

<label>有一个<label>，这有点奇怪。 <label>仅适用于表单元素。

我会删除＆＃34;性别＆＃34;标签，将整个事物包裹在<fieldset>中并放入＆＃34;性别＆＃34;进入<legend>。