Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.
Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.
Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.
Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.
Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.
Атрибуты формы - тег
.
Атрибут action
является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные
).
Атрибут method
определяет способ отправки содержимого формы. Существует два метода - GET
и POST
. Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET
и POST
относится к языкам обработки данных (например, PHP
). Достаточно знать, что именно метод передачи данных POST
в большинстве случаях используется в формах.
Атрибут name
тега
Сторона света - одно из четырех основных направлений:
7 Чудес света!
Сторона света - одно из четырех основных направлений:
Север
Юг
Запад
Восток
7 Чудес света!
Пирамида Хеопса
Висячие сады Семирамиды
Статуя Зевса в Олимпии
Храм Артемиды в Эфесе
Мавзолей в Галикарнасе
Колосс Родосский
Александрийский маяк
Многострочное текстовое поле - тег
Тег
Атрибут name
тега
Атрибут disabled
блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly
говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.
Можно задать ширину текстового поля в символах и высоту поля в строках при помощи атрибутов cols
и rows
соответственно.
Если содержимое поля превысит его размеры - появится бегунок.
Пример использования формы
Теперь давайте посмотрим: как работает форма.
Форма заказа обучающего видеоматериала:
Ваше имя: *
Ваш заказ:
Выберите носитель:
CD
DVD
USB Flash
Ваш E-mail: *
Ваш адрес: *
Тег
(от англ. form
- форма)
устанавливает форму на веб-странице.
Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.
Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует её использование.
Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action элемента
. Предварительно браузер подготавливает информацию в виде пары « имя=значение », где имя определяется атрибутом name элемента , а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.
Параметры перечисляются после вопросительного знака, указанного после адреса серверной программы и разделяются между собой символом амперсанда (&). Русские буквы преобразуются в шестнадцатеричное представление (в форме %HH , где HH - шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).
Допускается внутрь контейнера
помещать другие элементы, при этом сама форма никак не отображается на веб-странице, видны только элементы внутри неё.
Синтаксис
...
Закрывающий тег обязателен.
WAI ARIA
Значение role по умолчанию: form
Допустимые значения role:
none
presentation
search
Атрибуты
accept-charset - Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action - Адрес программы или документа, который обрабатывает данные формы.
autocomplete - Включает автозаполнение полей формы.
enctype - Способ кодирования данных формы.
method - Метод протокола HTTP.
name - Имя формы.
novalidate - Отменяет встроенную проверку данных формы на корректность ввода.
target - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы.
Синтаксис
...
Значения
Название кодировки, например Windows-1251 , UTF-8 и др.
Значение по умолчанию
Кодировка, установленная для страницы.
action
Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать серверная программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.
Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.
Синтаксис
...
Значения
В качестве значения принимается полный или относительный путь к серверному файлу.
Значение по умолчанию
autocomplete
Управляет автозаполнением полей форм. Значение может быть перекрыто атрибутом autocomplete у конкретных элементов формы.
Автозаполнение производит браузер, который запоминает написанные при первом вводе значения, а затем подставляет их при повторном наборе в поля формы. При этом автозаполнение может быть отключено в настройках браузера и не может быть в таком случае изменено при помощи атрибута autocomplete .
При вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать необходимое.
Синтаксис
...
Значения
on - Включает автозаполнение формы.
off - Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
enctype
Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (input type="file"), следует определить атрибут enctype как multipart/form-data .
Синтаксис
...
Значения
application/x-www-form-urlencoded - Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).
multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.
text/plain - Пробелы заменяются знаком + , буквы и другие символы не кодируются.
Значение по умолчанию
application/x-www-form-urlencoded
method
Атрибут method сообщает серверу о методе запроса.
Синтаксис
...
Значения
Значение атрибута method не зависит от регистра. Различают два метода - get и post .
get - Этот метод является одним из самых распространённых и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары « имя=значение » присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.
post - Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get , поскольку у post не установлено ограничение в 4 Кб. Большие объёмы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.
Значение по умолчанию
name
Определяет уникальное имя формы. Как правило, имя формы используется для доступа к её элементам через скрипты.
Синтаксис
...
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в атрибуте name .
Значение по умолчанию
novalidate
Отменяет встроенную проверку данных введённых пользователем в форме на корректность. Такая проверка осуществляется браузером автоматически при отправке формы на сервер и происходит для полей , , а также при наличии атрибута pattern или required .
Синтаксис
...
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
target
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить фрейм, в который будет загружаться итоговая веб-страница. Для этого используется атрибут target , в качестве его значения указывается имя фрейма. Если target не установлен, возвращаемый результат показывается в текущей вкладке.
Синтаксис
...
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента
_blank - Загружает страницу в новую вкладку браузера.
_self - Загружает страницу в текущую вкладку.
_parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .
_top - Отменяет все фреймы и загружает страницу в окне браузера; если фреймов нет, то это значение работает как _self .
Значение по умолчанию
Спецификации
Примеры
FORM
Как по вашему мнению расшифровывается аббревиатура "ОС"?
Офицерский состав
Операционная система
Большой полосатый мух
HTML-формы
являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP
, Perl
.
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы
решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3
.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
Основу любой формы составляет элемент
...
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Таблица 1. Атрибуты тега
Атрибут
Значение / описание
accept-charset
Значение атрибута представляет собой разделенный пробелами список кодировок символов
, которые будут использоваться для отправки формы, например,
.
action
Обязательный атрибут
, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # .
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
autocomplete
enctype
Используется для указания MIME
-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" .
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 .
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
method
Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
name
Задает имя формы
, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" .
novalidate
Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
target
Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента