Полное руководство по элементам HTML-формы

1
6456
Добавить в избранное

Создание HTML-формы – неотъемлемая часть сайта и важный навык веб-разработчиков. Используйте это руководство для изучения элементов HTML-форм.


HTML-формы

Введение

HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.

Примечание: В примерах ниже уже заданы CSS стили, поэтому они отличаются от того, что получится у вас. CSS файлы можно скачать отсюда:

Элемент Form

Элемент Form (<form></form>) оборачивает все элементы внутри HTML-формы.

Атрибуты:

  • action – это веб-адрес (URL) программы, которая обрабатывает данные формы.
  • Method – это HTTP метод, который используется браузером для отправки формы.
  • Возможные значения: POST или GET. POST – отправляет данные формы на сервер.
    GET – данные отправляются внутри URL, параметры разделяются знаком «?».

Примечание: Нельзя создать форму внутри формы. То есть использование элемента <form> внутри другого элемента <form> недопустимо.

Элемент Input

Это самый популярный элемент HTML-формы. Используется для создания текстовых полей, в которые пользователь вводит информацию (например: пароль, адрес почты и т. д.).

Создадим текстовое поле, в которое пользователь сможет ввести свое имя.

В примере выше над тегом input были добавлены три атрибута.

type

Указывает на тип ввода. При значении text пользователь должен вводить текстовые данные. У этого атрибута имеется множество значений, например, email, tel (для номера телефона), password и т. д.

Пример: при попытке зайти в свой профиль на сайте (Amazon/Netflix) необходимо указать почту и пароль. Для этих целей используется элемент input. Атрибуты type будут иметь значения email и password соответственно.

id

Это не обязательное, но весьма полезное поле HTML-формы. Например, для определения элементов в CSS/JavaScript. Идентификаторы используются для сопоставления меток с нужными элементами управления формой.

name

Обязательный атрибут. При передаче HTML-формы в серверный код сервер должен интерпретировать данные из формы и правильно их обработать.

placeholder

Атрибут подсказывает пользователю, что именно необходимо ввести в поле ввода HTML-формы. Исчезает, как только пользователь начинает печатать в поле.

Примечание: Использование разных значений в атрибуте type выводит разный результат:

Элементы input без placeholder:

HTML-формы

Элементы input с placeholder:

HTML-формы

Элемент textarea

Иногда одной строки текста бывает недостаточно, а простой элемент input совершенно не подходит. Например, на некоторых сайтах добавляются формы, в которых пользователи оставляют свои отзывы и задают вопросы. В таких случаях лучше прибегнуть к элементу textarea.

Элемент <textarea> не является самозакрывающимся тегом, поэтому требует открывающей и закрывающей скобки.

Атрибуты:

  • id – см. <input/>.
  • name – см. <input/>.
  • cols – задает видимую ширину текстовой области.
  • rows – задает видимое количество строк в текстовой области.

HTML-формы

Примечание: В большинстве браузеров можно изменять размер элемента.

Элемент button

Один из важнейших элементов HTML-формы. Без кнопки вы не сможете отправить и обработать данные формы на сервере.

В элементе задается атрибут type, который может принимать три разных значения: submit, reset и button.

Атрибуты:

  • type=”reset” – при нажатии очищает все данные формы.
  • type=”button” –  в нем нет какого-то стандартного поведения. В основном используется в JavaScript для программирования настраиваемого поведения.
  • type=”submit” – стандартное поведение кнопки «Отправить», т. е. передача данных на сервер.

HTML-формы

Элемент label

Пока что пользователь не сможет понять, для чего нужен каждый элемент HTML-формы. Вы не можете предугадать, куда вводить адрес почты, а куда – пароль. Формы смотрятся недоделанными и непонятными.

Каждую строку HTML-формы можно отметить элементом label.

Наиболее популярным атрибутом label является for.

Атрибуты:

for – связывает метку строки с определенным элементом формы. Соответствие проверяется по ID. Значением атрибута ID для элемента input в примере выше является email. Оно совпадает со значением атрибута for для элемента label. Таким образом, оба элемента связаны.

HTML-формы

Примечание: если навести мышкой на метку (название строки), то активируется поле ввода, связанное с данной меткой Это стандартное поведение элемента.

Меню select

Иногда требуется создание HTML-формы, в которой пользователь будет выбирать определенные значения.

Для экономии места в интерфейсе рекомендуется выносить все списки длиннее 4-5 пунктов в меню select.

Пример: форма для поступления в университет, в которой студенты выбирают нужный профиль подготовки.

Элементу <select> нужны открывающие и закрывающие теги.

<select> отображает выпадающее меню с заданными значениями. Сам по себе элемент select не выполняет никаких действий, т.к. ему нужны дополнительные теги (элементы option). Здесь можно провести параллель с тегом <ul>, которому необходимы элементы <li>.

Атрибуты:

  • name – см. <input/>.
  • <option> – вариант выбора из меню select. Использует атрибут value.

value – при отправке формы на сервер каждый элемент обладает определенным значением (value) для текстовых полей и областей. Иными словами, value – это все, что пользователь указывает в поле. Но при создании меню select с готовыми опциями необходимо заранее определять в них value.

HTML-формы

Для формы выбора курса также задается элемент label. Кроме того, списки можно упорядочить по логическим группам. Для этих целей используется элемент <optgroup>.

Атрибуты:

label: – название группы опций (вариантов). В примере ниже варианты выбора делятся на две группы с меткой Engineering (Проектирование) и Management (Управление).

Радиокнопки

Меню select – это идеальное решение для HTML-формы с объемным списком. Однако при наличии 5 и менее вариантов выбора, лучше реализовать их через радиокнопки.

В отличие от меню select, радиокнопки (radio button) сразу показывают все доступные опции. Пользователь по-прежнему может выбрать только один вариант.

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.

Примечание: При выделении одного варианта и попытке выделения другого первый выбор удалится. Это реализуется благодаря атрибуту name, в котором прописана принадлежность этих двух радиокнопок к одной группе.

HTML-формы

Примечание: Внутри одной группы радиокнопок атрибут name должен быть одинаковым.

Чекбоксы

Иногда необходимо создать некую группу различных вариантов, из которых пользователь сможет выбрать несколько. С этим помогут чекбоксы.

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.
  • checked – отметка о предвыборе данного варианта, т.к. по умолчанию у чекбоксов нет выбранного значения. Важно помнить, что это логический атрибут (boolean).

В примере ниже каждый отдельный вариант использовался с метками (элементом label). Для объединения чекбоксов и меток внутри HTML-формы использовался атрибут for для label и атрибут id для checkbox.

Примечание: поскольку кликать по маленьким чекбоксам неудобно, лучше оборачивать элемент <label>  вокруг каждого чекбокса. Тогда при клике в области метки выделение чекбокса будет добавляться или сниматься. Однако в примере ниже этого не сделано.

HTML-формы

Отличия чекбоксов от радиокнопок HTML-формы

Чекбокс может существовать сам по себе. Радикнопки появляются только в качестве группы (минимум 2 кнопки).
В отличие от радиокнопки выбор чекбокса не является обязательным.

Конечный результат

HTML-формы

В статье было представлено пошаговое руководство по созданию HTML-формы. Не старайтесь запомнить все и сразу – ни один разработчик не сможет назвать каждый атрибут или элемент. Гораздо важнее научиться ориентироваться в документации.

Вы можете добавить в эти примеры CSS и создать собственные формы.

Перевод статьи Abhishek Jakhar: A step-by-step guide to getting started with HTML forms

Другие статьи по теме:

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




1 комментарий

Оставьте комментарий