Просмотр сведений и соответствие CSS - PullRequest
Новая
       13

Просмотр сведений и соответствие CSS

4 голосов
/ 23 декабря 2008

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

Что бы вы предпочли видеть в html для просмотра подробностей? Какой из них имеет меньше всего кросс-браузер? Какой из них наиболее соответствует? Какой из них выглядит лучше, если у меня есть столбец метки статической ширины, выровненный по правому краю?

Под подробным представлением я имею в виду нечто похожее на следующее изображение. alt text

Таблица * * 1 010 

<table>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
<tr>
<td><label /></td>
<td><input type="textbox" /></td>
</tr>
</table>

Fieldset 

<fieldset>
<label /><input type="textbox" /><br />
<label /><input type="textbox" /><br />
</fieldset>

Divs 

<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>


<div class="clearFix">
<div class="label"><label /></div>
<div class="control"><input type="textbox" /></div>
</div>

Список 

<ul>
<li><label /><input type="textbox" /></li>
<li><label /><input type="textbox" /></li>
</ul>

Ответы [ 6 ]

3 голосов
/ 23 декабря 2008

Эти подходы не являются взаимоисключающими, лично я бы немного их перепутал: 

<fieldset>
  <label for="name">XXX <input type="text" id="name"/></label>
  <label for="email">XXX <input type="text" id="email"/></label>
</fieldset>

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

<fieldset>
  <div class="label_input"><label for="name">XXX</label><input type="text" id="name"/></div>
  <div class="label_input"><label for="email">XXX</label><input type="text" id="email"/></div>
</fieldset>
0 голосов
/ 24 декабря 2008

Вы МОЖЕТЕ использовать таблицы для форматирования форм в табличном виде , но использовать CSS для добавления стилей к формам. Пуристы CSS, вероятно, скажут, что не следует, но реальность такова, что многие браузеры часто отображают формы CSS по-разному и могут вызвать проблемы с доступностью. Форма, основанная на таблицах, намного более согласованна в разных браузерах и гораздо более доступна.

0 голосов
/ 24 декабря 2008

Я считаю, что формы - это одна из самых сложных вещей в css, потому что, если вам нужен жесткий контроль, часто есть много CSS, чтобы добавить, что HTML старой школы позаботится о вас. Однако, если вы готовы принять единый естественный режим, то самый чистый способ отделить содержание и презентацию: 

form { margin: 0; padding: 0; }
fieldset { whatever treatment you want }
#details div { margin: 5px 0; width: 100%; overflow: hidden; /* ensures that your floats are cleared */ }
#details label { float: left; width: 190px; text-align: right; }
#details input { margin-left: 200px; }

<form>
  <fieldset id="details">
    <div id="item1div">
      <label for="item1">item1 label</label>
      <input type="" id="item1" />
    </div>
    <div id="item1div">
      <label for="item1">item1 label</label>
      <input type="" id="item1" />
    </div>
  </fieldset>
</form>
0 голосов
/ 24 декабря 2008

Я предпочитаю fieldset, содержащий divs. DIV-метки: float: left; width: 20em, и у divов содержимого, например, просто фиксированное левое поле 21em или 22em. Но вы должны помнить, чтобы включить четкий div для этого: 

<fieldset>
   <div class="labels"><label for="name">Name</label></div>
   <div class="data"><input ....</div>
   <div style="clear:both"/>
// repeat for next fields
</fieldset>
0 голосов
/ 24 декабря 2008

CSS: 

label{
  float:left;
  text-align:right;
  width:115px;
  margin-right:5px;
}
input{
  margin-bottom:5px;
}

HTML: 

<label for="username">UserName:</label><input type="text" id="username" /><br />
<label for="username">UserName:</label><input type="text" id="username" /><br />

Очевидно, что затем вы можете добавить div или использовать форму вокруг него, чтобы получить цвет фона для всей вашей формы и т. Д.

0 голосов
/ 23 декабря 2008

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

Однако, как правило, у меня будет несколько элементов управления в одной «строке», поэтому я использую макет, основанный на div, таким образом я могу поместить входные данные, валидаторы и все в один элемент.

...