Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 48


Дата: 2009-02-11

Архив Рассылки

Самоучитель HTML

Самоучитель CSS

Справочник по CSS

Рецепты HTML и CSS
Самоучитель по HTML и CSS

Добрый день.

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

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

При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега <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. Вид заголовка, измененного через стили

Copyright 2007—2009 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное