Kama3.2 года назад1

Интересные HTML5 теги

Со времен как я изучал HTML прошло много времени. По ходу дела удается знакомится с чем-то новым. В этой заметке хочу записать некоторые новые HTML 5 теги, которые могут пригодится в разработке, и о которых не многие знают.

Оглавление:

<datalist>

Создает список вариантов, которые можно выбирать при наборе в текстовом поле. Позволяет создать текстовое поле с подсказками для заполнения.

Можно сказать, что <datalist> объединяет в себе поля input[type=text] и select: можно ввести свой вариант в текстовое поле, или можно выбрать из вариант из предложенных.

Примеры

#1 Выведем текстовое поле с подсказками для заполнения.

<datalist> связывается с текстовым полем через id. Его значение должно совпадать со значением атрибута list тега <input>.

В <datalist> нельзя как в <select> передать разные значение и название выбираемого поля. Например: <option value="safari">Safari</option>.

<input list="browsers" name="browser">
<datalist id="browsers">
	<option value="Internet Explorer">
	<option value="Firefox">
	<option value="Chrome">
	<option value="Opera">
	<option value="Safari">
</datalist>

<meter>

Измерения чего-либо (метр, метраж). Выводит указанное значение в указанном диапазоне.

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

Синтаксис

<meter value="0.5">Резервный Текст</meter>
value(число) (обязательный)
Значение. Можно указывать дробные значение, например 0.5.
min(число)
Задает минимально возможное значение.
По умолчанию: 0
max(число)
Задает максимально возможное значение.
По умолчанию: 1
low(число)
Определяет предел, при достижении которого значение считается низким.
high(число)
Определяет предел, при достижении которого значение считается высоким.
optimum(число)
Определяет наилучшее или оптимальное значение.
form(строка)
ID формы, к которой принадлежит этот тег.

Примеры

#1 Температура
Температура воды:
<meter value="0"  low="10" max="100" high="60">Низкая</meter>
<meter value="30" low="10" max="100" high="60">Нормальная</meter>
<meter value="80" low="10" max="100" high="60">Горячая</meter>
<meter value="100" max="100">Кипяток</meter>

Температура воды: Низкая Нормальная Горячая Кипяток

#2 Используемое пространство
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.8" high="0.7">80%</meter>

2 out of 10

80%

<progress>

Используется для отображения прогресса завершенности задачи. Изменение значения происходит через JavaScript.

Синтаксис

<progress value="25" max="100">Резервный Текст</progress>
value(число) (обязательный)
Текущее значение прогресса.
max(число)
Максимальное значение прогресса.
По умолчанию: 1

Примеры

#1 Покажем прогресс бар
Идет загрузка, ждите: <progress max="100" value="25">Загружено на <b>25</b>%</progress>

Идет загрузка, ждите: Загружено на 25%

#2 Покажем прогресс бар
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>


32%

#3 Стилизация
1 комментарий
    Войти