Учебник HTML. Глава 10: Индикаторные элементы

Узнайте, как использовать HTML-элементы meter и progress для отображения измерений и прогресса выполнения задач. Простые примеры кода помогут вам освоить эти инструменты.

<< Учебник HTML

Индикаторные элементы в HTML используются для отображения прогресса выполнения задачи или измерения значения в пределах заданного диапазона. Они помогают пользователям визуально оценить состояние процесса или величину параметра. В этой части мы рассмотрим два основных индикаторных элемента: <meter> и <progress>.

10.1. Тег meter

Тег <meter> используется для представления измеряемого значения внутри определенного диапазона. Это может быть уровень заряда батареи, количество оставшегося места на диске или процент выполненной работы. Значение должно находиться между минимальным (min) и максимальным (max) значениями, а также иметь текущее значение (value).

Пример использования:

<!-- Показываем уровень заряда батареи -->
<p>Уровень заряда батареи:</p>
<meter min="0" max="100" value="60">60%</meter>
    
<!-- Показываем сколько осталось свободного места на диске -->
<p>Свободное место на диске:</p>
<meter min="0" max="500" value="250">50%</meter>

Комментарий к примеру:

1. min: минимальное значение шкалы (в данном случае 0%).
2. max: максимальное значение шкалы (например, 100% или 500 ГБ).
3. value: текущее значение индикатора (например, 60% или 250 ГБ).
4. Внутри тега <meter> можно указать текстовое представление значения, которое будет отображаться при отключенном CSS-стилях.

Результат:

Уровень заряда батареи:

60%

Свободное место на диске:

50%

10.2. Тег progress

Тег <progress> предназначен для отображения текущего состояния выполнения задачи или процесса. Он показывает прогресс загрузки файла, выполнение задания или другой процесс, который имеет конечное завершение.

Пример использования:

<!-- Отображаем загрузку файла -->
<p>Загрузка файла:</p>
<progress value="30" max="100"></progress>
    
<!-- Прогресс выполнения задания -->
<p>Выполнение задания:</p>
<progress value="75" max="100"></progress>

Комментарий к примеру:

1. value: текущее значение прогресса (например, 30% или 75%).
2. max: максимальное значение прогресса (обычно 100%, но может быть другим числом).
3. Внутри тега <progress> ничего не указывается, так как браузер сам отобразит визуальный элемент, соответствующий текущему состоянию.

Результат:

Загрузка файла:

Выполнение задания:

Таким образом, тег <meter> используется для отображения значений в рамках фиксированного диапазона, тогда как тег <progress> предназначен для показа прогресса выполнения задач.

---