Полоса прогресса, бегущая строка и автокомплит с использованием только HTML

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Читать в полной версии →

В этом посте я хотел бы поведать вам о нескольких HTML-тегах, которые позволят добавить несколько полезных (или не очень 😁) нативных функций без использования JavaScript или фреймворка Bootstrap.

Полоса прогресса

Довольно полезный компонент, который мы часто видим при вводе нового пароля. В Bootstrap она реализуется так. А что там в HTML? Тег progress — вот ответ на вопрос.

Тег progress легко настраивается и имеет хорошую поддержку во всех современных браузерах.

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

Выше я писал про пароли, но для них всё же лучше использовать не progress, а meter, так как с точки зрения семантики это более верный вариант, ведь тег meter показывает уровень заполнения, а не степень прогресса.

Имеет несколько полезных атрибутов для настройки его отображения и поддерживается всеми браузерами, кроме Internet Explorer.

Бегущая строка

Постоянно смотрите новости и мечтаете о добавлении на свой сайт бегущей строки как в телевизоре? Тег marquee позволит вам осуществить свою мечту.

Поддерживает его, правда, не все браузеры, но ведь когда-нибудь это изменится?

Автокомплит

В HTML автокомплит реализуется при помощи тега datalist, который привязывается к input путем добавления атрибута id в datalist и дальнейшей привязки его к input через атрибут list.

Довольно полезный тег, имеющий несколько серьезных минусов:

На этом у меня всё, спасибо за внимание!