Формы представляют собой наиболее важные интерактивные элементы HTML,
позволяющие разработчикам страниц интерактивно взаимодействовать с
посетителями. С их помощью пользователь может возвращать комментарии по
поводу посещения определенного узла, пересылать запросы или
регистрироваться.
Разработчик задает вопросы, создавая форму, а пользователь отвечает на
них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов.
Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM></FORM>:
Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты:
method Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
action Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
enctype Этот атрибут определяет способ
кодирования содержимого формы. Другими словами он сообщает браузеру о
способе кодирования информации перед отсылкой серверу. По умолчанию
используется значение x-www-form-encoded.
Синтаксис формы для сценария: <FORM method="get" или "post" action="URL сценария" ></FORM>
Синтаксис формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>
Элемент <INPUT> является базовым для всех элементов
формы. Он используется для внедрения в форму кнопок, графических
изображений, флажков, переключателей, паролей и текстовых полей.
Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:
TEXT Однострочное текстовое поле, используется для
ввода информации, которую нельзя ввести ни в одном из остальных
элементов формы. Сюда вводятся имена, адреса, должности, телефоны,
хобби, и данные практически любого типа. Элемент может иметь атрибуты:
maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
size. Задаёт максимально допустимую длину поля в символах.
value. Задаёт значение по умолчанию, которое можно менять.
HIDDEN Еще один тип скрытого ввода
информации. Позволяет пересылать сценариям информацию, которая не может
быть изменена пользователем. Некоторые программы CGI используют
скрытые поля для передачи информации из одной страницы в другую,
например, имя или номер. Такой подход существенно облегчает работу
пользователя, избавляя его от необходимости повторного ввода данных.
Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
<INPUT type="HIDDEN" name="file" value="anyfile.html">
CHECKBOX Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
checked. Задаёт начальный статус флажка по умолчанию.
value. Задаёт значение по умолчанию, которое можно менять.
RADIO Переключатели во многом напоминают
флажки, отличаясь лишь более широкими функциональными возможностями
выбора. В группе переключателей может быть выбран лишь один. Для каждого
переключателя указывается отдельный элемент INPUT.
Пример:
Visa <INPUT type="radio" name="payment_type" value="visa">
Mastercard <INPUT type="radio" name="payment_type" value="mastercard">
American Express <INPUT type="radio" name="payment_type" value="AmEx" checked>
SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения.
Синтаксис:
<FORM method="get" или "post" action="mailto:name@domen.ru" >
<INPUT type="submit" value="послать"></FORM>
Пример:
RESET Кнопка используется для восстановления
значений, заданных по умолчанию. Если значение по умолчанию не
предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в
зависимости от других элементов. Имеет так же атрибут value.
IMAGE Во многом похож на кнопку SUBMIT,
только в качестве кнопки используется изображение. Одним из преимуществ
является возможность передачи координат щелчка пользователя, что
позволяет организовать карту изображений. Элемент может иметь атрибуты:
src. Задаёт URL файла с изображением.
align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.
name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.
Синтаксис: <INPUT type="image" src="knopka.gif">
Пример:
BUTTON Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.
Синтаксис: <INPUT type="button"value="кнопка"> Пример:
FILE Создает управляющий элемент выбор файла.
Синтаксис: <INPUT type="file"> Пример:
ACCESSKEY Задает кнопку, при нажатии которой происходит обработка поля.
Синтаксис: <INPUT accesskey="a"> Пример: нажмите Alt+a:
ID Задает имя для ссылки.
Синтаксис: <INPUT id="имя">
SIZE Задает ширину элемента в пикселях.
Синтаксис: <INPUT size="число">
DISABLED Отключает возможность изменять содержимое поля или положение кнопки.
Синтаксис: <INPUT disabled">
Пример:
Элемент <TEXTAREA>.
Элемент <TEXTAREA> При помощи этого элемента создается
область для ввода и просмотра текста. Может использоваться и не в
составе формы, а как самостоятельные детали страницы. Область ввода
помогает сэкономить место благодаря полосам прокрутки.
Может иметь атрибуты:
name. Задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
rows. Задаёт высоту области в строках.
cols. Задаёт ширину области в символах.
Синтаксис:
<FORM><H3>Введи текст
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста
</TEXTAREA></H3> <INPUT type="reset" value="очистка"></FORM>
Пример:
Элемент <SELECT>.
Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:
name. Задаёт имя.
size. Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
multiple. Задаёт возможность одновременного выбора нескольких значений.
Элемент <OPTION>.
Элемент же <OPTION> задает возможные варианты выбора меню <SELECT> Синтаксис: <OPTION value="n" selected>значение имеет атрибуты:
selected. Задаёт изначально выбранное слово.
value. Задаёт значение выбранного слова для сценария.
Элемент <ISINDEX>Это самый простой элемент, позволяющий создать подобие формы и ввода строки, содержащей текст и генерации запроса.
Пример: <ISINDEX prompt=" строка для ввода критерия поиска">
Допустим, что на текущей странице задан базовый URL при помощи элемента <BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3,
то браузер сформирует и отошлет запрос для поисковой машины сервера в виде: http://www.название.домен/?слово1+слово2+слово3
Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен.
Элемент <BUTTON>.
Элемент <BUTTON> является альтернативой элементу <INPUT> с более богатыми возможностями - например, с заданием альтернативного
текста.
Синтаксис: <BUTTON ><IMG src=...> </BUTTON>
name задает имя элементу.
value задает значение элементу.
type при использовании в качестве кнопки принимает значения: button, submit и reset.
disabled делает недоступным данный элемент
tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.
Элемент <LABEL> применяется для альтернативного задания информации для управляющих полей формы.
Поддерживает атрибут for, который связывает элемент <LABEL> с другим элементом формы, а значение атрибута for должно
совпадать со значением атрибута id связанного управляющего элемента.