Лучший способ компоновки в HTML-формах?

Я хочу отобразить HTML-форму, содержащую помеченные текстовые поля, например:

      First Name:  [_____________]
       Last Name:  [_____________]
   Date of Birth:  [________]

Мой очевидный подход - использовать <TABLE> и просто поместить метки и текстовые поля в свои ячейки, но есть лучший способ, например. подход на основе CSS?

EDIT:

Я ищу способ, который уменьшает многословие в файле HTML.
И да, я ищу автоматическое определение ярлыков. См. связанный вопрос об упаковке меток

Ответ 1

Если вам нужны метки слева от полей, просто перейдите и используйте таблицу. Таблицы не только красиво делятся на старые браузеры, но они автоматически сортируют столбец меток с текстом в них (предполагая, что вы используете white-space: no-wrap для ячеек, содержащих метки, и/или — и это истинная ересь > надежный старый атрибут nowrap в теге th), они обрабатываются, будучи достаточно узкими, и они легки. Сделайте каждую ячейку ярлыка заголовком, а каждая ячейка поля - нормальной ячейкой. И это боль, но убедитесь, что метки действительно label и связаны с их полями, потому что доступность имеет значение, даже если (возможно, особенно если) вы используете таблицу не семантически.

Мне бы очень хотелось услышать о решениях CSS, которые автоматически определяют размер столбцов ярлыков, хорошо разбираются в них и не включают 18 хаков, чтобы справляться с несоответствиями в браузерах. Я был бы рад увидеть их. Но каждый раз, когда я смотрел (и что несколько), это все еще было пробелом. Разрыв, необходимый для наполнения, IMV, поэтому мы можем прекратить это делать, не надевая прическу.

Для тех, кто читает, кому не нужны метки слева, посмотрите jball answer для красивой, семантической альтернативы.

Ответ 2

В терминах удобства использования и если вертикальное пространство не является ограничивающим фактором, список полей с меткой над каждым полем является самым быстрым для чтения и заполнения и может быть выполнен эстетически. См. Многие исследования юзабилити в Интернете для получения дополнительной информации, например. http://www.lukew.com/resources/articles/web_forms.html

Ответ 3

Я бы хотел использовать списки определений (<dl>), они имеют тенденцию быть семантически корректными. Метка определяется пользовательским вводом. Это имеет смысл для меня. <dl> выражает семантическое содержимое более точно, чем таблица.

<dl>
    <dt><label for="name>Name</label></dt>
    <dd><input type="text" id="name" /></dd>

    <dt><label for="email>Email</label></dt>
    <dd><input type="text" id="email" /></dd>
</dl>

Вот пример

Кстати, они грамотно деградируют во всех браузерах, даже на основе текста.

Ответ 4

Я думаю, что что-то вроде этого - это то, что я делаю, но также не будет автоматизировать длину текста, но он чище, на мой взгляд.

<form>
  <label for="firstName">First Name</label>
  <input type="textfield" name="firstName" />

  <label for="lastName">Last Name</label>
  <input type="textfield" name="lastName" />
</form>

label {
  float:left;
  width:30px;
}

input {
  float:left;
  margin-left:30px;
}

Ответ 5

Статья немного устарела, но я всегда находил, что список советов, которые должны быть твердыми: (если вы хотите избавиться от своих таблиц)

http://www.alistapart.com/articles/prettyaccessibleforms/

Ответ 6

Дисплей таблицы CSS

Из IE8 + вы можете использовать CSS Table Display для этого:

<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">

<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>

<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>

<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>

<div>
<label></label>
<input type="submit" value="Send"/>
</div>

</form>
</body>
</html>

Ответ 7

Используйте рамки CSS, такие как Blueprint и используйте это для стилей форм.

Другим трюком было бы создание виртуальных "столбцов" с помощью css и их плавание рядом друг с другом. Ярлыки в одном столбце и входы в другой. Поместите это (оба столбца) в div с достаточно большой шириной и поместите столбцы в противоположную сторону, которую вы хотите выровнять.

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

form input, form select
{
    float: right;
    margin-right: 650px;
}
form label
{
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}
form .nofloat
{
    float: none;
    margin: 0;
}
form br
{
    clear: both;
}

И макет, подобный этому

<input type="text" id="name" />
<label for="name">Name</label>
<br />

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

Ответ 8

Как правило, я обнаружил, что есть некоторые проблемы, когда не используются таблицы для форм. Общие вещи, которые я не смог решить:

Фоновый цвет для полей/входов невозможен без фонового фона
Авторазмеры столбцов, но я думаю, что это нормально
Наведите курсор мыши на CSS, вы можете использовать JS, но таблицы могут сделать это с помощью чистого CSS

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

<div class='form-field'>
   <label>Name</label>
   <input />
</div>

У вас есть проблемы, если вы хотите, чтобы в поле метки было несколько полей, поэтому вам нужно ввести другой div для хранения входов (чтобы метка все еще плавала слева и т.д.):

<div class='form-field'>
   <label>Name</label>

   <div class='form-inputs'>
      <input />
      <input />
   </div>
</div>

С вышеуказанной надписью вы можете получить очень гибкие формы, я не буду публиковать CSS, поскольку он очень похож на 2 Column-Layout.

Мне все еще нужно сесть и попытаться выяснить, являются ли чистые CSS-формы жизнеспособными на все случаи жизни, но tbh это очень маловероятно!

Формы - самое худшее в стиле, использующем CSS. Единственные серьезные проблемы с Cross Browser, которые у меня были, - это стиль элементов FieldSet и Legend. Никаких реальных хаков, но они требуют некоторой работы, чтобы хорошо выглядеть.

Ответ 9

Одна проблема с таблицами - это ошибка пробела. Когда вы не используете таблицы, вы можете написать свой ярлык и ввести вот так:

<label for="foo">Blah <input id="foo" type="text"/></label>

который правильно инкапсулирует вход и метку.

В таблице, с другой стороны, вы разделяете их:

<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>

Это означает, что область между </label> и < input/" > не реагирует на щелчки мыши.

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

Теперь, чтобы ответить на ваш вопрос: я не думаю, что есть хороший способ сделать форматирование столбца в CSS (если ширина столбца не известна - вы можете получить этот подвиг с помощью JavaScript...) Итак, T.J. У Гроудера, безусловно, есть отличный ответ.

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

Update:

Как указано ниже, singe31 говорит, что <input/> не может быть определен в теге <label>. Это не верно. HTML 4.01 DTD легко читается, и мы видим, что:

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

Таким образом, <input/> может появиться в теге <label>. Это совершенно законно.

HTML 5 ясно показывает, что это законно в документации по w3c здесь:

http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element

Прокрутите вниз немного до "Пример кода", и вы увидите:

Пример кода

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

<label><input type=checkbox name=lost> Lost</label>

На других платформах поведение может состоять только в том, чтобы сфокусировать управление или ничего не делать.