html - 包装 Label 和 Input 元素的最佳方式是什么

Question

我正在处理 HTML5 表单，我想 float 一些输入元素及其标签。这是最好的方法吗？

<form>
    <fieldset class="float_left">
        <label for="login">Login ID #</label>
        <input type="text" name="login" id="login">
    </fieldset>
    <fieldset class="float_right">
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </fieldset>
    <span class="forgot_login float_left"><a href="#">Forgot your login information?</a></span>
    <input type="submit" value="LOG IN" class="form_button float_right">
</form>

我看到人们将它们包裹在 div、列表等中。我想遵循最佳实践。即使我不打算设置样式，我是否也应该用字段集包装每个标签和输入元素？例如:

<form>
    <fieldset>
        <label for="name">Full Name:</label>
        <input type="text" name="name" id="name" placeholder="First Name" class="float_left">
    </fieldset>
    <fieldset>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" placeholder="Ex: johndoe@gmail.com" class="full_input">
    </fieldset>
    <fieldset>
        <textarea rows="3" name="message" id="message" placeholder="1000 Character or less" class="full_input"></textarea>
    </fieldset>
    <input type="submit" value="SEND" class="form_button float_right">
</form>

谢谢。

Answer 1

fieldset 的主要原始目的是将多个输入字段之间的上下文关联传达给非视觉 代理。预计屏幕阅读器将阅读 legend 文本，然后是第一个字段，然后是图例，然后是下一个字段......如:“Address:Street 1 ... Address : 街道 2... 地址:城市..."

对于有视力的人来说，fieldset 确实在视觉上暗示了同类的容器类型关系:这些字段通过上下文关联，但仅当存在多个字段时才如此。

因此，在fieldset 中使用单个标签/字段(label 不是字段，因为它不接受输入)在语义上毫无意义。这对使用屏幕阅读器的人来说很烦人(因为它的行为就像一个冗余标签)。对于有视力的人来说，如果您将它用于单个字段以及多个字段，它会破坏关系的含义，并且会占用更多空间。

简而言之，谨慎、语义和正确地使用它 - 不要将其用作样式设置。

对于“中性”容器，使用div 或span，因为它们不携带任何语义信息。列表结构、段落和所有其他元素都具有语义，您需要谨慎使用它们。

人们会告诉您有关 HTML 元素语义的疯狂事情。不要轻信任何人的话，包括我。去阅读 spec并亲自了解。