ЛабыWeb / Лаб_Web_JS / ЛабРабота9_5_ФлагПереключатель
.docТема «Элементы управления формы- флажки и переключатели»
Цель работы: Изучить свойства дескрипторов элементов управления Флажки и Переключатели.
Теория. Флажки позволяют выбрать произвольный набор параметров, представленных в списке, тогда как в группе переключателей можно выбрать только один из них.
Тип элемента управления указывается в атрибуте TYPE дескриптора <INPUT>:
-
checkbox — флажок;
-
radio — переключатель.
Атрибут NAME играет чрезвычайно важное значение у элементов управления данных типов. В группе флажков или переключателей каждый элемент создается отдельно:
<INPUT TYPE='radio' NAME='имя_группы'>
Группу объединяет то, что у всех входящих в нее элементов атрибуту NAME присвоено одно и то же имя. На странице может быть несколько групп переключателей, и в каждой группе можно выбрать по одному пункту. При выборе переключателя автоматически сбрасывается переключатель, который был активным в данной группе, но ни в какой другой.
У элементов управления данных типов устанавливаются также следующие атрибуты.
-
CHECKED — задает элемент в группе по умолчанию. Если данный атрибут установлен в нескольких переключателях одной группы, то активным будет последний переключатель в списке с атрибутом CHECKED.
-
VALUE — значение переключателя. Обратите внимание, что установленное значение не отображается в окне обозревателя, но именно значения выбранных флажков и переключателей, а не их подписи, пересылаются вместе с данными формы по адресу в атрибуте ACTION дескриптора <FORM>.
-
ACCESSKEY — горячая клавиша, при выборе которой в комбинации с клавишей <Alt> происходит установка флажка или переключателя
Подписи флажков и переключателей, как и в случае с полями ввода, создаются в тексте абзаца, а элементы управления в группе переносятся в новую строку с помощью дескриптора <br>. В случае установки атрибута accesskey не забудьте выделить горячую клавишу в подписи цветом, подчеркиванием или особым шрифтом.
Каждому элементу группы в задании 1 назначена горячая клавиша. В подписи элемента горячая клавиша выделена подчеркиванием и красным цветом шрифта. Переключатель Белый с флажками Груша и Персик устанавливается по умолчанию с помощью атрибута CHECKED.
Задание 1. Наберите текст и сохраните его как html-документ. Просмотрите файл.
<html> <head>
<title> Группа флажков и группа переключателей </title></head><body>
<FORM>
<!-- Группа переключателей -->
<h2>Цвет фона страницы</h2>
<INPUT TYPE='radio' NAME='color' VALUE='white' CHECKED ACCESSKEY='B'><U><FONT COLOR='red'>Б</FONT></U>елый
<BR><INPUT TYPE='radio' NAME='color' VALUE='yellow' ACCESSKEY='Ж'><U><FONT COLOR='red'>Ж</FONT></U>елтый<BR>
<INPUT TYPE='radio' NAME='color' VALUE='green' ACCESSKEY='3'><U><FONT COLOR='red' >3</FONT></U>еленый<BR><BR>
<!-- Группа флажков -->
<h2>Выберите фрукт</h2>
<INPUT TYPE='checkbox' NAME='fruit' VALUE='pear' CHECKED ACCESSKEY=Г'><U><FONT COLOR='red'>Г</FONT></U>pyшa <BR>
<INPUT TYPE='checkbox' NAME='fruit' VALUE='peach' CHECKED ACCESSKEY='P'>Пе<U><FONT COLOR= 'red'>p</FONT></U>сик <BR>
<INPUT TYPE='checkbox' NAME='fruit' VALUE='apple' ACCESSKEY='Я'><U><FONT COLOR='red'>Я</F0NT></U>блоко<BR>
</FORM></body> </html>
Задание 2. Наберите текст и сохраните его как html-документ. Просмотрите файл
З
адание
3. Создать
форму, имеющую вид:
/Написать скрипт для кнопки «Подтвердить заказ», переводящий выбранный десерт в окно «Ваш заказ»./