Формы в html предназначены для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Для отправки формы на сервер используется кнопка SUBMIT, такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы. Когда html форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки — Perl, PHP, С.
Для указания браузеру, где начинается и заканчивается html форма, используется тег FORM. Между открывающим и закрывающим тегами < FORM> и < /FORM> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. В документе допускается наличие любого количества форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине формы не должны быть вложены одна в другую.
<form action=mail.php>
В какой версии HTML появился элемент canvas?
<input type=radio name=answer value=а1>XHTML Basic 1.1
<input type=radio name=answer value=a2>HTML 4.01 Transitional
<input type=radio name=answer value=аЗ>HTML 5
<input type=submit value="Проверить">
</form>
Атрибуты тега FORM приведены ниже:
action — указывает обработчика, к которому обращаются данные формы при их отправке на сервер, в качестве обработчика может выступать CGI-программа или HTML-документ, а так же можно указать адрес электронной почты, начиная его с ключевого слова maiito.
enctype — устанавливает тип для данных, отправляемых вместе с формой.
method — этот параметр сообщает серверу о цели запроса, используют два основных метода: GET и POST:
get — этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке.
post — посылает на сервер данные в запросе браузера, что позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб.
target — после обработки формы данные возвращаются в виде html-документа, а с помощью этого атрибута можно определить окно, в которое будет загружаться итоговая веб-страница. Имя окна задаётся параметром NAME.
_blank — загружается в новом окне браузера;
_self — загружает страницу, возвращаемую обработчиком формы в текущее окно;
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self;
_top — отменяет все фреймы, если они имеются, и загружает страницу в полном окне браузера, в противном случае этот параметр работает как _self.
Элементы форм
Форма представляет собой лишь контейнер для размещения объектов, которые дублируют элементы интерфейса операционной системы: кнопки, поле со списком, переключатели, флажки и т.д.
Текстовое поле
Текстовое поле предназначено для ввода символов с клавиатуры. Различают три элемента формы, которые используются для этой цели, — однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле:
Однострочное текстовое поле — такое поле предназначено для ввода пользователем строки текста. Размер поля можно ограничить по ширине, но это делается больше для удобства дизайна, чтобы элемент можно было вместить в отведенное для него место. Текст при ограничении ширины поля можно писать как обычно, но при наборе введенные ранее символы скрываются.
maxlength — максимальное количество символов, разрешенных при наборе текста, если этот параметр опустить, то число вводимых символов неограничено.
name — имя поля, предназначено для того, чтобы обработчик формы мог идентифицировать поле.
size — ширина поля, физический размер зависит от настроек операционной системы и выбранного браузера.
value — начальный текст, содержащийся в поле.
Пример использования текстового поля приведен ниже:
Ширина текстового поля — величина нестабильная и в разных браузерах может меняться в небольших пределах. Для html формы, которая располагается в колонке ограниченной ширины, подобные изменения приводят к нарушению исходного макета. В этом случае лучше вообще отказаться от использования параметра size и заменить его стилями. К тому же CSS позволяет изменять цвет фона(background), тип шрифта(font) и рамки вокруг поля(border).
С применением стилей может выглядеть, примерно так:
Поле для ввода пароля — обычное текстовое поле, вводимый текст в котором отображается звездочками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Параметры поля для пароля аналогичны параметрам текстового поля. Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить права доступа.