|
Один из основных элементов взаимодействия между пользователем и веб-страницей — форма.
Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента или открытие и закрытие элемента).
Состоят формы из одного или нескольких элементов управления и некоторых дополнительных элементов для структурирования формы. Элементами формы могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, флажки, переключатели:
- Однострочное текстовое поле (text).
Обладают свойствами: name (имя объекта); value (введенный текст); defaultValue (текстовая строка, заданная по умолчанию). Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки.
Методы: focus() — передает фокус ввода полю редактирования (поле становится активным, включается текстовый курсор, ожидается ввод текста); blur() — выключает фокус; select() — выделяет содержимое поля.
- Кнопки (button, reset, submit).
Обладают свойствами: name (имя объекта); value (надпись на кнопке). Метод: click() — вызов этого метода тождественен щелчку мышкой по кнопке.
- Флажок (checkbox).
Кроме свойств name и value, обладает свойством checked (состояние флажка: true — флажок установлен, false — флажок не установлен).
Метод: click() — вызов этого метода меняет состояние флажка.
- Переключатель (radio).
Обладает свойствами name, value и checked, а также свойством length (количество переключателей в группе).
Метод: click() — вызов метода включает переключатель.
- Выпадающий список (select).
Большинство элементов формы создаются тегом <input>. Вид элемента определяет значение основного атрибута type тега <input> .
Рассмотрите примеры 23.7 — 23.9.
При создании веб-приложений важно серьезно относиться к безопасности, особенно, когда приходится иметь дело с получением данных от пользователей. Нельзя надеяться на то, что пользователи всегда будут вводить в формы правильные значения.
Проверка данных формы (валидация формы) позволяет удостовериться в том, что форма заполнена правильно. В примере 23.10 по нажатию на кнопку «Проверить» в диалоговое окно выводится сообщение о состоянии флажка. |
Пример 23.7. Задание элементов управления с помощью тега <input>.
1) Текстовое поле:
|
<input type = "text"
size = "40">
|
2) Кнопка:
3) Переключатели:
4) Флажки:
| <input type = "checkbox"> |
Пример 23.8. Создание формы с текстовым полем и кнопкой.
1) Html-код:
|
<form name = "calc">
<p>Сколько будет 97 + 16?</p>
<input type = "text"
name = "rez">
<input type = "button"
value = "Готово"
onClick = "check();">
</form>
|
2) Скрипт:
|
function check(){
if (calc.rez.value == "113")
alert("Правильно!");
else alert("Неправильно!");
}
|
3) Страница с вариантами заполнения текстового поля и диалоговые окна с соответствующим результатом:
   
Пример 23.9. Создание формы с флажком и кнопкой.
1) Html-код:
|
<form name = "f">
Флажок
<input type = "checkbox"
name = "c">
<p>
Состояние флажка можно<br>
изменить и этой кнопкой
</p>
<input
type = "button"
value = "Смена состояния"
onclick =
"document.f.c.click();">
</form>
|
2) Страницы с флажком в разных состояниях:
Пример 23.10. Проверка состояния флажка.
1) Скрипт:
|
function click() {
if(document.f.ch.checked==false)
alert("Пожалуйста, отметьте
согласие");
else
alert("Ваше согласие
принято");
|
2) Html-код:
|
<form name = "f">
<div>
Валидация формы позволяет
удостовериться в том, что
форма заполнена правильно!
</div>
Согласен
<input type = "checkbox"
name = "ch">
<br>
<input type = "button"
value = "Проверить"
onclick = "click();">
</form></form> |
|
