Стандарты для разработки и проектирования форм (HTML/CSS)

Одной частью веб-разработки (с лицевой точки зрения) является создание форм. Никогда не было стандартного набора, и я видел, как люди продолжали использовать <tables>, чтобы сохранить стиль. Скажите, что вы должны были выложить эту форму:

На первый взгляд кажется, что таблица упростит эту форму. Другим вариантом является использование <fieldset> 's, возможно, списка внутри них. Поплавьте поля влево, дайте им равную ширину.

Мой вопрос что является наиболее стандартным способом выкладки форм?. Кажется, что существует несколько методов, но многие из них не работают с перекрестным браузером.

Как бы вы это сделали? И почему?

Ответ 1

Я должен сказать, что наиболее распространенный способ сделать это - использовать таблицы. К сожалению, есть проблемы с табличными формами макетов (большой сюрприз). Одна большая вещь состоит в том, что таблицы будут кровоточить по их контейнерам (если переполнение не скрыто), и они не сквоют их содержимое, как это может сделать CSS. Кроме того, столы рендеринга дороже (занимает больше циклов процессора). В целом, я думаю, что, по сравнению с чистыми решениями CSS, макеты форм на основе таблиц жесткие и негибкие, а в качестве дизайнера я сжимаю (и вы тоже!) При использовании таблиц для целей макета для начала.

Метод, который мне начинает нравиться (и который становится все более популярным), является чистым методом CSS2 для выкладки форм. Я не буду признавать себя за то, что придумал эту идею, но это действительно прямо. Все, что вам нужно сделать, это следующее:

HTML:

<form action="process.php" method="post">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />
</form>

CSS:

label, input {
    width:200px;
    display:block;
    float:left;        
    margin-bottom:10px;
}
label {
    width:125px;
    text-align:right;
    padding-right:10px;
    margin-top:2px;
}
br {
    clear:left;
}

Как вы можете видеть, код CSS действительно минимален, и результаты действительно потрясающие. Плюсы этого метода заключаются в том, что он использует меньше кода (быстрее загружается), он чище, без всяких беспорядочных табличных тегов, засоряющих ваш HTML-документ (ремонтопригодность), и я считаю, что веб-браузеры будут быстрее выполнять метод CSS.

Обновление 1: Я также нашел метод CSS с использованием неупорядоченных списков.

Обновление 2: @musicinmyhead напомнил мне об использовании тегов fieldset и legend в макетах форм CSS. Я закодировал нам быстрое и грязное демо здесь.

Примечание. Первоначально я узнал об этом чистом макете CSS: http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

Ответ 2

Исследование показывает, что метки над полями и полями в одном столбце легче всего заполнять. У Lukew есть много данных/исследований/информации формы:

http://www.lukew.com/ff/entry.asp?504

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

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

Обычно я обертываю пару LABEL/FIELD в div и по мере необходимости помещаю метку и поле в зависимости от желаемого макета.

Ответ 3

Практика использования таблиц как макета имела смысл до CSS, но таблицы на самом деле предназначены для представления данных и ничего другого. Самый простой способ компоновки формы - надпись над полем в одном столбце, но можно создать тот же сетчатый макет, который предоставляет таблицы с помощью элемента <div> и некоторого CSS.

Для этого CSS может выглядеть так:

.layout-grid{
    display: table;
}

.layout-row{
    display: table-row;
}

.layout-cell{
    display: table-cell;
}

и HTML может выглядеть так:

<form action="foo.php" method="post">
    <div class="layout-grid">
        <div class="layout-row">
            <div class="layout-cell">
                <label for="foo">Foo:</label>
            </div>
            <div class="layout-cell">
                <input id="foo" name="foo" />
            </div>
        </div>
        <div class="layout-row">
            <div class="layout-cell">
                <label for="foo">Foo:</label>
            </div>
            <div class="layout-cell">
                <input id="foo" name="foo" />
            </div>
        </div>
        <div class="layout-row">
            <div class="layout-cell">
            </div>
            <div class="layout-cell">
                <button type="submit">Go!</button>
            </div>
        </div>
    </div>
</form>

Ответ 4

Лично? Стол. На работе? CSS. Я иду с тем, что требуется. Там вся дискуссия о том, что форма не является сама по себе табличными данными (например, формой), которая истинна, и есть CSS, который может создать структуру, подобную ячейке.

Если у вас мало времени и удобны только с таблицами? Таблицы. Далее - структура CSS/cell, но большинство из них (вероятно, правильно) скажут CSS полностью. Это не слишком сложно, и если вы хотите смешать и сопоставить все это, скажем, добавив дополнительный, четвертый вопрос внизу в первых трех, это изменит ситуацию чуть быстрее. Не так много, но немного.