Стандарты по оформлению и оформлению форм (HTML / CSS)

Question

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

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

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

Answer 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/

Answer 2

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

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

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

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

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

Answer 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>

Answer 4

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

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