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

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

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

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

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

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

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

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

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

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

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}

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