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

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

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

В представлении "Детали" я имею в виду нечто похожее на следующее изображение. alt text http://img261.imageshack.us/img261/5203/crudrl8.png

Таблица

Fieldset

Divs

Список

6 ответов

Собственно, я беру это обратно только для простых текстовых ящиков. Я нахожу, что опция Fieldset работает хорошо.

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


Я нахожу, что формы - одна из самых сложных вещей в 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>
 
 </div>
 <div id="item1div">
 <label for="item1">item1 label</label>
 
 </div>
 </fieldset>
</form>


CSS

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

HTML:

<label for="username">UserName:</label>
<label for="username">UserName:</label>

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


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

<fieldset>
 <div><label for="name">Name</label></div>
 <div>
 <div style="clear:both">
// repeat for next fields
</div></div></fieldset>


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


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

<fieldset>
 <label for="name">XXX </label>
 <label for="email">XXX </label>
</fieldset>

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

<fieldset>
 <div><label for="name">XXX</label></div>
 <div><label for="email">XXX</label></div>
</fieldset>

licensed under cc by-sa 3.0 with attribution.