Проектирование, компоновка и представление форм с помощью CSS

Очевидные недостатки

Так как предполагается, что демонстрационная форма является основным контентом, надпись (legend), использованная в предыдущей статье о формах, была заменена заголовком.

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

Стоит также отметить, что "требуемые" теги на полях лучше всего помещать перед полем в порядке исходного кода, чтобы обеспечить пользователей программного обеспечения считывателей экрана. Однако требуется свойство position (которое находится за рамками этой статьи) для соответствующего размещения этих объектов. В связи с этим "требуемые" теги были помещены после их соответствующих элементов управления в порядке исходного кода (хотя и в том же контексте).

Новые поля форм? Что это?

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

Выбор описаний: input type="checkbox"

…
<label for="availability">My account is unavailable:</label><input type="checkbox"
  name="is_down" id="availability" class="rInput" />

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

Выбор из взаимно-исключающих состояний: input type="radio"

…
<label for="acctNone">Account type:</label>
<fieldset>
  <label for="acctGold">Gold</label><input type="radio" name="acct_type" id="goldAcct"
    class="rInput" />
  <label for="acctSilver">Silver</label><input type="radio" name="acct_type"
    id="acctSilver" class="rInput" />
  <label for="acctBronze">Bronze</label><input type="radio" name="acct_type"
    id="acctBronze" class="rInput" />
  <label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone"
    class="rInput" checked="checked" />
</fieldset>

Такая группа позволяет представить рядом несколько вариантов, из которых можно выбрать только один вариант. Одним хорошим примером применения множества радио-кнопок является задание оценки из шкалы 1-5 или 1-10.

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

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

Как флажки (checkbox), так и радио-кнопки (radio) позволяют использовать атрибут checked, который, если задан, активирует элемент управления по умолчанию, когда он выводится первый раз.

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

Когда слишком много вариантов выбора: select/option

…
<label for="natureOfInquiry">General
subject:</label>
  <select name="subject" class="medium" id="natureOfInquiry">
    <option value="support">Support</option>
        <option value="billing">Accounts  billing</option>
        <option value="press">Press</option>
        <option value="other_q">Other questions</option>
  </select>

Элементы select и option предлагают результаты, аналогичные тем, которые предоставляет последовательность радио-кнопок, занимая при этом значительно меньше места. Выбор элемента select вместо последовательности радио-кнопок часто является вопросом того, как используется пространство интерфейса пользователя; длинный список географических областей или отделов на сайте е-коммерции обычно лучше подходит для элементов select, в то время как более короткие последовательности выбора (например, да/нет, true/false, диапазон возраста, диапазон дохода) должны представляться в виде радио-кнопок.

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

Объединение последовательности элементов управления: fieldset

Основное назначение элемента fieldset состоит в задании единого контекста последовательности тесно связанных элементов управления (элементы управления text для номера телефона, элементы select для даты, и т.д.).

Начинаем с самого начала, заканчиваем готовой формой

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

Читателям настоятельно рекомендуется самостоятельно использовать демонстрационный материал для экспериментов с правилами таблиц стилей.

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

Демонстрация 1

Начиная с правила, которое содержит html { margin: 0; padding: 0; }, первый шаг состоит в оформлении body, содержащего страницу.

Так выглядит страница без дополнительного оформления.

И код соответствующей страницы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>CSS Technique Demonstration: Forms</title>

<link rel="stylesheet" type="text/css" href="bmh.form.styles.00.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" 
href="form_prog_styles_ie.css" /><![endif]-->

</head>
<body>

<h3>Contact Us</h3>

