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

Я бы хотел использовать списки определений (

) они имеют тенденцию быть семантически правильными. Метка определяется вводом пользователя. По-моему, это имеет смысл.

выражает семантическое содержание более точно, чем таблица.

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

Вот пример

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

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

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

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

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

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

Используйте фреймворк 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.

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

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