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

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

Вставка формы осуществляется напрямую в HTMLкод страницы. Главный элемент формы называется <form>. Уже внутрь него добавляются все остальные элементытекстовые поля, «чекбоксы», переключатели и т.д. У элемента <form> имеется несколько атрибутов, один из которых является обязательным. Он называется action. В action указывается, где именно будет приниматься и обрабатываться информация, переданная посредством формы. Как правило, обработка происходит в стороннем PHPфайле. Пример использования атрибутаactionobrabotchik.php«. Атрибут method позволяет задать метод передачи информацииПо умолчанию (если не прописывать атрибут) будет указан метод GET. В данном случае информация передается напрямую через URLадрес. Для каждого элемента формы будет создана пара следующего вида – «имя элемента = значение, которое в нем лежит». Все эти пары, разделенные знаком «амперсанд» будут перечислены в адресной строке. Если прописать methodPOST» (регистр не важен), то данные будут передаваться не через URL, а через тело запроса (в скрытом режиме). В большинстве случаев используют именно POST.  Пример создания формы:

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

  1. Атрибут name  позволяет присвоить форме уникальное имя. Это нужно в том случае, если на одной странице размещено несколько форм.
  2. Атрибут enctype  позволяет задать способ кодирования информации из формы. Обычно его заполняют только тогда, когда при помощи формы происходит пересылка файлов. Вообще, здесь может быть три вариантаenctypeapplication/xwwwformurlencoded | multipart/formdata | text/plain. Первый вариант application/xwwwformurlencoded говорит о том, что происходит пересылка закодированного текста. Третий вариант text/plain используют для пересылки текста в формате «как есть». Второй вариант  multipart/formdata используют для файлов.
  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 осуществляет непосредственную привязку текста к элементу с idch» (в нашем случае это чекбокс).

Переключатель — 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.

Добавить комментарий

Ваш e-mail не будет опубликован.