<form id="contactForm" method="post" action="/cgi-bin/generic_email_script.php">
  <ul>
	<li id="nameField" class="required"><label for="realname">Name:</label>
      <input type="text" name="name" value="" class="medium" id="realname" />
      <span class="note">required</span></li>
	<li id="addressField" class="required"><label for="address">Email:</label>
     <input type="text" name="email" value="" class="medium" id="address" />
     <span class="note">required</span></li>
	<li id="acctTypeField" class="required"><label for="acctNone">Account type:</label>
		<fieldset>
			<label for="acctGold">Gold</label><input type="radio" name="acct_type" id="acctGold" class="rInput" />
    <label for="acctSilver">Silver</label><input type="radio" 
      name="acct_type" id="acctSilver" class="rInput" />
    <label for="acctBronze">Bronze</label><input type="radio" name="acct_type" id="acctBronze" class="rInput" />
    <label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone" 
        class="rInput" checked="checked" />
		</fieldset>
		<span class="note">required</span>
	</li>
	<li id="subjectField"><label for="natureOfInquiry">General subject:</label>
   <select name="subject" class="medium" id="natureOfInquiry">
		<option value="support">Support</option>
		<option value="billing">Accounts  billing</option>
		<option value="press">Press</option>
		<option value="other_q">Other questions</option></select>
	</li>
	<li id="availabilityField"><label for="availability">My account is unavailable:</label>
      <input type="checkbox" name="is_down" id="availability" class="rInput" /></li>
	<li id="messageField"><label for="messageBody">Comments:</label>
     <textarea name="comments" cols="32" rows="8" class="long" id="messageBody"></textarea></li>
	<li class="submitField"><input type="submit" value="Send" class="submitButton" /></li>
  </ul>
</form>

</body>
</html>

Форма с применением оформления body.

Добавлены новые стили оформления:

body { 
  margin: 0;
  padding: 1.714em;
  background-image: url(images/bg_grid.gif);
  font-size: 14px;
  font-family: Helvetica,Arial,sans-serif;
  line-height: 1.714em;
}

Демонстрация 1: сопутствующие рассмотрения

Демонстрация 2

Теперь, когда контейнеры страницы определены, следующая пара шагов изменяет или удаляет стили агента пользователя.

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

Новые стили оформления:

h3 {
  margin: 0 0 1.2em 0;
  border-bottom: .05em solid rgb(0,96,192);
  font-size: 1.429em;
  line-height: 1.15em;
}

