HTML-форма и ее основные элементы

HTML—форма – это специальный модуль, предназначенный для ввода и последующей отправки на обработку каких—то данных, к примеру, логина и пароля, информации о пользователе, сообщения и т.д. Чаще всего используются следующие виды форм – регистрация, авторизация, отправка сообщения, отправка комментария, отправка письма на почту, анкета.

Вставка формы осуществляется напрямую в HTML—код страницы. Главный элемент формы называется <form>. Уже внутрь него добавляются все остальные элементы – текстовые поля, «чекбоксы», переключатели и т.д. У элемента <form> имеется несколько атрибутов, один из которых является обязательным. Он называется action. В action указывается, где именно будет приниматься и обрабатываться информация, переданная посредством формы.

Как правило, обработка происходит в стороннем PHP—файле. Пример использования атрибута– action=»obrabotchik.php«. Атрибут method позволяет задать метод передачи информации. По умолчанию (если не прописывать атрибут) будет указан метод GET. В данном случае информация передается напрямую через URL—адрес. Для каждого элемента формы будет создана пара следующего вида – «имя элемента = значение, которое в нем лежит». Все эти пары, разделенные знаком «амперсанд» будут перечислены в адресной строке.

Если прописать method=»POST» (регистр не важен), то данные будут передаваться не через URL, а через тело запроса (в скрытом режиме). В большинстве случаев используют именно POST.  Пример создания формы:

Атрибуты HTML-формы

1. Атрибут name — позволяет присвоить форме уникальное имя. Это нужно в том случае, если на одной странице размещено несколько форм.
2. Атрибут enctype — позволяет задать способ кодирования информации из формы. Обычно его заполняют только тогда, когда при помощи формы происходит пересылка файлов. Вообще, здесь может быть три варианта — enctype= application/x—www—form—urlencoded | multipart/form—data | text/plain. Первый вариант application/x—www—form—urlencoded говорит о том, что происходит пересылка закодированного текста. Третий вариант text/plain используют для пересылки текста в формате «как есть». Второй вариант  multipart/form—data используют для файлов.
3. Атрибут формы autocomplete позволяет включить так называемое автозаполнение полей.

Поля ввода в HTML — форме

Теперь расскажем о том, какие элементы может содержать в себе форма. Прежде всего, это разного рода input’ы – элементы, предназначенные для ввода данных.

Текстовое поле — type=»text»

Самый распространенный input – обычное однострочное текстовое поле. В коде оно может выглядеть следующим образом:

В атрибуте type, как вы поняли, указывается тип поля. Атрибут name – это уникальное имя поля (оно нужно для последующей обработки данных). Атрибут maxlength задает максимальную длину вводимого текста. Value – это значение поля по умолчанию (после загрузки страницы в этом поле сразу же будет прописано слово «Иван»).

 Поле для пароля — type=»password»

Еще один популярный input – поле для ввода пароля. Выглядит оно вот так:

Ключевая особенность – вводимые символы будут отображаться как звездочки.

Чекбокс — type=»checkbox»

Следующий элемент – чекбокс. В коде он может выглядеть примерно так:

Атрибут type здесь также задает тип. ID – это уникальный идентификатор, может использоваться для привязки к чекбоксу CSS—правил или текстовой надписи. Value – это значение, посылаемое на обработку в том случае, если в чекбоксе поставлена галочка. Атрибут checked автоматически ставит галочку в чекбоксе сразу при загрузке страницы. У checked не нужно указывать значение, так как оно совпадает с именем атрибута.

Надпись над элементом — тег label

Следующий элемент – текстовая надпись (элемент label). Как правило, текст привязывают к какому—то уже существующему input’у. В этом случае надпись может выглядеть вот так:

Атрибут for осуществляет непосредственную привязку текста к элементу с id=»ch» (в нашем случае это чекбокс).

Переключатель — type=»radio»

Еще один интересный элемент – это радиопереключатель. Обычно его вставляют в форму, что бы предоставить пользователям возможность выбора из нескольких равнозначных вариантов. Конструкция, приведенная ниже, создаст радиопереключатель из двух input’ов.

Атрибут type задает тип input’а. Name – это имя. Все input’ы в пределах одного переключателя должны иметь одно имя, иначе форма не свяжет их друг с другом. Value –это значение, передающееся при выборе того или иного элемента. Атрибут checked позволяет установить один и только один из элементов в включенное по умолчанию состояние.

Выпадающий список — тег select

Элемент формы select позволяет создать выпадающий список. У него есть несколько атрибутов. Name задает уникальное имя. Size задает количество элементов, отображающихся в списке одновременно (при загрузке страницы). По умолчанию size=1. Атрибут без значения multiple позволяет выбирать сразу несколько элементов, предварительно зажав клавишу Ctrl. Чтобы создать непосредственные элементы списка, используется тег option. Текстовое содержимое данного тега будет отображаться в качестве элемента. При указании атрибута value внутри options на обработку будет передано его значение. Атрибут selected позволяет сделать выбранный элемент списка текущим (по аналогии с checked он будет выделен сразу при загрузке страницы). Несколько элементов можно объединить в группу, присвоив ей какое—то название. Делается это посредством тега optgroup, внутрь которого вставляются нужные option. Атрибут label задает группе название. Ниже приведен пример сгруппированного списка.

 Многострочное текстовое поле — тег textarea

Довольно часто в формах используется многострочное текстовое поле. Обычно это делается при отправке почтовых сообщений и комментариев. Элемент, создающий такое поле, называется textarea. Вся конструкция может выглядеть примерно так:

Атрибут maxlength задает максимальное количество символов, вводимых в поле. Атрибуты rows и cols – это число строк и символов в строке соответственно. Стоит помнить, что размеры формы не являются фиксированными – ее всегда можно расширить. Однако при загрузке страницы она будет появляться именно с размерами, указанными в rows и cols.

Кнопки в HTML — форме

Последние элементы, о которых мы поговорим – это кнопки. Типичная кнопка отправки формы может выглядеть так:

В атрибуте value указывается надпись, которая будет отображаться на кнопке. Что касается type, то здесь может быть несколько вариантов. Submit создает кнопку подтверждения и отправки данных. Reset создает кнопку сброса всех введенных полей в изначальное состояние. Button создает кастомную кнопку без привязанного к ней действия по умолчанию (впоследствии можно будет навесить на нее какой—нибудь скрипт). Image также создает кастомную кнопку, у которой вместо текста будет использоваться изображение. Путь к изображению необходимо указать в атрибуте src.