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

Question

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

<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

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

对于视力正常的人，afieldset确实在视觉上暗示了同一种容器类型的关系：这些字段通过上下文相关联，但仅当存在多个字段时。

因此，在 a 中拥有单个标签/字段（alabel不是字段，因为它不接受输入）永远没有语义意义fieldset。这对使用屏幕阅读器的人来说很烦人（因为它的行为就像一个多余的标签）。对于有视力的人来说，如果将它用于单个字段和多个字段，它会破坏关系的含义，并且占用更多空间。

简而言之，谨慎地、语义地和正确地使用它——而不是作为样式设备。

对于“中性”容器，请使用 adiv或 a span，因为它们不携带语义信息。列表结构、段落、所有其他元素都有语义，你需要注意如何使用它们。

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