3

我正在处理 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>

谢谢。

4

3 回答 3

5

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

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

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

简而言之，谨慎、语义化且正确地使用它——而不是作为造型工具。

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

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

于 2013-09-30T18:40:31.113 回答
0

使用fieldset标签和控件的组合是不合逻辑的，尽管形式上是有效的：afieldset应该是一组字段。

除此之外，这个问题在很大程度上是一个意见和辩论问题。HTML5 或多或少倾向于p这样的一对，但默认情况下会导致空行，因此div是更合理的选择。使用table元素也有充分的理由，每个标签/控件对都有一行。

于 2013-09-30T18:28:20.117 回答
0

除非您打算使用 a，fieldset legend否则我不会费心使用fieldsets。Bootstrap 表单也是一个很好的入门方式http://getbootstrap.com/css/#forms虽然没有最好的方法。

您经常看到人们使用包装器div，因为它有助于创建更整洁的行，即将填充应用于包装器而不是其中的所有元素，或者浮动父级中的所有元素并在底部应用 clear-fix 元素以正确包装..或者也只是浮动父母。

于 2013-09-30T18:31:01.357 回答