htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > Формы по шагам > Разделение формы на группы

Шаг 16. Разделение формы на группы

Влад Мержевич

При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега <FORM> сочетания тегов и стилей. Например, элементы формы можно выделить, если использовать для них фоновый цвет или рамку, задавая их через CSS. Кроме того, существует и другой подход, который состоит в применении тега <FIELDSET>. Этот контейнер группирует элементы формы, отображая вокруг них рамку (пример 16.1).

Пример 16.1. Использование тега <FIELDSET>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Fieldset</title>
 </head>
 <body>
  <form action="handler.php">
   <fieldset>
    <legend>Работа со временем</legend>
    <input type="checkbox" value="t1"> Создание пунктуальности 
    (никогда не будете никуда опаздывать).<br>
    <input type="checkbox" value="t2"> Излечение от пунктуальности 
    (никогда никуда не будете торопиться).<br>
    <input type="checkbox" value="t3"> Изменение восприятия времени. 
   </fieldset>
  </form>
 </body>
</html>

Результат выполнения данного примера показан ниже.

Работа со временем Создание пунктуальности (никогда не будете никуда опаздывать).
Излечение от пунктуальности (никогда никуда не будете торопиться).
Изменение восприятия времени.

Чтобы добавить к рамке специальный заголовок применяется контейнер <LEGEND>, который должен располагаться в теге <FIELDSET>. Внутри тега <LEGEND> допустимо использовать текст и теги форматирования, вроде <B>, <I>, <SUP>, <SUB>, а также стили (пример 16.2).

Пример 16.2. Использование тега <LEGEND>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Legend</title>
 </head>
 <body>
   <form action="handler.php">
   <fieldset>
     <legend style="font-weight: bold">Изменение убеждений</legend>
     <input type="checkbox" value="t1"> Изменение религиозной 
     веры (на выбор: буддизм, конфуцианство, индуизм).<br>
     <input type="checkbox" value="t2"> Изменение веры 
     в непогрешимость любимой партии.<br>
     <input type="checkbox" value="t3"> Убеждение в том, 
     что инопланетяне существуют.<br>
     <input type="checkbox" value="t4"> Выбор политического 
     строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, 
     капитализм).<br>
     <input type="checkbox" value="t5"> Повышение веры 
    в собственные способности.<br>
   </fieldset>
  </form>
 </body>
</html>

Любые пробелы в теге <LEGEND> будут проигнорированы, если вы желаете их непременно добавить, используйте символ неразделяемого пробела &nbsp;.

При использовании тегов <FIELDSET> и <LEGEND> учтите, что результат работы в разных браузерах будет несколько различаться, как показано на рис. 16.1–16.2.

Рис. 16.1. Отображение в браузере Internet Explorer 7

Рис. 16.1. Отображение в браузере Internet Explorer 7

Рис. 16.2. Браузер Opera

Рис. 16.2. Браузер Opera

Из рисунков видно, что для браузера Internet Explorer в Windows XP рамка получается цветная и с закругленными углами. В остальных браузерах цвет рамки по умолчанию черный, а цвет заголовка совпадает с цветом текста. Цвет рамки группы поменять не удастся, а вот отступы вокруг текста и цвет заголовка изменяются с помощью стилей (пример 16.3).

Пример 16.3. Изменение вида заголовка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Заголовок формы</title>
  <style type="text/css">
   FIELDSET {
    padding: 10px; /* Поля вокруг группы */
   }
   LEGEND {
    color: #fff; /* Цвет заголовка группы */
    padding: 3px 10px; /* Поля вокруг заголовка */
    background: #ba007d; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
    <fieldset>
    <legend>Пробуждение обаяния</legend>
    <p>...</p>
    </fieldset>
  </form>
 </body> 
</html>

В примере отступы устанавливаются с помощью стилевого атрибута padding, а цвет заголовка через атрибут color. Результат показан на рис. 16.3.

Рис. 16.3

Рис. 16.3. Вид заголовка, измененного через стили

Статья опубликована: 12.08.2005 Последнее обновление: 12.11.2008
Формы по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru