制作网络表单的最佳做法

Question

使用表格制作网络表单是否可以，或者我应该使用div？我知道如何使用表格，但我应该如何使用div制作表格，还是使用表格更好？

<form method="post">
    <table>
        <tr>
            <td>
                <label for="username">Username:</label>
            </td>
            <td>
                <input type="text" name="username" id="username"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="password">Password:</label>
            </td>
            <td>
                <input type="password" name="password" id="password"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="cancel" value="Cancel"/>
            </td>       
            <td>
                <input type="submit" name="send" value="Send"/>
            </td>
        </tr>
    </table>
</form>

  

可能重复： Why-not-use-tables-for-layout-in-html

Answer 1

不要使用非常brittle非semantic布局的表格，使用正确的CSS布局。下面是一些演示文稿，解释了表单布局的一些好方法，包括可用性考虑因素。第一个链接更多地是关于代码，第二个链接更多是关于设计和可用性的考虑因素：

• Learning To Love Forms (Web Directions South '07)
• Best Practices for Form Design

Answer 2

生活规则：仅使用表格显示表格数据。

这一直对我有用....

Answer 3

在我看来，表格绝对最好的格式是在带有标签的字段集中使用无序列表。无论如何，这是最正确的语法：

<form method="post" action="foo.php">
    <fieldset>
        <legend>Some fields</legend>
        <ul>
            <li>
                <label for="foo">Foobar</label>
                <input type="text" name="foo" id="foo" />
            </li>
        </ul>
    </fieldset>
</form>

字段集不是强制性的，但可以使用另外的枯燥形式。使ul看起来像表单的基本CSS可能是这样的：

form ul {
    list-style: none;
    margin: 0;
}

form ul li {
    margin-bottom: 10px;
}

form ul li label {
    display: block;
    float: left;
    width: 150px;
    line-height: 24px;
}

Answer 4

为了获得最佳的HTML / CSS实践，我建议您查看A List Apart。关于表单，这里有一篇适合您需求的文章：Prettier Accessible Forms。对于其他示例，只需使用关键字"semantic html form"进行google。

Answer 5

在HTML中没有这样严格的规则或更好的表格形式。如果你想以一种简单的方式使用div，最好选择一个CSS框架来简化blueprint

Answer 6

表格不适用于布局，表格适用于数据期间，css是要走的路，这是最佳做法。