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

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-макет. Ниже приведены некоторые презентации, которые объясняют некоторые хорошие подходы к макету формы, в том числе вопросы удобства использования. Первая ссылка больше о коде, а вторая больше о дизайне и удобстве использования:

• Учимся любить формы (веб-направления Юг '07)
• Рекомендации по разработке форм

Answer 2

Абсолютно лучший формат для форм, на мой взгляд, это использовать неупорядоченные списки внутри наборов полей, приправленных метками. В любом случае, это наиболее семантически правильный способ:

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

Answer 3

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

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

Answer 4

Для лучшей практики HTML / CSS в целом, я рекомендую взглянуть на A List Apart . Что касается форм, вот статья, которая соответствует вашим потребностям: Более привлекательные формы . Для других примеров, просто гуглите с ключевыми словами «семантическая HTML-форма» .

Answer 5

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

Answer 6

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