Формы в HTML

Формы в HTML
Элемент FORM




Элемент уровня «блок»
Управляющие элементы
Просто текст
Атрибуты:






action – url обработчика
method – post или get
enctype – тип содержимого (для “post”)
accept-charset
target
onSubmit
Управляющие элементы форм

INPUT. Задаются атрибуты name, value
Типы элемента INPUT (атрибут type):








text, password – текстовое поле
checkbox – флажок
radio – «радио» кнопка
submit, reset – кнопки для отсылки и «сброса»
hidden – скрытое поле
image – изображение
button – кнопка без специального действия
file – элементы для отправки файла
Дополнительные атрибуты
элемента INPUT

type=text, password


size – ширина в символах
maxlength – максимальный размер в символах

type=radio, checkbox

checked
type=image



src – url изображения
type=reset, submit, button

value – подпись
Примеры
Флажки
<INPUT type=checkbox name=sendmail>Получать
уведомления по почте
<INPUT type=checkbox checked
name=hideemail>Скрывать адрес от посетителей

Радиокнопки
Ваш возраст:
<INPUT type=radio name=age value=16>До 16 лет
<INPUT type=radio checked name=age value=40>От 16
до 40 лет
<INPUT type=radio name=age value=99>Больше 40 лет

Элементы для создания меню

SELECT + OPTION



name – атрибут элемента SELECT
value – атрибут элемента OPTION
Пример:
Выберите напиток:
<SELECT name=drink>
<OPTION value=juice>Сок</OPTION>
<OPTION value=bier>Пиво</OPTION>
<OPTION value=milk>Молоко</OPTION>
</SELECT>

OPTGROUP с атрибутом label
Другие элементы форм

TEXTAREA



BUTTON




type (reset, submit, button)
LABEL


rows, cols, accesskey
disabled, readonly
for
– id элемента, для кот. метка
accesskey
FIELDSET – группа элементов
LEGEND – заголовок для группы
Пример
<FORM ACTION=test>
<FIELDSET><LEGEND>Возраст</LEGEND>
<BR><LABEL><INPUT type=radio name=age value=16>
До 16 лет
</LABEL>
<BR> <LABEL><INPUT type=radio checked name=age value=40>
От 16 до 40 лет
</LABEL>
<BR> <LABEL><INPUT type=radio name=age value=99>
Больше 40 лет
</LABEL>
</FIELDSET>
<FIELDSET><LEGEND>Почта</LEGEND>
<BR><INPUT type=checkbox name=sendmail id=smail><LABEL for=smail>
Получать уведомления по почте</LABEL>
<BR><INPUT type=checkbox checked name=hideemail id=hmail><LABEL
for=hmail>
Скрывать адрес от посетителей</LABEL>
</FIELDSET>
<BR><INPUT TYPE=SUBMIT>
</FORM>
События для форм
FORM – onSubmit, onReset
 BUTTON – onFocus, onBlur, OnClick
 text, password – onChange, (onFocus,
onBlur)
 SELECT – onChange, (onFocus, onBlur)
Методы элементов формы:
focus(), blur(), select()

Доступ к значениям формы

Доступ клиента:
Поля для всех элементов:
 name, value – соответствующие значения
 form – сама форма
Поле только для SELECT:
 selectedIndex – номер выбранного пункта
Для формы: все элементы являются подобъектами формы

Доступ на сервере:

при методе GET пары name, value попадают в часть
адреса – запрос в виде
name1=value1&name2=value2&…
Обработка событий

Обработка клиентом:



Вызов кода происходит ДО стандартной
обработки
Возврат значения false отменяет
стандартную обработку (это позволяет,
в частности, проверить данные перед
отправкой на сервер)
Обработка сервером:

На сервере вызывается программаобработчик запроса