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

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

 Текстовое поле (text field): (Мы только что видели их в нашем примере) Текстовое поле определяет код:

Здесь

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

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

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

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

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

Значением текстового поля должен быть только текст. Если, к примеру, поместить в него html-код, он будет отображаться как текст (а не так, как он выглядел бы в окне браузера). Но вот пример размещения в текстовом поле бегущей строки, выполненный Сергеем Бурылиным. Как ему это удалось - попробуйте разобраться сами.

 Текстовая область (text area): Текстовые области удобно использовать для ввода большого количества текстовой информации Код текстовой области выглядит следующим образом:

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

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

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

Коды списков, приведенных нами в качестве примеров, имеют вид:

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

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

 "Радиокнопка" (Radiobutton) "Единичная" радиокнопка создается с помощью кода:

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

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

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

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

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

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

Вот несколько образчиков:

Кнопку с размещенной на ней картинкой можно создать и так:

Однако в этом случае она мало напоминает кнопку. Сравните, например:

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

Например:

 Скрытое поле (hidden): Иногда в формах используются поля, которые вообще никак не обнаруживают своего присутствия - это так назваемые "скрытые" поля. Возникает вопрос: как же пользователь введет в такое поле свои данные? Дело в том, что пользователю этого делать и не нужно - эти данные будут размещаться в скрытых полях с помощью клиентского сценария (язык клиентских сценариев мы будем изучать чуть позднее). Но зачем нужны скрытые поля? С их помощью можно передать на сервер (и сохранить там для последующего использования) какую-либо информацию о клиенте, например, дату посещения данного документа, настройки браузера и пр. Синтаксис скрытого поля имеет вид:

Пример скрытого поля приводить бессмысленнно - его просто не будет видно.

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

Например:

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

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