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

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

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

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

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

Выберите цвет: 

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

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

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

    
        
    
    
        
Автоматичиеское обновление
        
Страница обновляется каждые 10 секунд
    

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

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

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

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

  
HTML
  
HTML - мощный и полезный язык разметки

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

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

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

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

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

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

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