Продолжайте в том же духе: «Лучшие практики для макета форм - таблица или поток?» - PullRequest
Новая
       6

Продолжайте в том же духе: «Лучшие практики для макета форм - таблица или поток?»

0 голосов
/ 03 августа 2011

Я задал вопрос о том, подходит ли формат таблицы для формы, скажем, для сбора данных профиля.Все респонденты сказали, что «таблицы плохие», но я не видел четкого ответа о том, как выложить их без форм, отвечающих некоторым базовым требованиям:

Метки и элементы управления выстроены в соответствии с ожиданиями Не нужно указывать жестко заданную ширину Не плавайте влево и вправо, потенциально оставляя огромный пробел в середине

Например, рассмотрите эту простую HTML-раскладку http://jsfiddle.net/roger_davis/7h3bC/4/ Как бы вы порекомендовали изменить html так, чтобы метки были выровнены, как и ожидалось (и были слева.)Например, для редактирования профиля прямо здесь, в stackoverflow, ваша форма ввода профиля выложена в таблицу.Страница входа в Google - это таблица, Yahoo для регистрации не использует таблицу, но использует жестко заданную ширину.

Я что-то упустил?

Ответы [ 2 ]

0 голосов
/ 03 августа 2011

Я не уверен, насколько хороша поддержка браузера на этом, протестировано в FF4: http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>


div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

Да, я знаю, я только что создал таблицу, используя div. Дело в том, что это хорошо доступно и семантически правильно.

Редактировать: с треском проваливается в IE7, где фиксированная ширина будет единственным способом, но 8 и 9 кажутся нормальными.

Edit2: поменял метку / поля и установил выравнивание по правому краю: http://jsfiddle.net/shanethehat/7h3bC/12/. В этот момент разметка становится немного тяжелее. :first-child будет альтернативой использованию класса left, но за счет IE8.

0 голосов
/ 03 августа 2011

Вот мое обновление вашей скрипки: http://jsfiddle.net/7h3bC/9/ в основном определяет HTML: 

<ul class='controls'>
    <li> <input type="checkbox" name="mycheckbox" id='mycheckbox'></li>
    <li><input type="text" name="myInput" id='myInput'></li>
</ul>
<ul class='labels'>
    <li> <label for="mycheckbox" >Tick me if you dare</label></li>
    <li><label for="mycheckbox">  Tick me if you dare</label></li>
</ul>

и css 

<style>
.controls,
.labels
{
    float:left;
}
.controls 
{
     padding-right:5px;
     text-align:right;
}

</style>
...