×
Traktatov.net » HTML, XHTML и CSS на 100% » Читать онлайн
Страница 66 из 156 Настройки

Дополнительные удобства

Есть элементы, которые не очень сильно влияют на вид формы, но при этом делают работу с ней намного удобнее. Примером может служить элемент LABEL, который применяется при реализации выбора с помощью переключателей и флажков. Он необходим, чтобы вы могли выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Без использования этого элемента посетителю приходится щелкать кнопкой мыши на кружочке или квадратике, хотя просто щелкнуть кнопкой мыши на тексте намного удобнее. Тем более становится неважно, где находится текст – при щелчке на нем кнопкой мыши будет выбран связанный с ним пункт меню.

Использование этого элемента при работе с переключателями и флажками – самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус.

Связывание текста с элементом формы осуществляется просто: вы устанавливаете атрибут id элемента INPUT, а затем берете в элемент LABEL нужный текст и присваиваете атрибуту for этого элемента значение, совпадающее со значением id для элемента INPUT того поля, с которым хотите связать текст.

У элемента LABEL есть еще один замечательный атрибут – accesskey. Его значение устанавливает горячую клавишу для соответствующего элемента формы. Надо нажимать эту клавишу вместе с клавишей Alt, и фокус автоматически переместится на нужное поле.

В листинге 6.18 показан пример использования элемента LABEL.

Листинг 6.18. Использование элемента LABEL

Конструирование форм

Ваш пол: Мужской

Женский

Не хочу отвечать

Ваш возраст:




Как видно, использование элемента LABEL может сильно упростить работу посетителей сайта.

Осталось совсем немного: для большей наглядности сгруппируем вопросы из нашей формы по темам и составим наконец общую форму. В этом нам поможет элемент FIELDSET, который объединит поля формы, находящиеся внутри его контейнера, рамкой. У этого элемента есть атрибут title, который задает всплывающую подсказку для группы.

Чтобы добавить заголовок для каждой группы, понадобится элемент LEGENG, который задает встраиваемый в рамку текст заголовка группы. У элемента LEGEND два атрибута: align задает выравнивание заголовка, а title – всплывающую подсказку к тексту заголовка. Возможностей выравнивания немного, но достаточно.