Элементы форм

Все элементы форм создаются тэгами, имеющими начало: <input type="...", где значения атрибута type и определяют тип элемента. Рассмотрим возможные значения этого атрибута.

Текстовое поле (text field):

Текстовое поле определяет код:

Здесь:

name - имя поля (впоследствии мы узнаем, как к элементам форм можно обращаться просто по имени);

value - то, что будет записано в текстовое поле "по умолчанию", как только документ появится в окне браузера;

align - этот атрибут "отвечает" за расположение текстового поля; он не является специфическим для элементов форм и (как и в других тэгах) может принимать значения: left, right, center;

size - длина поля в символах;

maxlength - максимальное число символов, которое можно ввести в поле. Если этот атрибут не указывать, ограничений на ввод не будет.

Текстовая область (text area):

Текстовые области удобно использовать для ввода большого количества текстовой информации.

Код текстовой области выглядит следующим образом:

Здесь атрибут "wrap" указывает на способ разрыва строки: если присвоить ему значение off, вводимый текст будет "уходить" за пределы области, в противном случае (on, soft или даже просто wrap без присвоения) текст автоматически переносится на новую строку.

Список:

Списки позволяют сделать единственный или множественный выбор из набора предлагаемых опций (options).

Структура HTML-кода, определяющего список, такова:

"Флажок" (Checkbox):

"Единичный" флажок создается с помощью кода:

Атрибут checked указывает на то, что "флажок" по умолчанию будет отмеченным. Часто используется сразу несколько "флажков", например:

Кнопка (button):

Как мы уже говорили, каждая форма должна иметь кнопку, нажатие на которую обеспечивает отправку данных на сервер. Такая кнопка создается с помощью кода:

При нажатии кнопки submit данные передаются на сервер по адресу указанному в качестве значения атрибута action. Чтобы предусмотреть возможность сброса всех введенных пользователем данных (и восстановления данных, указанных по умолчанию), используется кнопка reset. Код ее выглядит следующим образом:

Наряду с кнопками submit и reset используются и "простые" кнопки, с которыми обычно связывается то или иное действие. "Простая кнопка" создается с помощью кода:

Обратите внимание на атрибут onclick. Он представляет собой обработчик события - нажатия на кнопку. Для обработки этого события (и множества других событий) используются клиентские сценарии, написанные на языке JavaScript или VBScript. (Язык JavaScript мы вскоре будем изучать.) Как правило, эти сценарии оформляются в виде функций, вызов которых является значением обработчика события onclick.

Поле для ввода пароля (password):

Поле для ввода пароля отличается от обычного текстового поля тем, что вводимое в него значение отображается с помощью звездочек. Синтаксис такого поля имеет вид:

Например:

Прикрепление файлов:

Использование форм позволяет пользователю прикрепить файл и отправить его на сервер вместе с содержимым текстовых полей и других элементов формы. Например, многие сайты, где предусмотрена регистрация пользователей (скажем, агентства по трудоустройству) предусматривают отсылку фото, текстовых файлов с резюме, архивных файлов с текстами статей и пр. Для поиска файла на компьютере клиента (или в сетевом окружении, если клиентский компьютер находится в локальной сети) служит элемент:

В следующем примере мы ограничиваем выбор прикрепляемого файла форматами: txt, html, avi (видео), bmp (графика)

ВАЖНО! Форма, содержащая поле типа FILE (для прикрепления файлов), должна иметь атрибут enctype="multipart/form-data".
"Ответственным" за сохранение файла на сервере является, конечно же, серверный сценарий. Он будет использовать атрибут name как временное имя файла.

Итак, мы рассмотрели все элементы форм и знаем принцип связи документа, содержащего форму, с серверным сценарием, "принимающим эстафету" от него (его адрес указывается в качестве значения атрибута action). Однако атрибут action является не единственным атрибутом формы. Забегая вперед, назовем еще два важных атрибута.