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

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

对于有视力的人，fieldset在视觉上暗示了同一类型的容器类型关系：这些字段与上下文相关，但仅在有多个字段时才相关。

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

简而言之，谨慎，语义和正确地使用它 - 而不是作为造型设备。

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

人们会告诉你关于HTML元素语义的疯狂事情。不要接受任何人的言论，包括我。请阅读spec并亲自了解。

Answer 2

将fieldset用于标签和控件的组合是不合逻辑的，虽然正式有效：fieldset应该是 set 字段。

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

Answer 3

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

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

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

3 个答案: