Макет формы с использованием CSS

Ответ 1

Посмотрите на форму слева на этом URL-адресе http://www.blueprintcss.org/tests/parts/forms.html

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

Приветствия

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

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

label, input {
   display: inline-block;
}

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

Другая проблема заключается в том, что встроенный блок не работает в определенных браузерах. Inline-block не является надежным в более старых версиях 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>

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

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;
}

Метка помещается относительно элемента списка, а вход переводится в сторону с левым полем. Однако есть проблема с этим методом. Этот метод будет работать только с жесткой кодировкой. Что еще более важно, многострочная метка не будет корректно очищаться. Таким образом, в этой ситуации мы можем использовать аналогичный подход, но использовать float и overflow. Таким образом, мы могли бы использовать этот альтернативный 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;
}

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

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

label, input {
  display: block;
}

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

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

Ответ 4

Вы можете справиться с этим, поместив метки и поместив их в элемент с плавающим блоком и аналогично для полей ввода. Это создаст макет из двух столбцов, который автоматически изменяет размер на основе содержимого. Здесь 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;
}

EDIT: если вы хотите создать семантическое соединение между метками и входами, вы можете официально пометить каждую метку как метку html, а затем использовать атрибуты for и id для их связывания. Например, здесь определение метки:

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

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

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

Ответ 5

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

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

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