Получение информации из элементов форм
Информация, которая извлекается из элементов формы, зависит от используемого html-элемента. Она может быть одного из двух типов: в виде строки или булевого значения.
Разные типы управляющих элементов форм обладают своими особенностями, для доступа к информации, хранящейся в них, применяются разные методы.
Получение информации из простого текстового поля
Содержание текстового поля (type="text") или поля для пароля (type="password") хранится в свойстве value объекта этого элемента.
Чтобы прочесть строку, введенную в такой элемент с атрибутом name="mytxt", нужно обратиться к свойству объекта:
formObj.mytxt.value.
Элементы текстовых полей input (типа text или password) разрешают не только чтение введенной пользователем строки текста, но и программную запись в них символьных строк.
ЗАДАНИЕ 2 (работа с данными из текстовых полей)
1. Создать форму с одним текстовым полем (элемент input типа text) и кнопкой Принять (элемент input типа submit, задать атрибут name).
При нажатии кнопки Принять вызывается функция info(), которая выводит с помощью вызова функции alert текст, введенный в текстовое поле (задать атрибут name). Так как в этом задании проверка введнной строки не производится, функция info() должна возвращать true.
Для разметки формы использовать таблицу со следующей структурой (в чистовом варианте границы таблицы убрать):
Проверить работу программы. Обратить внимание на то, как после нажатия кнопки меняется содержание адресной строки браузера (URL).
2. Задание дополняется следующими требованиями.
а) Текстовое поле имеет значение по умолчанию (например, 123).
б) В функции обработчике после alert, предусмотреть программное изменение значения текстового поля (например, на 456).
3. Убрать в адресной строке информацию, добавленную браузером (знак вопроса и далее — это называется строкой запроса), или загрузить файл страницы заново. Строка запроса в данном случае является признаком того, что браузер передал данные из формы прикладной программе (по умолчанию той же самой странице, на которой находится форма).
Изменить возвращаемое info() значение на false. Нажать кнопку Принять и вновь проанализировать содержание адресной строки. Объяснить результат.
Обработка данных без перехода на новую страницу
Если при нажатия кнопки Принять информация из формы отправляется прикладной программе, форма автоматически очищается. Это происходит, потому что браузер загружает новую страницу, которой передана информация из формы. По умолчанию это та же страница с формой, но новая.
Для веб-приложений, т.е. прикладных программ, построенных на использовании возможностей браузеров, это может оказаться неудобным (пример такой ситуации будет в задании 4).
Чтобы обработать информацию из формы на стороне клиента, но при этом сохранить ее в форме (не перегружать страницу), нужно
а) убрать из тега формы обработчик onsubmit и
б) заменить кнопку типа "submit" на кнопку <button type="button" …>.
С кнопками типа button по умолчанию не связаны никакие действия.
Поэтому, чтобы при щелчке на кнопке button запускалась процедура обработки данных из формы, нужно использовать событие кнопки Click. В тег <button> с помощью атрибута onclick нужно добавить обработчик этого события — в текущем задании это просто вызов функции info().
Теперь возвращаемое info() значение роли не играет, так как ведется обработка события, относящегося только к кнопке, а не к форме в целом.
При необходимости выполнение действий submit и reset можно инициировать программно — выполнить функции submit() или reset().
ЗАДАНИЕ 2 (продолжение)
4. Внести изменения в код страницы из задания 2, чтобы при нажатии кнопки Принять по-прежнему выводилось сообщение (alert) с текстом, взятым из формы, но сброс содержимого формы не происходил. Проверить работу программы.
ЗАДАНИЕ 3 (простое веб-приложение — суммирование чисел)
Создать форму, в которой в два текстовых окна вводятся два числа (слагаемые). При нажатии кнопки "Вычислить" в поле "Результат" выводится результат сложения этих операндов.
Форма имеет кнопку "Очистить", позволяющую очистить поля.
Вычисленная сумма должна выводится в поле "Результат" программно, и это поле не должно редактироваться. Чтобы текстовое поле стало недоступным для изменений вручную, в элементе input необходимо задать дополнительный атрибут readonly.
Замечания
1. В HTML атрибут readonly не имеет значения, но документах XHTML значение должно быть обязательно: readonly="readonly".
2. Текстовые поля хранят строки, для которых операция + означает конкатенацию. Чтобы преобразовать строку, представляющую число, в целое число, нужно применить к этой строке функцию parseInt() (см. справку). Например, parseInt("123") вернет число 123.
Чтобы визуально "разрядить" элементы формы по вертикали, нужно подобрать для строк форматирующей таблицы подходящую высоту (задать атрибут height=…).