Перевод статьи «6 Form Related HTML Tags You Might not Know».
В 2014 году HTML5 получил одобрение W3C и добавил много новых тегов. Некоторые из них, такие как <main>, <nav>, <header> или <footer>, являются семантической заменой повсеместно использовавшегося <div>. Об этих тегах говорили повсюду, но целый ряд других получил куда меньше внимания. Давайте рассмотрим 6 HTML-элементов (имеющих отношение к формам), о которых вы, возможно, еще не знаете.
Индикатор выполнения задачи
Когда вы создаете форму с возможностью загрузки файла, стоит показывать пользователю, какая часть файла уже загрузилась. Это существенное улучшение пользовательского опыта.
Вы можете подумать: «Ладно, создам div и добавлю анимацию фона, привязанную к прогрессу выполнения загрузки».
Можно и так. Но для вывода индикатора выполнения задачи у нас есть специальный HTML-тег — <progress>! Он появился вместе с другими HTML5-элементами. Давайте посмотрим, как он работает.
See the Pen Input File + progress tag by Albert (@walickialbert) on CodePen.
Как видите, здесь очень простой макет с базовым CSS. Также здесь есть JavaScript-код для симулирования загрузки файла.
Почитать подробнее о стилизации <progress> можно здесь.
Уникальные атрибуты
Этот элемент имеет два атрибута:
max— определяет, сколько работы вообще требуется для завершения задачи. Если установлен атрибут max, его значение должно быть больше 0. По умолчанию значение равно 1.value— определяет, какая часть задачи уже выполнена.
Список вариантов
Элемент <datalist> предназначен для предоставления рекомендованных вариантов ввода. Пользователь может выбрать одну из предлагаемых опций или же ввести собственный ответ. Этот элемент используется браузерами для создания функции автодополнения.
See the Pen Datalist example by Albert (@walickialbert) on CodePen.
Тег <datalist> — невидимый помощник для ваших input-ов. Вы можете динамически добавлять в него опции, делая их персонализированными для каждого пользователя приложения.
Использование
Единственное, что нужно помнить о <datalist>, это что его id должен совпадать со значением атрибута list тега <input>. Благодаря этому браузер будет знать, что данный <datalist> относится к <input>.
Группирование элементов формы
Элемент <fieldset> группирует несколько полей ввода внутри одной формы, а элемент <legend> группирует связанные элементы. Его можно считать чем-то вроде <label>, но не для одного элемента, а для нескольких.
Эти два элемента — <fieldset> и <legend> — могут использоваться совместно, чтобы сначала сгруппировать часть формы, а затем добавить ей общий ярлык.
See the Pen Fieldset and Legend example by Albert (@walickialbert) on CodePen.
Output
Элемент <output> — один из моих самых любимых не слишком известных HTML-тегов. Этот элемент может вставлять результаты вычислений, осуществляемых пользователем.
В моем примере есть два поля ввода с типом number и один — с типом range. Математическая формула выглядит следующим образом: (a * b) + c = d
See the Pen Output html example by Albert (@walickialbert) on CodePen.
Optgroup
Этот HTML-тег позволяет группировать варианты выбора. Например, если у вас есть возможность выбора страны, можно сгруппировать опции по континентам.
See the Pen Optgroup example by Albert (@walickialbert) on CodePen.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
Ну, что? поздравляю с хорошим кодом