Формы - элемент взаимодействия пользователя с сайтом

Для взаимодействия сайта с пользователем применяется тег <FORM>. Назначение тега передать данные, введенные пользователем в поля формы, на сервер сайта, для дальнейшей обработки. Применение форм позволяет создавать форумы, гостевые книги и многое другое. Для обработки данных форм используют языки программирования, такие как PHP или Perl.

Формат представления:

<form action="Обработчик данных">

Поля формы:

<input> - Используется при создании простых полей.

<select> - Списки для выбора пользователем.

<textarea> - Многострочные текстовые поля.

</form>

Атрибуты:

action - Обработчик данных - файл, написанный на любом языке web-программирования. Так как нет возможности использовать PHP то примеры показывают внешний вид полей формы без отправки их обработчику.

enctype - Принимает значение "multipart/form-data" для передачи данных обработчику. Если нет возможности использовать программу обработки формы можно организовать передачу данных на почтовый ящик. В этом случае атрибуту action задают адрес электронной почты в формате "mailto:Адрес получателя", а encode присваивается значение "text/plain". mailto: является ключевым словом и адрес должен в обязательном порядке начинаться с него. После отправки формы откроется почтовый клиент пользователя с предложением отправить данные формы в письме. В письмо будет вложен текстовый файл с названием и значением полей формы (название поля= значение поля).

method - Метод отправки данных формы. При передаче данных используются два метода GET и POST (значения атрибута). Использование этих методов обусловлено объемом передаваемых данных и отличаются только способом передачи данных формы.

Метод  GET - Данные передаются на сервер через адресную строку браузера. Поля формы добавляются к адресу символом ? и разделяются символом & ("обработчик?Par1=1&Par2=2" - где Par1 имя поля а после знака = его значение). Используется для отправки простых форм.

Метод  POST - Данные формы передаются в теле сообщения, а не через заголовок, как в предыдущем методе. По этому метод POST применяют при передаче больших объемов данных.

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

Атрибуты тега INPUT:

type - Задает тип используемого поля.

name - Имя поля формы. Должно быть уникально для формы и необходим обработчику для обработки полей.

disable - Запрещает изменять значение пользователем.

value - Значение, которое будет передано обработчику. Для текстовых полей определяет значение по умолчанию.

Разные типы полей имеют свой набор атрибутов.

Текстовое поле

Предназначено для ввода текста одной строкой. Если текст не помещается в окне поля, то производится скроллинг.

Атрибуты:

type - принимает значение "text".

MaxLenght - Определяет максимальное количество символов которое можно ввести в строку.

Size - Определяет видимый размер поля.

Ввод пароля

При введении пароля на экране вместо символов вводимых пользователем выводится знак "*" (или другим символом, в зависимости от системы).

type - принимает значение "password".

Кнопки

Для создания простой кнопки атрибуту type задаем значение "button". Простые кнопки создаются для того что бы разделить форму (если она большая) на несколько разделов с промежуточной проверкой введенных данных.

Переключатели

Переключатели используются если пользователю предоставлены варианты ответов на вопрос и просто необходимо выбрать один из них.

Флажки

Флажки используются в случае если необходимо выбрать несколько вариантов из предложенных.

Поле ввода файла

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

Скрытые поля

Скрытые поля используют для передачи служебной информации (к примеру идентификатор пользователя в системе). Такие поля не выводятся на экран и пользователь их не видит, но они передаются обработчику. Полю присваивается тип "hidden" и в обязательном порядке задаются имя и значение, которые будут переданы обработчику.

Списки выбора

Списки дают возможность компактного размещения элементов формы. Для организации списка используется тег <select> который является контейнером в который помещаются элементы списка.

Формат представления:

<select name="Имя списка" size="1">

<option value="Значение">Название элемента</option>

...

</select>

Атрибуты:

name - Имя списка передаваемое обработчику.

size - Размер списка. Если задать размер 1 то будет отображаться выпадающий список. Если размер больше 1 то будет выводится вертикальный список указанной размерности. Если элементов списка меньше - будут добавлены пустые строки. Если элементов списка больше чем размер списка то появляется вертикальная полоса прокрутки. Ширина списка устанавливается по ширине самого широкого элемента.

multiple - Имеет единственное значение multiple (в IE-8 значение не обязательно). Если установлен атрибут то пользователь может выбрать несколько элементов списка. Необходимо после выбора первого элемента удерживать клавишу Ctrl и добавлять элементы.

selected - Используется для тега option и указывает выбранный элемент по умолчанию.

value - Используется для тега option и определяет значение передаваемое обработчику при выборе этого элемента.

Многострочные текстовые поля

Для написания комментариев, сообщений или больших текстов используется тег <textarea>. Тег является контейнером, в который помещают выводимый в окне текст.

Формат представления:

<textarea атрибуты="значение атрибута">Текстовая информация</textarea>

Атрибуты:

cols - Ширина поля, количество видимых символов.

rows - Высота поля, количество видимых строк.

readonly - Запрещает изменять текст. Значения не требуется.

warp - Определяет как будет осуществляться перенос текста в окне и в каком виде передавать на сервер.

Значения атрибута warp:

hard - При достижении границы окна автоматически происходит перенос слова на следующую строку. Передача на сервер осуществляется с такой же установкой переносов.

soft - При достижении границы окна автоматически происходит перенос слова на следующую строку. При передаче на сервер перенос строк указывается только в тех местах где нажата клавиша "Enter".

off - Перенос осуществляется только при нажатии клавиши "Enter". В окне есть горизонтальная полоса прокрутка для просмотра длинных строк.