Квинт Игорь
Шрифт:
У элемента LABEL есть еще один замечательный атрибут – accesskey. Его значение устанавливает горячую клавишу для соответствующего элемента формы. Надо нажимать эту клавишу вместе с клавишей Alt, и фокус автоматически переместится на нужное поле.
В листинге 6.18 показан пример использования элемента LABEL.
<html>
<head>
<title>Конструирование форм</title>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post" name="test" target="_blank">
Ваш пол: <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 />
</form>
</body>
</html>
Как видно, использование элемента LABEL может сильно упростить работу посетителей сайта.
Осталось совсем немного: для большей наглядности сгруппируем вопросы из нашей формы по темам и составим наконец общую форму. В этом нам поможет элемент 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>