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

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

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

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

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

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 или использовать форму вокруг него, чтобы получить цвет фона для всей формы и т. д.

Я предпочитаю набор полей, содержащий div. Метки div имеют вид float: left; width: 20em, а блоки содержимого просто имеют фиксированное левое поле, например, 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>

Я считаю, что формы - это одна из самых сложных задач в 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>

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