form {
  width: 35.929em;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Демонстрация 2: сопутствующие рассмотрения

Демонстрация 3

… Теперь для задания контейнеров для элементов формы.

Оформление элементов списка (контейнеры пар метка/значение) и fieldset

Новые стили оформления:

li {
  clear: both;
  height: 1.714em;
  margin: 0;
}

fieldset {
  height: 1.429em;
  margin: 0 0 -.143em 0;
  border: 0;
}

Демонстрация 3: сопутствующие рассмотрения

Создание сетки

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

Как отмечалось выше, атомарная единица измерения демонстрационной формы имеет форму квадрата в 24 пикселя, но для получения однородной компоновки требуется нечто больше, чем размещение элементов дизайна с небольшими, предсказуемыми интервалами.

Истинно эффективная сетка имеет следующие характеристики:

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

Создание структуры сетки в композиции

Большинство профессионалов для создания композиций компоновки сайта используют инструмент Adobe Photoshop, и одним из его достоинств является легкость доступа к линиям сетки, которые он предоставляет. Для вывода атомарной сетки в Photoshop можно выбрать View $$\to$$ Show $$\to$$ Grid, что приведет к выводу линий сетки с интервалами, заданными в Guides Grid Preferences. Наложение направляющих для таких объектов, как столбцы, реализуется затем выбором View $$\to$$ Rulers, переключением в инструмент Move, и перетаскиванием указателя с линейки требуемым образом.

Реализация сетки в таблице стилей

Как отмечается в статье 29 об оформлении текста - что подкрепляется несколькими правилами, включенными в демонстрационную таблицу стилей - лучшим способом реализации атомарной сетки в компоновке является использование единиц измерения em. Однако только этого будет недостаточно; оформитель должен также сохранять правильными свои преобразования простых дробей в десятичные при работе с альтернативными размерами шрифтов, пробелами и рамками.

Другая техника реализации сеток показана в демонстрационной таблице стилей: создание маркеров class, которые могут ссылаться на различные размеры элементов и столбцов в документе. При систематическом применении эти маркеры выполняют большую часть работы по реализации сетки.

Демонстрация 4

Сохранение объектов выровненными по сетке означает присвоение свойств компоновки меткам и элементам управления формы.

Выравниваем два основных столбца

Новые стили оформления:

label {
  display: block;
  float: left;
  clear: left;
  width: 10.286em;
  overflow: auto;
  padding-right: 1.714em;
  text-align: right;
}

input {
  height: 1.143em;
  border: .071em solid rgb(96,96,96);
  padding: .071em;
  line-height: 1;
}

Демонстрация 4: сопутствующие рассмотрения

Правило третей

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

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

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

Важный момент для оформителя состоит в том, что если Правило третей и сетку принять в расчет до начала работы над таблицей стилей, то задача нормализации таблицы стилей может существенно упрощаться.

Демонстрация 5

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

Слегка изменяем представление элементов управления textarea и select

Новые стили оформления:

textarea {
  height: 4.714em;
  margin-bottom: .286em;
  border: .071em solid rgb(96,96,96);
  padding: 0;
}

select {
  display: block;
  float: left;
  height: 1.571em;
  font-family: Futura,'Century Gothic',sans-serif;
}

option { font-size: 100%; }

Демонстрация 5: сопутствующие рассмотрения

Демонстрация 6

Предыдущая демонстрация манипулирует представлением некоторых шрифтов; теперь пора закончить эту работу.

Нормализуем представление элементов управления text и настроим результат каскадирования на тексте элементов управления select.

Новые стили оформления:

input, textarea {
  display: block;
  float: left;
  overflow: hidden;
  font-family: Futura,'Century Gothic',sans-serif;
  font-size: 1em;
}

input, textarea, select {
  margin-top: 0;
  font-size: 100%;
}

Демонстрация 6: сопутствующие рассмотрения

Демонстрация 7

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

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

Новые стили оформления:

.medium { width: 11.714em; }

select.medium { width: 12em; }

.long { width: 20.429em; }

.rInput { border: 0; }

Демонстрация 8

Кнопка отправки формы была вялой …

Точно настраиваем позицию кнопки отправки формы.

Новые стили оформления:

.submitButton {
  display: block;
  clear: both;
  width: 7.2em;
  height: 2em;
  margin: 0 0 0 16.8em;
  border: 1px solid rgb(128,128,128);
  padding: 0;
  font-size: 10px;
  text-align: center;
}

Демонстрация 8: сопутствующие рассмотрения

Демонстрация 9

Разместим "требуемые" теги там, где они должны находиться.

Выравниваем "требуемые" теги к воображаемому правому полю формы, и изменяем их текстовые свойства.

Новые стили оформления:

li.required span.note {
  display: block;
  width: auto;
  float: right;
  color: rgb(128,128,128);
  font-size: .714em;
  line-height: 2.4em;
  font-style: italic;
}

Демонстрация 9: сопутствующие рассмотрения

Демонстрация 10

Наконец пришло время уладить конфликты элементов управления radio с полями под ними в порядке исходного кода.

Выравниваем элементы управления radio и их метки по горизонтали.

Новые стили оформления:

fieldset label {
  margin-right: .25em;
  padding-right: 0;
  line-height: 1;
}

fieldset .rInput { margin-right: .75em; }

fieldset label, fieldset .rInput {
  width: auto;
  display: inline;
  float: none;
  font-size: .857em;
}

li.required fieldset {
  width: 18.857em;
  float: left;
}

Демонстрация 10: сопутствующие рассмотрения

Демонстрация 11

Для последней атаки, чтобы выровнять последние штрихи просто так …

Делаем корректировку окончательной компоновки для различных элементов управления.

Новые стили оформления:

#acctTypeField fieldset {
  padding: .286em 0 0 0;
  line-height: normal;
}

#acctTypeField .rInput { margin-top: .167em; }

#availabilityField label {
  height: 3.143em;
  padding-top: .286em;
  line-height: normal;
}

#availabilityField .rInput { margin-top: .286em; }

#availabilityField, #messageField {
  height: 1%;
  overflow: auto;
}

Демонстрация 11: сопутствующие рассмотрения

Демонстрация 12

Все предыдущие стили оформления были разработаны для Opera или Safari (выбирайте, оба браузера ведут себя относительно хорошо). Далее следуют правила специально созданные для Internet Explorer, определенные в файле CSS, присоединенном (link) в условном блоке комментария.

Делаем последнее множество изменений для Internet Explorer

Новые стили оформления:

h3 { margin-bottom: 1.2em; }
li { margin: 0 0 -.214em 0; }

select { height: 1.429em; }

textarea { height: 4.571em; }

fieldset {
  height: 1.583em;
  padding-top: .417em;
}

.medium { width: 13.429em; }

select.medium { width: 13.714em; }

.long { width: 20.286em; }

fieldset .rInput { border: 0 !important; }

#subjectField { margin-bottom: -.214em; }

#availabilityField .rInput { margin-top: .286em; }

#messageField { padding-bottom: .286em; }

input.submitButton { margin-top: .15em; }

* html input, * html textarea { float: left; }

* html select { font-size: .643em; }

* html select.medium { width: 21.364em; }

* html textarea { height: 4.643em; }

* html #subjectField {
  margin-top: .071em;
  margin-bottom: 0;
}

* html #availabilityField label { padding-top: 0; }

* html input.submitButton { margin: .1em 0 0 7em; }

Демонстрация 12: сопутствующие рассмотрения

Создание уровней поддержки платформы

Последний раздел демонстрации показывает разновидность стилей оформления, отложенных для Internet Explorer 6 и 7, и требует обсуждения, насколько широко различные браузеры рассматриваются добросовестной командой разработчиков сайта.

Реальность Web состоит в том, что пользователи используют множество всевозможных браузеров во всевозможных рабочих средах. Некоторые из них являются старыми, в то время как другие находятся на переднем крае развития. Некоторые выполняются на полнофункциональных компьютерах, в то время как другие выполняются на мобильных устройствах, таких как телефоны. Все они разработаны в определенных операционных системах, а затем перенесены на другие с различной степенью поддержки стандартов. За исключением Opera, все поставщики браузеров, поставляют продукты, которые создаются для использования вместе с другими продуктами в более обширных пакетах -- требование разработки, которое делает эти браузеры более сложными, чем требуется для единственной задачи просмотра Web. Как будто бы было недостаточно рассмотрения множества сильных и слабых сторон браузеров, но существует также вопрос ошибок -- ошибок системы безопасности, ошибок компонентов, и особенно ошибок визуализации. Пользователи Safari 3.x обнаружили, что в определенный момент документ демонстрации выявляет разрушительную ошибку визуализации в их собственном браузере. Лучшим способом разрешения таких вопросов является определение уровней поддержки. Такая практика была впервые провозглашена командой разработки интерфейса в Yahoo!, которые назвали его "Ранжированной поддержкой браузеров".

Обычно уровни поддержки попадают в четыре широкие категории:

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

Сложные компоновки форм на практике (… вместо теории)

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

В качестве агента пользователя во время разработки использовался браузер Opera 9.6 для OS X; с учетом этой оговорки и отмеченных выше других замечаний, ниже представлен общий порядок, в котором изменения и дополнения были сделаны в таблице стилей:

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

Заключение

Эта статья содержит достаточное основание для оформления и компоновки форм, но можно пойти еще дальше. Трудности, создаваемые операционными системами (компоненты которых заимствуются для создания элементов управления формы Web), и различия между процессорами визуализации, создают дополнительные проблемы при постановке задачи перед оформителем, которому требуется создать форму Web согласно спецификации. Эта глава открывает дверь к экспериментированию с множеством особенностей, связанных с задачей, и разъясняет способ достижения достаточного уровня мастерства в одном из наиболее трудных аспектов разработки приложений Web.

Контрольные вопросы

Таблица: преобразование простых дробей в десятичные

В следующей таблице цифры, находящиеся в скобках со звездочкой после них, бесконечно повторяются; например, 0.2(6*) эквивалентно 0.266666666666666… (6 повторяется бесконечно).

Ближайшие к нулю значения находятся в таблице слева, и приближаются к единице в таблице при движении слева направо.

Библиография

Предыдущая статья — Оформление таблиц

Следующая статья — Плавающие элементы и очистка

Об авторе