Несмотря на то что ширина элемента разделе- 
ния фиксирована (475 пикселей), длина формы (а, следовательно, и длина эле- 
мента разделения) определяется количеством, размерами и расположением 
элементов формы. 
Для расположения элементов на форме и подписей к ним используйте не 
HTML-таблицы, а элементы 
 и . Для форматирования и позициони- 
рования элементов формы, помещенных в контейнеры 
 и , создайте 
в списке стилей три класса: 
div.row {clear:both; padding-top:5px; font-size:12pt} 
div.row {clear:both; padding-top:12px} 
div.row span.label {float:left; width:110px; text-align:right} 
div.row span.element {float:right; width:375px; text-align:left} 
Свойство float в классах style,label и style .element указывает Web-брау- 
зеру, как располагать элементы внутри контейнера. Форматирование и позицио- 
нирование текстовых элементов (т.е. надписей) с помощью класса style.label

Глава 4. Каскадные списки стилей 223 
приводит к их выравниванию по левому краю других находящиеся в контейнере 
объектов. Применение же класса style.element для форматирования и позици- 
онирования элементов формы выравнивает их по правому краю других находя- 
щихся в контейнере объектов. 
Для форматирования и позиционирования дескрипторов  и , со- 
держащих надписи и элементы ввода формы, используются классы div.row, 
span.label и span.element, определенные в предыдущем примере: 
 
 
 
 
Ямя: 
 
Фамилия: 
 
 
Адрес E-Mail: 
 
 
 
 
 
 « 
 

   Snbsp; 
 
 
 |—П 
 
В результате будет получения форма, 
показанная на рис. 4.22. 
А теперь давайте предположим, что 
требуется отметить элементы формы, 
которые посетитель должен обязательно 
заполнить до передачи результатов фор- 
мы (т.е. нужно обозначить требуемые 
поля). Для этого создайте класс списка 
стилей, аналогичный показанному здесь 
классу span.reqLabel: 
div.row span.reqLabel 
{float:left; width;114px; 
text-align:right; 
color:red; font-weight:bold; 
background-color:yellow} 
Имя: I 
Фамилия: I 
Адрес Е- |~ 
Mail: 
Комментарии: 
i 
Отправить i Очистить j 
Рис. 4.22. Форма с элементами ввода и 
надписями, полученная с использованием 
классов каскадных списков стилей

224 Глава 4. Каскадные списки стилей 
Затем для каждого требуемого поля задайте в дескрипторе  атрибут 
class с указанием класса span.reqLabai. При этом не забудьте указать где-ни- 
будь возле кнопки Submit, что означает красный цвет. 
Кстати, значение 475 пикселей для атрибута width контейнера 
 — это 
не просто произвольное значение. Форма, используемая в качестве примера в 
ЭТОМ СОВете, требует 475 ПИКСелеЙ, При ЭТОМ ЩДМСЪ "Адрес электронной поч- 
ты:" при выводе ее красным полужирным шрифтом (на рисунке не показано) 
упирается в левый край формы, а многострочное поле ввода текста — в правый и 
нижний края формы. Для определения ширины дескрипторов 
, которая 
требуется для вывода на экран форм, измените классы span,label и 
span.element, как показано ниже, для вывода на экран пунктирной границы 
вокруг каждого элемента раздела: 
div.row span.label {float:left; width;110px; text-align:right; 
border:Ipx dotted} 
div.row span.element {float:right; width;345px; text-align:left; 
border:Ipx dotted} 
Вывод на экран пунктирной границы вокруг каждого элемента раздела позво- 
ляет легко визуально проследить эффект изменения ширины разделителя в 
объявлениях классов span.label и span.element. Уменьшайте ширину каждого 
разделителя до тех пор, пока пунктирная граница не будет находиться непосред- 
ственно вокруг надписи или элемента ввода. 
Затем уменьшайте ширину контейнера формы, пока границы формы не вый- 
дут за границы контейнера, в котором содержатся элементы формы. Перед от- 
правкой готовой Web-страницы на Web-серв