Лабораторная работа № 8. Работа с формами на JavaScript

HTML-формы используются для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером, например, регистрацию пользователя на сервере или выбор нужного документа из представленного списка. Формы поддерживаются всеми популярными браузерами.

Для идентификации формы и ее элементов через javaScript можно использовать два атрибута: name и id.

Атрибут id используется, если не требуется отправлять данные с формы на сервер, а атрибут name – для отправки формы на сервер. При этом все элементы управления обязательно располагаются в форме.

Если в html-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом name тега form.

Форма имеет два набора свойств, состав одного из которых фиксированный, а другого зависит от того, какие элементы определены в форме.

Элементы форм.

Флажок (checkbox). Свойства: name – имя объекта; value – надпись на кнопке; checked – состояние флажка (true – флажок установлен, false – не установлен); defaultChecked – отражает наличие атрибута Checked (true – есть, false – нет); метод: click( ) – меняет состояние флажка, аналогичен щелчку мышкой по кнопке.

Переключатель radio. Свойства: name – имя объекта; value – надпись на кнопке: length – количество переключателей в группе; checked – состояние переключателя: true – включен, false – выключен; defaultChecked – отражает наличие атрибута checked: true – есть, false – нет; метод: click( ) – включает переключатель. Так как группа переключателей имеет одно имя name, то адресоваться к ним необходимо как к элементам массива.

Список (select). Свойства: name – имя объекта; selectedIndex – номер выбранного элемента или первого среди выбранных (если указан атрибут multiple); length – количество элементов (строк) в списке; options – массив элементов списка, заданных тегами option; методы: focus( ) – передает списку фокус ввода; blur( ) – отбирает у списка фокус ввода.

Каждый элемент массива options является объектом со следующими свойствами: value – значение атрибута Value; text – текст, указанный после тега Option; index – индекс элемента списка; selected – присвоив этому свойству значение true, можно выбрать данный элемент; defaultSelected – отражает наличие атрибута Selected (true – есть, false – нет).

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй – значение элемента списка, соответствующее значению атрибута Value, третий соответствует свойству defaultSelected, четвертый – свойству selected.

Порядок выполнения работы: Создать HTML-страницу с формой, содержщнй необходимые элементы управления. Если тип элемента управления не оговаривается в задании, то создать его на свое усмотрение.

Таблица 8.1 – Варианты заданий

Контрольные вопросы

1 Для чего используется ввод информации в форму?

2 Как организовать ввод информации в форму на JavaScript?

3 Какие существуют способы передачи данных формы?

4 Для чего предназначен метод focus()?

5 В каких целях используется программа обработки событий onSubmit?

6 Как использовать select box как навигационное меню?

7 Как использовать картинку для кнопки submit?

8 Как передавать данные между формами на различных страницах, используя JavaScript?

9 Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

10 Как получить значение выбранной в данный момент radio button в radio group или группе checkboxes?