Формы: Ваша CSS соответствует разметке или наоборот?
Что касается HTML-форм, очень распространенный шаблон разметки:
<form ...>
<p>
<label>Name:</label>
<input .../>
</p>
<p>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
Какую разметку (классы и т. Д.) Вы обычно предоставляете, чтобы обеспечить наиболее гибкое визуальное форматирование формы? То есть сколько разметки вы добавляете, чтобы помочь с вашими селекторами CSS и используете ли вы общие селекторы?
<form ...>
<p class='name'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
против
<form class='person' ...>
<p class='name string'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate date'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
Во втором случае добавление универсальных типов ("дата") прямо из базы данных может упростить последовательное форматирование полей даты. Обертывание группы ("персона"), чтобы показать модель, из которой происходят поля, также может помочь. (Или я мог бы использовать внутренний DIV.) Тем не менее, чтобы увеличить повторное использование CSS, я добавляю дополнительную разметку. В некоторых книгах, которые я читал, я слышал, что чем меньше разметки, тем лучше (и эта строка может быть очень серой, хотя она звучит правдоподобно для меня). Например, я вполне мог бы использовать разметку из одного из предыдущих блоков и добавить намного больше селекторов в CSS.
Каковы ваши принципы для определения того, сколько разметки имеет смысл? Или сколько стоит поставить на сторону css?
Кроме того, я знаю, что могу выбирать по имени ввода, но, поскольку это вложенный элемент, я теряю способность контролировать форматирование из внешней оболочки ("p"), где обычно требуется дополнительный контроль.
5 ответов
Я склонен использовать теги списка определений для оформления моих форм.
<form>
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input name="name" /></dd>
<dt><label for="birthdate">Birthdate:</label></dt>
<dd><input name="birthdate" /></dd>
...
</dl>
</form>
Я также использую следующий CSS:
FORM DT {
clear:both;
width:33%;
float:left;
text-align:right;
}
FORM DD {
float:left;
width:66%;
margin:0 0 0.5em 0.25em;
}
Более подробная информация здесь: http://www.clagnut.com/blog/241/
Это много разметки, но эффект является последовательным и эффективным.
Еще один приемлемый метод оформления форм - это использование таблиц. Просто думайте о форме как о "интерактивных табличных данных".
Я бы не использовал <p> тег для группировки метки и ее поля, так как это не абзац. Если у вас нет другого использования для <fieldset> Вы можете использовать один на "строку". Если у вас есть три входа для дня рождения, тогда fieldset полностью подходит.
Список определений, предложенный Гэвином, не является плохой идеей, но он кажется ненужной разметкой - вы можете просто разметить метки и входные данные до нужной ширины и разместить их с плавающей точкой.
Добавление классов-обёрток также совершенно допустимо - помните, что вам не нужно использовать их в CSS, они независимо добавляют семантический слой. В некоторых случаях вы можете использовать микроформат.
Вы также можете использовать селекторы атрибутов, чтобы красиво оформить ввод:
input[type="text"], input[type="password"] {
border: 1px solid #ccc;
background: #fff;
}
input[type="submit"], input[type="reset"] {
border: 1px solid #666;
background: #ccc;
}
Я стараюсь свести HTML-разметку к минимуму.
HTML-формы сложнее всего сводить к минимуму html и css, так как очень сложно настроить таргетинг на все различные входные данные во всех браузерах, не добавляя к ним классы, такие как Textbox в textbox и т. Д.
Если все ваши формы для этого сайта используют простые текстовые поля и ничего больше, подход с минимальной разметкой работает просто отлично. Однако элементы управления со сложной разметкой, такие как элементы управления telerik RAD, не играют с простой разметкой, и часто требуется дополнительная разметка и классы.
Эти маленькие трюки добавляют наценку, но также делают CSS чище и, несомненно, значительно упрощают стилизацию таких элементов.
Для других общих HTML / CSS я использую как можно меньше классов, таких как
.Menu {}
.Menu li {}
.Menu li a {}
Этот тип шаблона может многократно использоваться для повторяющихся данных, а шаблоны могут создаваться и разрабатываться с минимальной разметкой HTML.
Иногда его невозможно избежать, добавляя классы и еще много чего, но я думаю, что если вы вообще думаете о css и html, вы должны в итоге получить отличную разметку.
С сайта на сайт я редко использую CSS. Его быстрые и легкие настройки для любого желаемого, перепроектирование существующего скина для нового сайта часто не стоит ИМО.
В основном с помощью CSS я стремлюсь использовать знания, полученные на предыдущих сайтах, и применять их к новым сайтам, чтобы упростить кодирование для всех браузеров:)
Через много лет я достиг: