HTML: Полезные примеры

иногда HTML приносит больше пользы, чем кажется

2021-07-11 dr.Brain

время чтения 2 мин.

Photo by David Everett Strickler on Unsplash

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

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

В этой статье мы рассмотрим несколько таких примеров.

Цветовая палитра

Инструмент выбора цвета (Color picker) для поля ввода можно создать без каких-либо усилий: достаточно добавить атрибут color для элемента input:

<label for="color-picker">Выберите цвет: </label>
<input type="color" id="color-picker">

В примере, приведенном выше, тег label добавлен в соответствии с рекомендациями о доступности содержимого страниц веб-сайтов.

Автоматическое обновление страницы

Обновлять страницу сайта через определенные интервалы времени можно с помощью HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="10">
    </head>
    <body>
        <h1>Автоматичиеское обновление</h1>
        <p>Страница обновляется каждые 10 секунд</p>
    </body>
</html>

Время, спустя которое страница обновится, нужно указать в секундах для атрибута content тега meta http-equiv="refresh".

Демонстрация скрытого текста

Показывать и скрывать текст по нажатию на определенный элемент страницы можно без JavaScript.

Все, что Вам нужно: уметь пользоваться тегами details и summary:

<details>
  <summary>HTML</summary>
  <p>HTML - мощный и полезный язык разметки</p>
</details>

Раскрывающийся список для поля ввода

C помощью HTML можно создать поле ввода с выпадающим список и возможностью поиска вводимых данных по этому списку.

Для таких целей существует тег datalist:

<input list="cars">
<datalist id="cars">
    <option value="BMW">
    <option value="Mercedes">
    <option value="Ford">
    <option value="Lambo">
    <option value="Ferrari">
</datalist>

В соответствии с примером, приведенным выше, под тегом input нужно создать datalist, содержащий список элементов option.

Следует помнить, что id тега datalist и значение атрибута list поля ввода должны быть одинаковыми.

Спасибо за внимание.

Перевод статьи “4 Awesome Things You Can Do Using Only HTML”.