Формы: Ваш CSS соответствует разметке или наоборот?

Question

Что касается 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»), где обычно требуется дополнительный контроль.

Answer 1

Я склонен использовать теги списка определений для оформления своих форм.

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

Это много разметки, но эффект последовательный и эффективный.

Другим приемлемым методом оформления форм является использование таблиц. Просто думайте о форме как о «интерактивных табличных данных».

Answer 2

Я бы не использовал тег <p> для группировки метки и ее поля, поскольку это не абзац. Если у вас нет другого использования для <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;
}

Answer 3

Через много лет я достиг:

<fieldset>
  <div>
    <label for="Whatever">A text field</label>
    <input type="text" id="Whatever" />
  </div>
  <div class="required">
    <label for="RequiredField">A required field</label>
    <input type="text" id="RequiredField" />
  </div>
  <div class="stretch">
    <label for="LongField">A long field (stretched across 100% form width)</label>
    <input type="text" id="LongField" />
  </div>
  <div class="cmd">
    <button type="submit">Do whatever</button>
  </div>
<fieldset>

Кроме того, у меня есть два класса CSS, которые я могу применить:

fieldset div {
  clear: both;
}

fieldset.block label {
  display: block;
  font-weight: bold; /* labels above fields */
}

fieldset.aligned label:first-child {
  width: 20%;
  float: left;
}

fieldset.block .stretch input,
fieldset.block .stretch textarea,
fieldset.block .stretch select {
  width: 100%;
}

fieldset.aligned .stretch input,
fieldset.aligned .stretch textarea,
fieldset.aligned .stretch select {
  width: 79%; /* leave space for the label */
}

Answer 4

Лично я просто делаю:

<form>
    <label for="foo">Foo</label>
    <input type="text" id="foo" name="foo" />
    <br />
    <label for="foo2" class="block">Foo 2</label>
    <textarea id="foo2" name="foo2"></textarea>
    <br />

Тогда для css это зависит, хочу ли я, чтобы элемент был встроен в него или нет

form label.block{
    display: block;
}

Или вы можете блокировать + перемещать их, как писал @DisgruntledGoat. (Я действительно ненавижу дополнительную разметку)

Answer 5

Я стараюсь свести HTML-разметку к минимуму.

HTML-формы труднее всего сводить к минимуму html и css, так как очень сложно настроить таргетинг на все различные входные данные во всех браузерах, не добавляя к ним классы, такие как Textbox в textbox и т. Д.

Если все ваши формы для этого сайта используют простые текстовые поля и ничего больше, подход с минимальной разметкой работает просто отлично. Однако элементы управления со сложной разметкой, такие как элементы управления telerik RAD, не воспроизводятся с простой разметкой, и часто требуется дополнительная разметка и классы.

Эти маленькие уловки добавляют наценку, но также делают CSS чище и, несомненно, значительно упрощают стилизацию таких элементов.

Для других общих html / css я склонен использовать как можно меньше классов, например

.Menu {}
.Menu li {}
.Menu li a {}

Этот тип шаблона может многократно использоваться для повторяющихся данных, а шаблоны могут создаваться и разрабатываться с очень небольшой разметкой HTML.

Иногда добавление классов и тому подобное невозможно избежать, но я думаю, что если вы в общем думаете о css и html, вам следует в конечном итоге получить гладкую разметку.

С сайта на сайт я редко использую CSS. Его быстрые и легкие настройки для любого желаемого, перепроектирование существующего скина для нового сайта часто не стоит ИМО.

В основном с помощью CSS я стремлюсь использовать знания, полученные на предыдущих сайтах, и применять их к новым сайтам, чтобы упростить кодирование для всех браузеров:)