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

Question

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

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

int ReturnMaxValue(
    int* inputList,   /* the list of integer values from which to get the maximum */
    long size,        /* count of the number of integer values in inputList */
    char* extraArgs   /* additional arguments that a caller can provide.    */
)

6

html css forms markup

задан Sam Hosseini 17 October 2015 в 23:46

5 ответов

Другие вопросы по тегам:

html css forms markup

Похожие вопросы:

score 4 · Answer 1

I обычно используют теги списка определений для стилизации моих форм.

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

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

Другой, возможно, приемлемый метод стилизации форм - использование таблиц. Просто подумайте о форме как о "

score 0 · Answer 2

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

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

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

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

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

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

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

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

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

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

score -1 · Answer 3

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

<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 написал. (Я ненавижу лишнюю разметку)

score 1 · Answer 4

Я бы не стал использовать

тег для группировки метки и ее поля, поскольку это не абзац. Если у вас нет другого использования для

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

Список определений, предложенный Гэвином, неплохая идея, но это действительно кажется ненужной разметкой - вы можете просто стилизовать метки и поля ввода с правильной шириной и плавать их.

Добавление классов-оболочек также вполне допустимо - помните, что вам не обязательно использовать их в 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;
}

score 0 · Answer 5

Спустя много лет я пришел к:

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