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

[Мета-заметка:] Я просматривал страницу вопросов, очень уставая от "DIVS vs Tables" "Когда использовать таблицы против DIVS" "Are Divs better than Tables" "Tables versus CSS" и все вопросы, которые спросите того же, что и OMG PEOPLE, но я хотел бы видеть, как люди решают перевод канонического примера "почему вы должны отказаться и использовать таблицы":

<table>
  <tr>
    <td> Name </td>
    <td> <input> </td>
  </tr>
  <tr>
    <td> Social Security Number </td>
    <td> <input> </td>
  </tr>
</table>

Вопрос: Как лучше (семантически, просто, надежно, плавно, переносимо) реализовать выше без таблиц. Для начала я полагаю, что наивная реализация использует фиксированную ширину столбца для первого столбца, но это может иметь iffy результаты для динамически созданного контента. Включение сильных/слабых сторон вашего подхода в ответ было бы приятным.

P.S. Еще один интересный вопрос о вертикальном центрировании, но хак для этого довольно хорошо покрывается jakpsatweb.cz

EDIT: scunlife воспитывает хороший пример того, почему я не придумывал эту проблему. Таблицы могут выравнивать несколько столбцов одновременно. Вопрос все еще стоит (я хотел бы увидеть различные методы CSS, используемые для выравнивания/макета) - хотя решения, которые могут его обработать? более конкретный пример определенно предпочтителен.

Ответ 1

Я обычно делаю:

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

Ответ 2

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

например. что, если "enter" более сложный, чем текстовое поле? например пучок переключателей, каждый со своей меткой:

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

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

Если вы действительно этого хотите, я бы посмотрел The Man In Blue Solution, он работает очень хорошо и очень чистый.

Ответ 3

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

BTW - Нет для <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.

Ответ 4

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

<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 или ранее, но "прогрессивно улучшает" и все такое.

Ответ 5

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

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

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