HTML-формы

С помощью средств HTML можно создавать формы для ввода информации посетителем Web-страницы.

Тег <form>

Описание формы помещается между парными тегами <form> ... </form>. На странице одновременно может располагаться несколько форм, однако они не могут быть вложены одна в другую.

Атрибуты тега <form>

accept-charset

Список кодировок для вводимых данных, принимаемых сервером, обрабатывающим данную форму. Помогает в ситуации, когда страницы сайта в одной кодировке, а данные нужно отправить в другой. Или когда браузер неправильно автоопределил кодировку. Например: accept-charset="cp1251" или accept-charset="utf8".

action

Имя программы, которая будет обрабатывать форму.

enctype

Тип содержимого (метод кодирования).
Например, если форма содержит файлы, то enctype="multipart/form-data".
(По умолчанию enctype="application/x-www-form-urlencoded").

method

Метод передачи данных от формы обрабатывающей программе. Может принимать значения: get или post. При использовании get браузер кодирует данные, получаемые от пользователя, и добавляет к значению атрибута action парами имя=значение. Данные отделяются от значения атрибута action вопросительным знаком ( ? ). При использовании post данные передаются отдельно.

name

Имя формы. Задается для JavaScript, чтобы иметь возможность обращаться к форме по имени, а не по номеру.

novalidate

Наличие этого атрибута означает, что данные формы не должны проверяться.

onsubmit

JavaScript-обработчик проверки правильности заполнения формы. Так как JavaScript-обработчик срабатывает локально, процесс происходит достаточно быстро. Это намного лучше, чем многократно гонять данные по сети из-за того, что растяпа-пользователь в очередной раз некорректно заполнил какое-то поле.

target

Фрейм, куда отправить полученную информацию (задается во фреймосодержащих документах).

Пример

<form method="POST" action="/cgi_bin/grill.pl" onsubmit="alert('Некого посылать');return false;">
...Элементы формы...
</form>

Контейнер <form>…</form> существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.

Элементы форм

Кнопка <button>

Тег <button> задает кнопку произвольного вида.

Группа элементов формы <fieldset>

Тег <fieldset> позволяет группировать элементы формы.

Список вариантов <datalist>

Тег <datalist> задает список вариантов, которые можно выбрать при вводе информации в текстовое поле <input>.

Тег <input>

Тег <input> позволяет задавать различные элементы форм: текстовые поля, различные кнопки, переключатели, флажки.

Тег <keygen>

Тег <keygen> используется для генерации пары ключей (закрытого и открытого) для шифрования и расшифрования данных.

Метка элемента формы <label>

Тег <label> используется для задания окружающего элемент формы кликабельного текста. При щелчке мышкой на этот текст значение связанного с ней элемента формы изменится.

Заголовок группы элементов формы <legend>

Тег <legend> определяет заголовок группы элементов формы, заданной тегом <fieldset>.

Датчик <meter>

Тег <meter> является датчиком и используется для вывода значения в определенном диапазоне.

Индикатор <progress>

Тег <progress> является индикатором хода выполнения задачи.

Группа пунктов списка <optgroup>

Тег <optgroup> позволяет группировать пункты списка <select>.

Пункт списка <option>

Тег <option> определяет отдельный пункт списка <select>.

Область вывода информации <output>

Тег <output> определяет область вывода результатов вычислений.

Список <select>

Тег <select> предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько.

Текстовая область <textarea>

Тег <textarea> определяет область для ввода многострочной текстовой информации.

В конце разговора о HTML-формах хочу сделать одно замечание. Некоторые браузеры отображают элементы форм, даже если они не находятся внутри контейнера <form>…</form>. Но злоупотреблять этим не стоит, потому что:

1. в одном документе может находиться несколько форм, и именно <form>…</form> определяет, какие элементы к какой форме относятся;
2. в теге <form> задается URL обработчика формы и метод передачи данных;
3. присутствие на web-страницы элементов формы без самой формы считается невалидным и понижает шансы вашего сайта попасть в ТОП.

Читать дальше: События. Атрибуты обработки событий