Лучшая практика для создания веб-форм

Можно ли использовать таблицы для создания веб-форм или использовать 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

Ответы

Ответ 1

Не используйте таблицы, которые очень brittle, non semantic, используйте правильный макет CSS. Ниже приведены некоторые презентации, в которых объясняются некоторые хорошие подходы к формированию макета, включая соображения удобства использования. Первая ссылка больше о коде, а вторая - о соображениях дизайна и удобства использования:

Ответ 2

Правило для жизни: Используйте только таблицы для отображения табличных данных.

Это всегда хорошо срабатывало для меня....

Ответ 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>

Наборы полей не являются обязательными, но могут оживлять тусклую форму. Основной CSS, чтобы получить ul, выглядит как форма, может быть примерно так:

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

Ответ 4

В HTML не существует такого жесткого правила или лучшего способа делать формы. Если вы хотите использовать div в простой форме, лучше выбрать CSS-фреймворк, чтобы сделать вещи такими, как blueprint

Ответ 5

Для лучших методов HTML/CSS в целом я рекомендую посмотреть A List Apart. Что касается форм, вот статья, которая вам подходит: Более удобные формы. Для других примеров просто Google с ключевыми словами "semantic html form" .

Ответ 6

Таблицы не относятся к макету, таблицы относятся к периоду данных, css - это путь, который лучше всего подходит.