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

Ответ 1

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

Использует fieldset, legend, label. Очень семантический.

Ответ 2

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

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

Ответ 3

Вы можете попробовать и удалить форму как можно дальше, и по мере необходимости использовать элементы ввода <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.

Ответ 4

Я бы посмотрел, используя тег div, на данные макета на странице.

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

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

Ответ 5

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

Ответ 6

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}

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