Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

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

Время чтения статьи ~1 минута
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Полоса прогресса, бегущая строка и автокомплит с использованием только HTML главное изображение

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

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

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

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

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

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

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

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

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

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

Автокомплит

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

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

  • Его сложно стилизовать при помощи CSS
  • Средняя поддержка браузерами

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

Аватар пользователя Шахзод Давлатов
Шахзод Давлатов 12 января 2022
1
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 28 марта
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 28 марта
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 28 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 28 марта
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 28 марта
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 28 марта
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время