Создание форм. 
Основы языка Hypertext Markup Language (HTML)

После того как пользователь заполнит форму и нажмет кнопку, внесенные им данные посылаются на сервер и обрабатываются специальной программой CGI (Common Gateway Interface) или PHP (Personal Hypertext Processor). Таким образом, пользователь может интерактивно взаимодействовать с web-сервером через Интернет.

В одном документе может быть определено несколько форм для заполнения, но форма не должна содержать в себе другую форму.

Создание формы.

Процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй — в создании на сервере программы, обрабатывающей данные этой формы.

Все формы создаются парными тэгами <FORM> и </<strong>FORM>, между которыми помещаются элементы формы:

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

В параметре action указывается адрес (URL) программы, которая будет обрабатывать данные формы на сервере.

Параметр method определяет, каким путем данные будут посылаться на сервер:

• · get: информация из формы добавляется в конец адреса, который был указан в параметре action. Опытные HTML-редакторы не рекомендуют использовать метод get.
• · post: при использовании данного метода информация из формы пересылается не как часть адреса, а как содержимое запроса. Данный метод рекомендуется к использованию.

Примечание. Изучение программ обработки данных формы на сервере не входит в рамки данного курса. В примерах будут рассмотрены основы создания интерфейса для отправки данных — то есть структура и основные элементы форм. Поэтому параметры method и action тэга при выполнении упражнений и заданий данной главы могут быть опущены.

Для задания элементов внутри формы используются тэги, <TEXTAREA> и <SELECT>.

Рассмотрим каждый из них подробнее.

Элемент.

Тэг используется для ввода текстовой информации, пересылки файлов или управляющей информации.

Параметры тэга :

• · name — имя поля. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, программа обработки сможет получить данные, помещенные пользователем в это поле;
• · size — определяет визуальный размер поля ввода на экране в символах (по умолчанию size=20);
• · maxlength — определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер не позволяет ввести последующий символ. По умолчанию значение maxlength равно бесконечности;

• · value — определяет начальное (по умолчанию) значение поля;
• · type — определяет тип поля ввода. Может принимать значения:
• — text — описывает однострочное поле ввода

.

Этот атрибут используется по умолчанию (см. пример в упражнении 7.1);

— password — отличается от атрибута text тем, что вводимое пользователем значение не отображается браузером на экране.

;

• — checkbox (флажок) — используется, когда необходимо ответить да или нет. В форме отображается в виде. Если в форме имеется несколько полей-флажков, то можно выбрать более одного поля. Каждое поле должно иметь свое имя (name) и значение (value). На сервере обрабатываются данные только у выбранных полей;
• — radio — при использовании нескольких полей данного типа в одной форме пользователь может выбрать только одно поле. В форме отобраджается в виде. Поля должны иметь одинаковое имя (name), но разные значения (value). На сервер будет передано значение только выбранного поля;
• — reset — данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. Атрибут value может содержать текст, который будет высвечен на кнопке;
• — subm…

Создайте документ file.html с формой, позволяющей отправлять на сервер файлы.

Для этого:

• · Создайте HTML-документ с текстом «Выберите файл для загрузки на сервер».
• · Создайте в этом документе форму.
• · Добавьте в нее элемент, позволяющий выбрать файл (type=file)

и кнопку «Отправить».

Примечание. Для отправки файла в параметре action тэга вводится адрес специальной программы, осуществляющей пересылку файла на сервер (в примере адрес указывать не надо).

Элемент.

Тэг <TEXTAREA> используется для ввода большого количества текстовой информации (в несколько строк).

Атрибуты тэга :

• · name— имя поля;
• · cols— число колонок (символов) в текстовой области;
• · rows— число видимых строк в текстовой области.

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

Упражнение 7.6.

Создайте документ otziv.html, с формой, предлагающей написать отзыв о статье (рис. 7.6).

Для этого:

• · Создайте HTML-документ с текстом «напишите отзыв о прочитанной статье»
• · В HTML-документе создайте форму.
• · Добавьте в нее элемент с 6 строками и шириной 64 символа, в котором будет выедена подсказка «Здесь введите свой отзыв»:

Здесь введите свой отзыв.

· В конце формы добавьте кнопку «Отправить».

Элемент.

Элемент <SELECT> позволяет пользователю выбрать значение из фиксированного списка значений. Обычно этот элемент представлен выпадающим списком.

Для определения списка пунктов используются тэги <OPTION> между и .

…

…

…

Параметры тэга :

• · name — имя объекта SELECT;
• · multiple — позволяет выбрать более чем одно наименование;
• · single — из списка можно выбрать только один вариант (этот параметр задан по умолчанию);
• · size — определяет число пунктов, видимых для пользователя. Если этот параметр не указан, то список на экране отображается в виде выпадающего списка (видно одно наименование), если size>1, то браузер представляет на экране обычный список (число — количество видимых наименований).

Параметры тэга :

• · selected — указывает, какой пункт выбран по умолчанию.
• · value — значение, которое передается на сервер для обработки. По умолчанию значение value равно элементу .

Упражнение 7.8.

Создайте документ fruit.html. Поместите в него форму, предлагающую пользователю выбрать любимый фрукт из предложенного списка (см. рис. 7.8). Для этого:

• · Для создания списка используйте элемент .
• · Обязательно задайте у тэга параметр name — в переменной с этим именем с будут переданы данные на сервер.

• · Каждый элемент списка опишите с помощью тэга .
• · Не забудьте закрыть элемент тэгом .
• · Добавьте в форму кнопку «Отправить данные»

Задание 7.3.

В форме, созданной в упражнении 7.8, измените элемент таким образом, чтобы список фруктов отображался в виде выпадающего списка. Установите значение, выбранное из списка по умолчанию — «Яблоки» (рис. 7.9).

Вопросы для повторения.

• 1. Для чего при создании web-страничек используют формы?
• 2. С помощью какого тэга задают форму?
• 3. Какие элементы могут находиться на форме?

Контрольное задание Создайте форму, согласно образцу.