Как мне отформатировать HTML-форму без использования таблиц

Question

Я знаю, что плохо использовать таблицы HTML для всего ... и что таблицы следует использовать только для представления табличных данных, а не для достижения какой-либо цели стиля.

У меня вопрос: как сделать HTML-формы с помощью CSS, чтобы они выглядели хорошо и выровнялись, как при использовании таблиц?

Answer 1

Ник Ригби написал отличную статью для A List Apart под названием Более привлекательные доступные формы

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

Answer 2

Вы можете попробовать отбросить форму как можно дальше назад и обойтись при помощи <label> и различных элементов ввода формы по мере необходимости с помощью атрибута clear:left; в CSS.

Это позволит убедиться, что каждая строка начинается заново без необходимости оборачивать каждую строку формы дополнительными <div> или <p> или даже составлять из нее список.

.formlabel{
    clear:left;
    display:block;
    float:left;
    margin:0 0 1em 0;
    padding:0 0.5em 0 0;
    text-align:right;
    width:8em;
}

.forminput{
    float:left;
    margin:0 0.5em 0.5em 0;
}

.formwarning{
    clear:left;
    float:left;
    margin:0 0.5em 1em 0;
}

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

<fieldset><legend>Details</legend>
    <label for="name" class="formlabel">Name</label>
      <input id="name" name="name" type="text" class="forminput" />
      <div class="formwarning">Validation error message</div>

    <label for="dob_year" class="formlabel">DOB</label>
      <div class="forminput">
        <input id="dob_year" name="dob_year" type="text" size="4" /> /
        <input id="dob_month" name="dob_month" type="text" size="2" /> /
        <input id="dob_day" name="dob_day" type="text" size="2" />
      </div>

    <label class="formlabel">Sex</label>
      <label for="female" class="forminput">Female</label>
        <input id="female" name="sex" type="radio" class="forminput" />
      <label for="male" class="forminput">Male</label>
        <input id="male" name="sex" type="radio" class="forminput" />

    <label for="state" class="formlabel">State</label>
      <select id="state" name="state" class="forminput">
        <option>ACT</option>
        <option>New South Wales</option>
        <option>Northern Territory</option>
        <option>Queensland</option>
        <option>South Australia</option>
        <option>Tasmania</option>
        <option>Victoria</option>
        <option>Western Australia</option>
      </select>

    <label for="deadseal" class="formlabel">Death certificate</label>
      <input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>

В вышеприведенном примере в DOB есть дополнительная <div> загромождение. Вы могли бы избавиться от него, если бы добавили в качестве элемента псевдоэлемента :after, где это необходимо, стиль слешей даты.

Получается нормально в Opera 11.60, Firefox 11, Google Chrome 18 и Internet Explorer 8.

Answer 3

Посмотрите на код, используемый в формах wufoo, они используют ul для форматирования форм и выглядят действительно хорошо.

http://wufoo.com/gallery/templates/

Answer 4

HTML

<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>

CSS

form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}

Я думаю, этого достаточно.

Answer 5

Подумайте о размещении имен полей над полем, а не рядом с ним. Я считаю, что это работает о лучших.

Answer 6

Я бы искал тег div для размещения данных на странице.

Таблицы по-прежнему очень полезны для табличных данных, но они не одобряются для размещения страницы.

Просмотреть исходный код здесь на stackoverflow.com, возможно, есть несколько хороших примеров.