Тег form в html
Тег form добавляет контейнер для размещения элементов управления, с которыми пользователи могут взаимодействовать, чтобы отправить информацию на сервер. Форма используется для сбора информации о посетителях сайта, комментариев, мнений и многого другого. А также для авторизации на некоторых сайтах.
Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method . Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.
Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST , потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET .
Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:
- button: кнопка, при нажатии которой могут выполняться различные действия в зависимости от значения атрибута type . А именно:
- submit: отправляет данные формы на сервер;
- reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
- button: не выполняет никаких действий;
- menu: выводит меню.
- fieldset: группирует наборы элементов управления по определенному критерию;
- input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:
- hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
- text: элемент управления, используемый для ввода фрагмента текста одной строкой;
- search: используется для ввода поисковой строки;
- tel: элемент управления тега form , используемый для предоставления номера телефона;
- url: текстовое поле, используемое для ввода одного абсолютного URL-адреса ;
- email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
- password: текстовое поле для ввода паролей, в котором символы скрыты точками;
- datetime: элемент управления для ввода даты и времени;
- date: элемент управления для ввода определенной даты;
- month: элемент управления для ввода определенного месяца;
- week: элемент управления для ввода определенной недели;
- time: элемент управления для ввода о времени;
- number: элемент управления для ввода определенного числа;
- range: для ввода одного или двух чисел в указанном диапазоне;
- color: для ввода цвета;
- checkbox: для ввода логического значения ( истина / ложь );
- radio: элемент управления, используемый для выбора одного из нескольких вариантов;
- file: элемент управления, используемый для загрузки файлов на сервер;
- submit: кнопка для отправки данных HTML тега form ;
- image: то же самое, что submit , но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
- reset: кнопка, используемая для сброса значений элементов управления формы;
- button: кнопка без назначенного действия по умолчанию.
- keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
- label: используется для вывода подписей для элементов управления формы;
- object: объект представления и отображения вложенного контента;
- output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
- select: элемент управления для выбора одного или нескольких вариантов из списка;
- textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
- img: используется для вывода изображения.
Формы являются мощным инструментом, который не только помогает собирать ценную информацию о пользователях, но и позволяет разработчикам создавать сложные приложения.
Атрибут name этого элемента был удален из предыдущих версий стандарта. В HTML5 он был вновь восстановлен, чтобы дать возможность авторам ссылаться на форму по ее имени.
Примеры
В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.
В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.
Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.
Во втором примере мы добавим в тег form новые элементы управления ( пару переключателей и три чекбокса ). Мы также добавим кнопку reset , чтобы вы могли поэкспериментировать с элементами управления, изменяя их значения и снова сбрасывая с помощью кнопки.
Также мы будем использовать элемент label . С его помощью мы можем связать текст с элементом управления. Самый простой способ сделать это — заключить и текст, и элемент управления в открывающийся и закрывающийся тег.
Gender:
Interests:
В следующем примере мы немного изменим предыдущий HTML тег form форму, чтобы добавить некоторые из новых элементов управления HTML5 : выбора даты, поле ввода номера телефона и выбор цвета. Кроме этого мы сгруппируем элементы управления с помощью fieldset .
Поддержка браузерами новых элементов управления HTML5 пока еще не является полной. В большинстве случаев вместо неподдерживаемых элементов выводятся резервные текстовые поля, поэтому не следует полагаться на валидность этих полей.
Обратите внимание, что мы используем для атрибута method значение » GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.
Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&. » .
И, наконец, мы создадим тег form с возможностью загрузки файла. В этом примере нам нужно обратить внимание на пару атрибутов: method , который может принимать только значение » POST «, так как это единственный метод, который может передавать двоичные данные. И enctype , который должен иметь значение » multipart/form-data «. Если данная настройка не соблюдается, загрузка файлов будет невозможна.
Кроме этого, наша форма должна содержать поле для выбора загружаемого файла через проводник.
Атрибуты
Специальные атрибуты тега form :
ACCEPT-CHARSET
Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.
ACTION
URI , указывающий местоположение скрипта, отвечающего за обработку данных, передаваемых через форму. Этот скрипт написан на языке, исполняемом на стороне сервера: ASP , PHP , Python и т.д.
AUTOCOMPLETE
Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:
- on: браузер должен автоматически предлагать варианты. Это значение по умолчанию;
- off: браузер не должен автоматически предлагать варианты.
ENCTYPE
Значение, указывающее метод, который будет использоваться для кодирования данных при отправке формы. Возможны три значения, которые не зависят от регистра:
- application/x-www-form-urlencoded: пробелы заменяются знаком плюс ( «+» ), а специальные символы преобразуются в значения HEX . Это значение по умолчанию;
- multipart/form-data: кодирование не производится. Указывается при загрузке файлов;
- text/plain: только пробелы заменяются знаком плюс ( «+» ).
Помните, что вы должны использовать значение «multipart/form-data», когда в теге form присутствует поле для загрузки файлов. Без него загрузка файлов не сможет быть выполнена.
METHOD
Метод, который должны использовать браузеры для отправки данных формы. Возможны три значения, без учета регистра:
- get: данные прикрепляются к URL-адресу ( указанному в атрибуте action ). Пары имя-значение добавляются в виде » name=value » и отделяются одна от другой знаком амперсанда ( «&» ). Вся строка добавляется к URL-адресу после знака вопроса ( «?» ). Например, строка GET может выглядеть следующим образом: «form-result.php?user=john&pass=123456» ;
- post: данные прикрепляются к телу запроса;
- dialog: специальное значение для HTML тег form внутри элемента dialog . Указывает браузеру закрыть диалоговое окно после отправки формы. Результаты должны обрабатываться с помощью скриптов.
NAME
Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.
Этот атрибут тега form был удален из предыдущих версий стандарта. В HTML5 он был восстановлен, чтобы дать возможность ссылаться на форму в наборе форм по ее имени.
NOVALIDATE
Логическое значение, указывающее браузеру не производить валидацию данных формы после отправки данных. Если этот атрибут принимает значение » NOVALIDATE » или пустую строку ( » » ),браузер должен пропустить валидацию формы.
TARGET
Значение указывающее, где должны отображаться результаты обработки данных скриптом. Это значение может быть именем окна или любым из следующих значений ( без учета регистра ):
- _blank: в новом окне / вкладке;
- _parent: непосредственно в родительском контексте;
- _self: в текущем окне;
- _top: в главном окне.
Атрибут тега form target был удален из предыдущих версий HTML , но был восстановлен в HTML5 , так как он стал использоваться с элементом iframe .
ACCEPT
Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.
Атрибут accept формы был удален из HTML5, так он является излишним. Вместо этого авторы должны использовать атрибут accept в элементах управления.
Вадим Дворников автор-переводчик статьи « FORM ELEMENT »