✅ Элементы управления HTML-форм - 10 основных элементов HTML-формы

Введение в элементы управления HTML-формы

Введение в элементы управления HTML-формы

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

HTML Form Control

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

1) Контроль ввода текста

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

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

Однострочный ввод текста

Это позволяет пользователю вводить только одну строку данных. Типичным примером таких элементов управления вводом текста является ввод имени, поля поиска, города и т. Д.

Управление многострочным вводом текста

Этот тип управления вводом позволяет пользователю вводить данные из нескольких строк. Типичное использование таких элементов управления вводом для комментариев, адресов, описания и так далее.

Здесь строки указывают количество строк в текстовой области, а столбец col указывает количество столбцов.

Контроль ввода пароля

Как следует из названия, это обычно используется для поля пароля. Это работает так же, как поле ввода текста, но в целях безопасности текст маскируется.

2) Тип ввода Отправить

Когда тип ввода представляет отправку, он выполняет действие, определенное в действии формы, и отправляет данные формы на сервер.

Здесь значения имени пользователя и пароля будут отправлены на сервер по событию нажатия кнопки «Отправить». Действие в форме - это метод сервера, который принимает входные данные.

3) Тип входа Радио

Переключатели используются, когда вы ожидаете, что пользователи будут заполнять данные как логическое значение, или если вы ожидаете, что только один вход является истинным из нескольких вариантов. Некоторым распространенным вариантом использования переключателей является определение пола, тип сотрудника (штатный / временный) и так далее.

4) Флажок типа ввода

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

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

5) Раскрывающийся список Тип ввода

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

Например, раскрывающийся список со списком городов, в которых сотрудник может принадлежать

6) Тип входа Optgroup

Optgroup работает аналогично выпадающему списку, с той лишь разницей, что optgroup позволяет логически группировать определенные опции под одним зонтиком. Это помогает пользователю быстро определить соответствующую опцию с помощью метки optgroup.

Например, раскрывающиеся списки, в которых перечислены города разных штатов Индии, сгруппированные по штатам.

7) Fieldset

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

Например, fieldset для страницы входа

8) HTML выходной тег

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

В приведенном выше примере мы определили диапазон цен товара, например, от 0 до 100, и его можно изменить во время выполнения, другое текстовое поле со значением 12 - это налог, взимаемый с этого элемента, его также можно изменить во время выполнения. Выходной результат 58 является суммой обоих значений.

Примечание. Этот тег не поддерживается в Edge 12 или Internet Explorer более ранней версии.

9) Тип ввода Цвет

В форме часто требуется просто показать цвет вместо текста. Цвет ввода в HTML 5 позволит вам сделать это. Он показывает цвет, который вы хотите отобразить в форме. Типичный сценарий, в котором он используется, - показать состояние проекта или фазы.

Примечание . Цвет не поддерживается в некоторых версиях Internet Explorer и Edge.

10) Тип ввода Дата

Тип ввода даты обычно используется, когда поле типа даты в качестве ввода ожидается пользователем, это может быть что угодно, например, дата рождения, дата найма, дата увольнения и так далее. Он введен в HTML 5, и формат даты немного меняется со сменой браузера.

Вывод

С введением HTML 5 количество поддерживаемых элементов управления HTML значительно увеличилось. Этим элементам управления HTML-формы могут быть приданы различные эффекты и цвета с помощью CSS 3 и JavaScript / jQuery / Angular JS.
В этой статье мы рассмотрели все часто используемые элементы управления HTML-формы. Существует множество элементов управления, таких как скрытый, сброс, неделя, URL, время, электронная почта, файл, DateTime-local, image, tel, которые не были рассмотрены в этой статье. Очень важно проверить совместимость этих элементов управления в браузере, прежде чем реализовывать это в проекте, так как многие версии браузера не поддерживают элементы управления формы HTML 5.

Элементы управления HTML-форм - 10 основных элементов HTML-формы