Макет формы с помощью CSS

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

<form>
    <div id='labels'>
        <div>Name: </div>
        <div>Street:</div>
        <div>This is a longer than usual label:</div>
        <div>City:</div>
    </div>

    <div id='inputs'>
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div><input type="text"></div>
        <div><input type="text"></div>
    </div>

</form>

и вот правила CSS:

#labels {
    float: left;
}

#labels div {
    clear: left;
    float: left;
}

#inputs {
    float: left;
}

#inputs div {
    clear: left;
    float: left;
}

#labels div, #inputs div {
    height: 30px;
}

Редактирование: если вы хотите создать семантическую связь между этикетками и входами, вы можете формально пометить каждую метку в качестве метки HTML, а затем использовать для и идентификатор атрибуты, чтобы связать их. Например, вот определение этикетки:

<div><label for='name'>Name: </div>

и вот соответствующее поле ввода:

<div><input id='name' type="text"></div>

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

Для размеров шрифта

• em и% оба относятся к размеру шрифта родительского элемента (т.е. 2em и 200% всегда дают одинаковый результат)
• ems имеют историю в типографии (хотя CSS em не совпадает с типографской em)
• Реализации CSS в браузере имеют меньше ошибок с%, чем с em

Для всего остального (например, ширина элемента):

• em относительно размера шрифта
• % относительно родительского элемента

... поэтому они делают совершенно разные вещи и должны рассматриваться в каждом конкретном случае.

Личное мнение: используйте таблицу.

Каждый раз, когда вы пишете что-то вроде

label {
    width: 150px; /* or whatever width */
}

, вы смешиваете содержание и представление , потому что значение метки может быть вычислено только в том случае, если вы знаете, что она будет содержать, что идет вразрез с принципами семантических-CSS пуристов.

взглянуть на форму на левой справочной стороне на этом URL http://www.blueprintcss.org/tests/parts/forms.html

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

ура

Нет ничего плохого в том, что правила для этой конкретной страницы встроены в заголовок страницы, вместо того, чтобы иметь разные файлы для всего.

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

Хотите ли вы поместить все стили форм в большой файл или просто включить в заголовок страницы те, которые имеют отношение к делу, зависит от того, сколько форм ваши пользователи получат доступ к ним при среднем посещении. Несколько форм за посещение; поместите их в заголовок. Много форм за среднее посещение; поместите их все в отдельный файл, чтобы пользователь мог их кэшировать.

Тема размещения метки над входом или рядом с ним - это отдельная дискуссия (я рекомендую прочитать книгу Люка Вроблевского по этой теме): http://www.lukew.com/resources/articles/web_forms.html)

Стиль веб-форм довольно тривиален. Прежде всего, вы хотите, чтобы ваши формы были отмечены семантически подходящим образом. Это одно из главных преимуществ, которое вы можете получить, используя CSS для разметки вместо таблиц. Подробнее об этом смотрите в отличном списке, кроме статьи на эту тему: http://www.alistapart.com/articles/prettyaccessibleforms/

Теперь в вышеупомянутой статье автор использует свойство отображения, называемое inline-block. Это довольно простой способ достижения аффекта. Просто применить:

label {
   display: inline-block;
   width: 120px; /* Specify the width that works for your design */
}

И ваши метки будут иметь фиксированную длину, а входные данные будут находиться рядом с ними. Однако, если Вы не укажете ширину и просто используете:

label, input {
   display: inline-block;
}

Тогда Ваши метки и входные данные будут выстраиваться в строку "автоматически", как Вы выразились. Проблема здесь не в технической стороне, а в дизайне. Если вы вводите не вертикально, то пользователю будет сложнее заполнить форму. Это еще одно соображение, которое Вы должны иметь в виду, так как легче позиционировать метку и вводить ее таким образом, чем учитывать фиксированную ширину.

Другая проблема заключается в том, что встроенный блок не работает хорошо в некоторых браузерах. Inline-блок не является надежным в старых версиях Firefox или IE. Поэтому я склонен использовать альтернативный метод. Допустим, вы отмечаете свои формы семантически подходящим способом, используя список. В этом случае можно использовать что-то вроде:

<form>
  <fieldset>
    <legend>Health information:</legend>
    <ul>
      <li><label>Height</label> <input type="text" size="3" /></li>
      <li><label>Weight</label> <input type="text" size="3" /></li>
    </ul>
  </fieldset>
</form>

В этом случае мы можем использовать фиксированную ширину и абсолютное позиционирование, чтобы выстраивать наши элементы в линию adjacently:

form li {
  display: block;
  padding: 2px;
  position: relative;
}

/* The top and left position of 2px simulate 
   padding since we are using absolute positioning. */
form label {
  display: block;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 120px;
}

form input {
  display: block;
  margin-left: 125px;
}

Метка позиционируется относительно элемента списка, а входная информация сдвигается в сторону с левым отступом. Однако с этим методом возникает проблема. Этот метод будет работать только с жестко заданной шириной. Более того, многострочная этикетка не будет очищаться должным образом. Поэтому в данной ситуации мы можем применить аналогичный подход, но использовать поплавки и переполнение. Таким образом, мы могли бы использовать этот альтернативный CSS на той же html разметке, которую я показывал ранее:

form li {
  display: block;
  overflow: hidden; /* This clears the floating element. */
  padding: 2px;
}

form label {
  display: block;
  float: left;
  padding-right: 5px;
}

form input {
  display: block;
}

Теперь с этим методом метка плавает слева от входа. Если вы не укажете ширину метки, то она будет такой же ширины от содержимого, которое в ней находится (до точки ширины ее родительского узла в HTML-документе). Устанавливая переполнение скрытым на родительском объекте, нет необходимости очищать элемент. Эта техника будет работать с жестко заданной шириной или унаследованной по умолчанию - width: auto.

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

label, input {
  display: block;
}

Еще одно примечание - при разметке HTML как такового вы можете поинтересоваться обо всех этих элементах списка, создающих пультовые точки и т.д. Вы должны включить CSS-перезагрузку в ваш документ, чтобы обеспечить согласованность между браузерами. Я рекомендую Eric Meyer's:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/