制作网络表单的最佳做法

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>

可能重复: 为什么 - 不使用表格为布局在html中

Answer 1

不要使用表格,这是一个非常脆弱的非语义布局,使用适当的CSS布局.下面是一些演示文稿,解释了表单布局的一些好方法,包括可用性考虑因素.第一个链接更多地是关于代码,第二个链接更多是关于设计和可用性考虑因素:

• 学习爱表格(Web Directions South '07)
• 表单设计的最佳实践

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;
}