Формы в HTML. Элемент FORM Элемент уровня «блок» Управляющие элементы Просто текст Атрибуты: action – url обработчика method – post или get enctype – - презентация

1 Формы в HTML

2 Элемент FORM Элемент уровня «блок» Управляющие элементы Просто текст Атрибуты: action – url обработчика method – post или get enctype – тип содержимого (для post) accept-charset target onSubmit

3 Управляющие элементы форм INPUT. Задаются атрибуты name, value Типы элемента INPUT (атрибут type): text, password – текстовое поле checkbox – флажок radio – «радио» кнопка submit, reset – кнопки для отсылки и «сброса» hidden – скрытое поле image – изображение button – кнопка без специального действия file – элементы для отправки файла

4 Дополнительные атрибуты элемента INPUT type=text, password size – ширина в символах maxlength – максимальный размер в символах type=radio, checkbox checked type=image src – url изображения type=reset, submit, button value – подпись

5 Примеры Флажки Получать уведомления по почте Скрывать адрес от посетителей Радиокнопки Ваш возраст: До 16 лет От 16 до 40 лет Больше 40 лет

6 Элементы для создания меню SELECT + OPTION name – атрибут элемента SELECT value – атрибут элемента OPTION Пример: Выберите напиток: Сок Пиво Молоко OPTGROUP с атрибутом label

7 Другие элементы форм TEXTAREA rows, cols, accesskey disabled, readonly BUTTON type (reset, submit, button) LABEL for – id элемента, для кот. метка accesskey FIELDSET – группа элементов LEGEND – заголовок для группы

8 Пример Возраст До 16 лет От 16 до 40 лет Больше 40 лет Почта Получать уведомления по почте Скрывать адрес от посетителей

9 События для форм FORM – onSubmit, onReset BUTTON – onFocus, onBlur, OnClick text, password – onChange, (onFocus, onBlur) SELECT – onChange, (onFocus, onBlur) Методы элементов формы: focus(), blur(), select()

10 Доступ к значениям формы Доступ клиента: Поля для всех элементов: name, value – соответствующие значения form – сама форма Поле только для SELECT: selectedIndex – номер выбранного пункта Для формы: все элементы являются подобъектами формы Доступ на сервере: при методе GET пары name, value попадают в часть адреса – запрос в виде name1=value1&name2=value2&…

11 Обработка событий Обработка клиентом: Вызов кода происходит ДО стандартной обработки Возврат значения false отменяет стандартную обработку (это позволяет, в частности, проверить данные перед отправкой на сервер) Обработка сервером: На сервере вызывается программа- обработчик запроса