在验证摘要错误列表中使用标签标签？

Question

我正在考虑在表单提交失败的验证错误摘要中使用<label> 标签，但我不知道这是否会给我带来麻烦。谁能想到避免这种方法的充分理由？可用性、功能、设计或其他问题都有帮助。

我真的很喜欢单击错误列表中的行项目并跳转到有问题的输入元素的想法，尤其是在垂直方向更常见且滚动很痛苦的移动 HTML 场景中。到目前为止，我能找到的唯一问题是标签无法导航到没有单独 ID 的单选按钮或复选框（单击单个带有 ID 标记的单选/复选框元素的标签会改变其选择）。不过，这并不比没有标签更糟糕。

这里是这个想法的一个精简的 HTML 测试示例（为简单起见，省略了 CSS）。

<div class="validation-errors">
    <p>There was a problem saving your form.</p>
    <ul>
        <li><label for="select1">Select 1 is invalid.</label></li>
        <li><label for="text1">Text 1 is invalid.</label></li>
        <li><label for="textarea1">TextArea 1 is invalid.</label></li>
        <li><label for="radio1">Radio 1 is invalid.</label></li>
        <li><label for="checkbox1">Checkbox 1 is invalid.</label></li>
    </ul>
</div>
<form action="/somewhere">
<fieldset><legend>Some Form</legend>
    <ol>
        <li><label for="select1">select1</label>
            <select id="select1" name="select1">
                <option value="value1">Value 1</option>
                <option value="value2">Value 2</option>
                <option selected="selected" value="value3">Value 3</option>
            </select></li>
        <li><label for="text1">text1</label> <input id="text1" name="text1" type="text" value="sometext" /></li>
        <li><label for="textarea1">textarea1</label> <textarea id="textarea1" name="textarea1" rows="5" cols="25">sometext</textarea></li>
        <li><ul>
                <li><label><input type="radio" name="radio1" value="value1" />Value 1</label></li>
                <li><label><input type="radio" name="radio1" value="value2" checked="checked" />Value 2</label></li>
                <li><label><input type="radio" name="radio1" value="value3" />Value 3</label></li>
            </ul></li>
        <li><ul>
                <li><label><input type="checkbox" name="checkbox1" value="value1" checked="checked" />Value 1</label></li>
                <li><label><input type="checkbox" name="checkbox1" value="value2" />Value 2</label></li>
                <li><label><input type="checkbox" name="checkbox1" value="value3" checked="checked" />Value 3</label></li>
            </ul></li>
        <li><input type="submit" value="Save &amp; Continue" /></li>
    </ol>
</fieldset>
</form>

我为使可点击行为更加明显而添加的唯一内容是为标签添加 CSS 规则。

.validation-errors label { text-decoration: underline; cursor: pointer; }

Answer 1

对于 javascript 验证，您应该将该列表放在提交表单下方的底部，因为这是用户尝试提交并查看验证错误的位置。

对于服务器端验证，您希望将其置于顶部，就像在您的示例中一样。

或者，如果您想保持一致，您可以将 javascript 验证错误放在最前面，但请确保无效处理程序滚动到错误所在的位置。

除此之外，看起来不错！提高了可用性，并且标签与其对应的输入仍然具有独特的关系。