|
Читайте также: |
Содержание текстового поля (type="text") или поля для пароля (type="password") хранится в свойстве value программных объектов этих элементов.
Чтобы прочесть строку, введенную в такой элемент с атрибутом name=" mytxt ", нужно обратиться к свойству объекта следующим образом:
formObj. mytxt. value.
Элементы текстовых полей input (типа text или password) разрешают не только чтение введенной пользователем строки текста, но и программную запись в них символьных строк.
ЗАДАНИЕ 3 (Работа с данными из текстовых полей)
1. Создать форму с одним текстовым полем (элемент input типа text) и кнопкой "Принять" (элемент input типа submit, задать атрибут name).
а) Для разметки формы использовать таблицу со следующей структурой (в чистовом варианте границы таблицы убрать):
б) При нажатии кнопки Принять вызывается функция info(), которая с помощью alert выводит текст, который пользователь поместил в текстовое поле (для также задать атрибут name).
Так как в этом задании проверка введенной строки не производится, функция info() должна возвращать true.
в) Проверить работу программы. Обратить внимание на то, как после нажатия кнопки меняется содержание адресной строки браузера (URL).
2. Задание дополняется следующими требованиями.
а) Текстовое поле имеет значение по умолчанию (например, 123).
б) В функции обработчике после кода с вызовом alert, предусмотреть программное изменение значения текстового поля (например, на 456).
3. Загрузить исходную страницу заново. Для этого убрать в адресной строке информацию, добавленную браузером (знак вопроса и далее) при отсылке формы, и нажать Enter.
Изменить возвращаемое info() значение на false. Нажать кнопку Принять и вновь проанализировать содержание адресной строки. Объяснить результат.
4. Если для веб-приложения требуется, чтобы при нажатии кнопки Принять происходила обработка данных, но страница не перегружалась (информацию в форме сохранялась), можно в обработчике с помощью false заблокировать действие action. Но это не единственный вариант действий. Можно поступить следующим образом.
а) Убрать из тега формы обработчик onsubmit.
б) Заменить кнопку типа "submit" на кнопку <button type="button" …>. С элементом <button> типа button по умолчанию не связаны никакие действия. Их определяет программист.
Чтобы при щелчке на кнопке button запускалась процедура обработки данных из формы, нужно использовать обработку события кнопки click. Для этого в тег <button> с помощью атрибута onclick добавляется обработчик события — в текущем задании это просто вызов функции info().
Теперь возвращаемое info() значение в отправке формы роли не играет, так как ведется обработка события, относящегося только к кнопке <button>, а не к форме в целом. Поэтому перезагрузки страницы не будет, форма останется той же.
Внести изменения в код страницы и проверить работу программы.
Вопросы для контроля
1. В чем преимущества выполнения предварительно контроля заполнения форм на стороне клиента?
2. Какими способами можно получить доступ к объектам форм в модели BOM?
3. Как можно получить доступ к объектам форм в модели DOM?
4. Когда возникает событие submit?
5. Какие действия выполняет браузер при нажатии кнопки submit? Как это действие имитировать программно?
6. Как заблокировать отсылку информации из формы на обработку?
7. Какими способами можно задать программный код, который будет выполнен при щелчке на гиперссылке?
8. Можно ли программно заблокировать переход по гиперссылке?
9. Как прочесть информацию из текстового поля?
10. Какие типы поведения могут задаваться кнопке <button> (см лаб. "Создание форм")? Какая особенность поведения кнопки <button> использована в последнем задании?
Дата добавления: 2015-07-26; просмотров: 78 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Использование гиперссылок для выполнения программного кода | | | Создание запросов с параметрами |