<input name="Reg_Age" type="radio" value="2535" id="a2535"/><label for="a2535">25-35</label><br />
<input name="Reg_Age" type="radio" value="3550" id="a3530"/><label for="a3530">35-50</label>
<input name="Reg_Age" type="radio" value="after50" id="aa50"/><label for="aa50">старше 50</label><br />
</form>
</body>
</html>
Как видно, использование элемента LABEL может сильно упростить работу посетителей сайта.
Осталось совсем немного: для большей наглядности сгруппируем вопросы из нашей формы по темам и составим наконец общую форму. В этом нам поможет элемент FIELDSET, который объединит поля формы, находящиеся внутри его контейнера, рамкой. У этого элемента есть атрибут title, который задает всплывающую подсказку для группы.
Чтобы добавить заголовок для каждой группы, понадобится элемент LEGENG, который задает встраиваемый в рамку текст заголовка группы. У элемента LEGEND два атрибута: align задает выравнивание заголовка, а title – всплывающую подсказку к тексту заголовка. Возможностей выравнивания немного, но достаточно.
Значения параметра align:
• right – по правому краю;
• left – по левому краю;
• center – по центру.
В листинге 6.19 показан итоговый код формы регистрации. В нем объединены все рассмотренные элементы.
Листинг 6.19. Форма регистрации
<html>
<head>
<title>Конструирование форм</title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post" name= "test" target="_blank">
<fieldset title="Регистрационная информация">
<legend title="Регистрационная информация" align="left">Регистрационная информация</legend>
<input name="id_user" type="hidden" value="27" />
Введите логин: <input type="text" name="Reg_login" maxlength="12" value= "< 10 знаков" size="14" /><br />
Введите пароль: <input type="password" name="Reg_password" value= "Пароль" /><br />
</fieldset>
<fieldset title="Личная информация">
<legend title="Личная информация" align="center">Личная информация</legend>
Имя: <input type="text" name="Reg_name" value="Ваше имя" /><br />
Фамилия: <input type="text" name="Reg_surname" value="Ваша фамилия" /><br />
Отчество: <input type="text" name="Reg_patronymic" value="Ваше отчество" /><br />
Ваш пол: <input name="Reg_Gender" type="radio" value="man" />Мужской
<input name="Reg_Gender" type="radio" value="woman" />Женский
<input name="Reg_Gender" type="radio" value="dontanswer" checked />Не хочу отвечать<br />
Ваш возраст: <input name="Reg_Age" type="radio" value="before18" id="ab18"/><label for="ab18">до 18</label>
<input name="Reg_Age" type="radio" value="1825" id="a1825" /><label for="a1825">18-25</label>
<input name="Reg_Age" type="radio" value="2535" id="a2535"/><label for="a2535">25-35</label><br />
<input name="Reg_Age" type="radio" value="3550" id="a3530"/><label for="a3530">35-50</label>
<input name="Reg_Age" type="radio" value="after50" id="aa50"/><label for="aa50">старше 50</label><br />
</fieldset>
<fieldset title="Дополнительная информация">
<legend title="Дополнительная информация" align="right">Дополнительная информация</legend>
Место проживания:
<select name="R_Place" size="1" >
<optgroup label="Россия">
<option value="SPb">Санкт-Петербург</option>
<option value="Mos" selected >Москва</option>
<option value="Ebr">Екатеринбург</option>
</optgroup>
<optgroup label="Америка">
<option value="LA">Лос-Анджелес</option>
<option value="Va">Вашингтон</option>
<option value="NY">Нью-Йорк</option>
</optgroup>
<optgroup label="Франция">
<option value="Par">Париж</option>
<option value="Lion">Лион</option>
</optgroup>
</select><br />
Области работы (можно выбрать несколько):<br />
<select name="R_Job" size="8" multiple="multiple" >
<optgroup label="Журналистика">
<option value="biz">Бизнес</option>
<option value="ecol">Экология</option>
<option value="tur">Туризм</option>
</optgroup>
<optgroup label="Программирование">
<option value="web">Web-программирование</option>
<option value="CPP">С/С++</option>
<option value="Del">Delphi</option>
</optgroup>
<optgroup label="Создание сайтов">
<option value="Diz">Дизайн</option>
<option value="Html">Верстка</option>
</optgroup>
<optgroup label="Перевод">
<option value="Eng">Английский</option>
<option value="Fr">Французский</option>
<option value="Ger">Немецкий</option>
</optgroup>
<optgroup label="Другое">
<option value="HR">Управление персоналом</option>
<option value="sale">Продажи</option>
<option value="admin">Администрирование</option>
<option value="PR">Реклама</option>
</optgroup>
</select><br />
Увлечения: <input name="Reg_hobby[]" type="checkbox" value="sing" />Петь
<input name="Reg_hobby[]" type="checkbox" value="float" />Плавать
<input name="Reg_hobby[]" type="checkbox" value="walk" />Гулять
<input name="Reg_hobby[]" type="checkbox" value="work" checked />Работать<br />
<input name="Reg_hobby[]" type="checkbox" value="drive" checked />Кататься на машине
<input name="Reg_hobby[]" type="checkbox" value="cook" />Готовить
<input name="Reg_hobby[]" type="checkbox" value="dance" />Танцевать
<input name="Reg_hobby[]" type="checkbox" value="read" checked /> Читать<br />
Добавьте свое фото: <input name="Reg_foto" type="file" size="55" /><br />
Расскажите немного о себе:<br />
<textarea cols="24" rows="10" name="about" wrap="off" >Я самый лучший, лучше меня нет никого.</textarea><br />
</fieldset>
<fieldset title="Информация о нас">
<legend title="Информация о нас" align="center">Информация о нас</legend>
Соглашение:<br />
<textarea cols="24" rows="3" name="about" readonly >Условия нашего соглашения</textarea><br />
</fieldset>
<input name="submit" type="image" src="Send.jpg" alt="Нажмите, чтобы отправить" align="left" border="5" /><input name="reset" type="image" src="Clear.jpg" alt="Нажмите для очистки формы" align="right" />
</form>
</body>
</html>
Фрагмент формы регистрации с объединением полей в группы показан на рис. 6.11.
Рис. 6.11. Фрагмент итоговой формы
На рис. 6.11 видно, что после объединения полей в группы форма стала намного удобнее и логичнее.
Резюме
Мы рассмотрели все возможности построения форм и создали достаточно большую форму регистрации. Возможности, которые предоставляют формы, очень велики. Это главный инструмент общения пользователей в Интернете. Использование форм на сайте позволяет иметь обратную связь с посетителями, а также расширить функциональность сайта.
Глава 7
Введение в таблицы стилей и язык CSS
7.1. Встраивание CSS в HTML
7.2. Синтаксис CSS
7.3. Селекторы
7.4. Псевдоэлементы и псевдоклассы
7.5. Правило @media
7.6. Правила!important
7.7. Правило @impor
В этой главе вы изучите основы языка CSS. Вы увидите, насколько легко разрабатываются таблицы стилей. Для этого достаточно лишь иметь общие представления о языке HTML, который мы подробно разобрали в предыдущих главах. Язык CSS в настоящее время считается основным средством оформления веб-страниц, пришедшим на смену тегов и атрибутов форматирования. Язык HTML 4 пока еще поддерживает эти средства, но они относятся к числу устаревших и нежелательных. В языке же XHTML оформление веб-страниц допускается только средствами CSS, поэтому если вы хотите, чтобы ваш сайт служил долгие годы, с самого начала создавайте его средствами CSS.
7.1. Встраивание CSS в HTML
Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).
Листинг 7.1. Простой HTML-документ
<html>
<head>
<title>Моя домашняя страница</title>
</head>
<body>
<h1>Моя домашняя страница</h1>
<p>На этой странице вы найдете информацию обо мне и моих друзьях.
</body>
</html>
Чтобы сделать текст из элемента H1 синим, вместо обычного атрибута color элемента FONT нужно использовать следующее CSS-правило:
h1 { color: blue }
Собственно правило в CSS состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue. В последующих разделах мы подробно разберем, что такое селектор, и, двигаясь дальше, узнаем, какие бывают свойства CSS и их значения.
В спецификации языка HTML 4 описано два правила описания таблиц стилей для HTML-документов. Первый – это вставка CSS-кода непосредственно внутрь HTML-документа. Второй – это запись таблицы стилей во внешнем файле и установка ссылки на этот файл в HTML-документе.
Чтобы добавить CSS непосредственно внутрь HTML, используется элемент STYLE, который должен располагаться внутри заголовка документа, то есть внутри элемента HEAD. В листинге 7.2 приведен пример простой HTML-страницы с записанной таблицей стилей внутри документа.
Листинг 7.2. CSS внутри HTML-документа
<html>
<head>
<title>Моя домашняя страница</title>
<style type="text/css">
h1 { color: blue }
</style>
</head>
<body>
<h1>Моя домашняя страница</h1>
<p>На этой странице вы найдете информацию обо мне и моих друзьях.
</body>
</html>
Для максимальной гибкости имеется возможность создавать внешние таблицы стилей. Если код таблицы стилей находится во внешнем файле, то вы имеете возможность использовать его во всех страницах сайта. Представьте, что ваш сайт насчитывает более 1000 страниц. Если вы захотите внести какие-то изменения, то вам придется изменять код на каждой странице. Используя внешние таблицы стилей, вы лишь один раз внесете изменения в CSS-файл таблицы стилей.
Для соединения HTML-документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE, рассмотренный выше, должен располагаться в заголовке документа внутри элемента HEAD. Код страницы со ссылкой на внешний файл таблицы стилей представлен в листинге 7.3.
