Лучший способ верстки в формах HTML? - PullRequest
Новая
       19

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

32 голосов
/ 26 мая 2010

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

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

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

EDIT:

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

Ответы [ 9 ]

37 голосов
/ 26 мая 2010

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

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

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

19 голосов
/ 26 мая 2010

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

14 голосов
/ 26 мая 2010

Я хотел бы использовать списки определений (<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>

Вот пример

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

5 голосов
/ 26 мая 2010

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

<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;
}
4 голосов
/ 26 мая 2010

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

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

3 голосов
/ 10 июня 2011

Отображение таблицы CSS

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

enter image description here

<!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>
2 голосов
/ 26 мая 2010

Используйте 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 таблиц без таблиц.

0 голосов
/ 24 ноября 2012

Одна проблема с таблицами - ошибка space . Если вы не используете таблицы, вы можете написать свою метку и ввести следующее: 

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

, который должным образом инкапсулирует ввод и метку.

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

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

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

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

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

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

Обновление:

Согласно комментарию ниже, 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>

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

0 голосов
/ 26 мая 2010

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

  • Цвет фона для полей / входов невозможен без искусственного фона
  • Авторазмер столбцов, но я думаю, что все в порядке
  • Наведение на поле с помощью 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 столбца.

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

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

...