HTML тег <meter>

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

Для использования тега <meter> должно быть известно максимальное значение.

Тег <meter> не используется для обозначения индикатора прогресса. Для этого используется тег <progress>.

Синтаксис

Тег <meter> - парный элемент, закрывающий тег обязателен. Тег строчный, а значит может быть использован внутри большинства элементов, включая <header> и <p>.

Тег <meter> - новый в HTML5.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <meter value="4" min="0" max="10"></meter> 4 из 10<br> 
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Результат

Используйте свойства CSS background-color, box-shadow, width и height для стилизации элемента <progress>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 220px;
        height: 20px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #eee;
        box-shadow: 0 0 3px #666 inset;
      }
      progress[value]::-webkit-progress-value {
        background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
        -webkit-linear-gradient(top, #96f204, #8ebf42),
        -webkit-linear-gradient(right, #96f204, #8ebf42);
        background-size: 40px 20px,  10%;
      }
    </style>
  </head>
  <body>
    <p>Загрузка:
      <progress value="35" max="100"></progress>
      <span>35%</span>
    </p>
    <p>Индикатор:
      <progress value="80" max="100"></progress>
      <span>80%</span>
    </p>
  </body>
</html>

Результат

Атрибуты

Атрибут Значение Описание
form form_id Указывает форму (формы), к которым относится тег <meter>.
high number Указывает высокие значения (но не максимальные). Если значение high меньше чем значение low, то high = low. Если high задано большим, чем max, то high = max.
low number Указывает определяет низкие значения (но не минимальные). Это значение должно быть меньше чем high. Если указывается значение low меньше чем значение min, то low = min.
max number Определяет максимально возможное значение. Значение по умолчанию 1.
min number Определяет минимально возможное значение.Значение по умолчанию 0.
optimum number Задает оптимальное число, которое должно быть в пределах диапазона, определяемого атрибутами min и max. Оно может быть большим, чем значение high. Цвет зависит от расположения optimum: красный: min ≤ optimum < low желтый: low ≤ optimum ≤ high зеленый: high < optimum ≤ max
value number Устанавливает текущее значение, которое должно быть в пределах диапазона, определяемого атрибутами min и max. Обязательный атрибут.

Тег <meter> поддерживает глобальные атрибуты и атрибуты событий.

Поддержка браузера

8+ 6+ 6+ 11+




Похожие статьи