Еще одна проблема Divs vs Tables: формы

Что я обычно делаю:

<form>
 <label for = "param_1">Param 1</label>
 <input id = "param_1" name = "param_1"><br />
 <label for = "param_2">Param 2</label>
 <input id = "param_2" name = "param_2"><br />
</form>

и в CSS:

label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }

Конечно, вам придется определять ширину в соответствии с вашими фактическими данными :-)

• Сначала дайте метку и введите display: block, чтобы ему можно было назначить размер и выровнять его.
• Они оба получают float: left, потому что Explorer работает немного по-другому.
• Отформатируйте этикетку красиво
• взломайте br так, чтобы где-то был clear: left, и я помню, что размещение его на этикетке не сработало в некоторых браузерах.

Кроме того, с br вы получите хорошее форматирование, даже если браузер не поддерживает CSS :-)

Я думал о чем-то вроде:

<div style = "text-align:right; float:left;">
    Name: <input /> <br />
    Social Security Number: <input /> <br />
</div>

который, если правый столбец имеет фиксированную длину, выравнивает ОК с переменной длиной текста, но мне интересно, каковы недостатки этого метода?

Уловка заключается в том, что когда форма становится более сложной, чем в вашем примере, вы понимаете, что таблицы обеспечивают «гибкую сетку», чего не делают никакие другие элементы.

например что, если «ввод» сложнее текстового поля? например куча переключателей, каждая со своим ярлыком:

Color: [____Red___][v]
 Hood: [*] 
 Size: (_) Small
       (_) Medium
       (_) Large
       (*) X-Large

Если все, что вам нужно, это простые формы, CSS - это здорово, но как только вам понадобится сетка, все станет интересно ...

Если вы действительно хотите это сделать, я бы посмотрел Решение Человека в синем, он работает очень хорошо и очень чистый.

Люди говорят о таблицах, которые заставляют свои формы отображаться так, как они хотят, это правда, ТОЛЬКО если вы хотите отображать свои формы в столбцах и готовы потерять семантическое значение. Имея следующий HTML-код, можно отображать эту форму в любом количестве макетов.

Кстати - нет <br />

<form>
 <fieldset>
  <legend>Personal Info</fieldset>
  <div>
   <label for = "name">Name</label>
   <input id = "name" name = "name" />
  </div>
  <div>
   <label for = "ssn">Social Security Number</label>
   <input id = "ssn" name = "ssn" />
  </div>
 </fieldset>
</form>

Вы можете очистить <divs> или установить их на overflow: hidden, чтобы убедиться, что поплавки очищены.

Варианты из приведенного выше html:

Name |==============|    SSN |==============|

Name |==============|
SSN |==============|

Name     |==============|
SSN      |==============|

    Name |==============|
     SSN |==============|

   Name: |==============|
    SSN: |==============|

Name:
|==============|
SSN:
|==============|

Все вышеперечисленное можно выполнить с помощью всего нескольких строк CSS.

Когда дело доходит до радио, флажков и кнопок отправки, все становится немного сложнее, но чистый семантический HTML МОЖЕТ отображаться так, как вы хотите, с помощью css.

Хотя другие предложения, вероятно, лучше подходят для получения гибкого макета, буквальный ответ на вопрос будет примерно таким:

<form action = "www.example.com">
    <div class = "table">
        <div class = "tbody">
          <div class = "tr">
            <div class = "td"> <label for = "name">Name</label> </div>
            <div class = "td"> <input id = "name"> </div>
          </div>
          <div class = "tr">
            <div class = "td"> <label for = "ssn">Social Security Number</label> </div>
            <div class = "td"> <input id = "ssn"> </div>
          </div>
        </div>
    </div>
</form>

с

    <style type = "text/css">
        div.table { display:table; border-spacing:2px; }
        div.tbody { display:table-row-group; }
        div.tr { display:table-row; }
        div.td { display:table-cell; vertical-align: middle; padding:1px; }
    </style>

Это работает с последними версиями Firefox, Chrome, Opera и Safari. Он также работает с IE8 Beta 2 (стандартный режим). Он не работает с IE7 или более ранними версиями, кроме «прогрессивного улучшения» и всего такого.