HTML, XHTML и CSS на 100%
Шрифт:
<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 />
</form>
</body>
</html>
Как
Осталось совсем немного: для большей наглядности сгруппируем вопросы из нашей формы по темам и составим наконец общую форму. В этом нам поможет элемент FIELDSET, который объединит поля формы, находящиеся внутри его контейнера, рамкой. У этого элемента есть атрибут title, который задает всплывающую подсказку для группы.
Чтобы добавить заголовок для каждой группы, понадобится элемент LEGENG, который задает встраиваемый в рамку текст заголовка группы. У элемента LEGEND два атрибута: align задает выравнивание заголовка, а title – всплывающую подсказку к тексту заголовка. Возможностей выравнивания немного, но достаточно.
Значения параметра align:
• right – по правому краю;
• left – по левому краю;
• center – по центру.
В листинге 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>