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

Question

[Meta-note:] Я просматривал страницу с вопросами, очень устал от «DIVS vs Tables», «Когда использовать таблицы против DIVS», «Чем Div лучше, чем таблицы», «Таблицы против CSS» и всех вопросов, которые спросите ТОЛЬКО ОДНУЮ ЛЮДИ OMG но я хотел бы увидеть все способы, которыми люди занимаются переводом канонического примера "почему вы должны отказаться и использовать таблицы":

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

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

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

РЕДАКТИРОВАТЬ: scunlife приводит хороший пример того, почему я не продумал проблему так тщательно. Таблицы могут одновременно выравнивать несколько столбцов. Вопрос все еще стоит (я хотел бы видеть различные методы CSS, используемые для выравнивания / разметки) - хотя решения, которые могут справиться с ним? более сложный пример определенно предпочтителен.

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

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

Люди говорят о том, что таблицы заставляют свои формы отображать так, как они хотят, это правда, ТОЛЬКО если вы хотите отображать свои формы в столбцах и хотите потерять смысловой смысл. При наличии следующего 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.

Answer 5

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

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

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