meter в HTML


HTML :: Тег

В HTML тег (от англ. meter – измеритель, счетчик) используется для графического вывода значения в некотором известном диапазоне. Примерами таких значений могут служить: количество результатов поиска, объем свободного пространства на жестком диске, доля чернокожего населения в штате Невада и т.д. Обычно браузеры отображают результат в виде графической полоски серого цвета, которая в зависимости от значений атрибутов элемента заполняется на определенную величину зеленым или желтым цветом. При этом текст между открывающим и закрывающим тегами элемента отображается только в браузерах, которые не поддерживают этот элемент.

Не следует использовать элемент для обозначения индикатора прогресса, для этого предназначен элемент

HTML тег

Элемент (от англ. «meter» ‒ «счётчик, измеритель») определяет скалярное измерение в пределах известного диапазона или дробное значение. Подобный индикатор также известен, как оценочная шкала. Для использования данного тега должно быть известно максимальное значение.

Данный тег используется, к примеру, как необходимость отображения релевантности поискового запроса, результатов опроса, заряда батареи, использования дискового пространства и тому подобное. Текст, указанный внутри тега, отображается только для тех браузеров, которые его не поддерживают.

Примечание: Элемент не должен использоваться для обозначения индикатора прогресса, для этого предназначен элемент

Синтаксис

Закрывающий тег

Атрибуты

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Firefox 16+ отображаeт элемент со следующими значениями стилей:

Chrome 8+, Opera 11+, Safari 6+ отображают элемент со следующими значениями стилей:

Различия между HTML 4.01 и HTML5

Тег был добавлен в HTML5.

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

Определяем оценочные данные в заданном диапазоне (шкалу):

Учебник HTML5

» Всё о HTML5 на русском

Новый тег meter в html5

HTML5 предлагает нам несколько новых тегов, таких как time, mark и meter. О последнем пойдет речь в этой статье.

Начнем с того, что этот элемент является внутристроковым, поэтому может быть использован внутри других строковых тегов, таких как h1 или p.

В спецификации HTML 5 о теге meter сказано примерно следующее:

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

Простейший пример

Для того чтобы Вам стало всё понятно, приведем простой пример:

meter value =»8″ min =»0″ max =»10″ > Текст, выводимый если тег meter не поддерживается. meter >

На этот код браузер Google Chrome покажет Вам следующую картинку:

Internet Explorer не нарисует ничего, т.к. не умеет.

Атрибуты тега meter

Теперь разберемся с атрибутами. У данного элемента есть 6 допустимых атрибутов: value, min, max, high, low, optimum. Давайте разберемся с каждый по очереди:

Атрибут value обозначает текущее значение. Если этот атрибут не указан, то его значение берется как первое число внутри тега. Т.е. например в коде:

meter > 2 из 10 meter >

атрибут value будет равен 2. Если внутри тега чисел нет, то value = 0.

Атрибут min обозначает минимально допустимое значение. Если атрибут не указан явно, то минимальное значение равно 0.

Атрибут max обозначает максимально возможное значение. Если максимальное значение задано меньшим чем минимальное, то они меняются местами, т.е. min = max, а max = min. Если max не задан то максимальное значение равно 1. Однако если Вы зададите тип содержания тега (например проценты), то максимальным числом будет 100%.

Атрибут low отделяет низкие значения (но не минимальные). Это значение должно быть меньше чем high. Если значение low принимается меньшим, чем значение min, то low = min. Значения меньшие, чем low будут подсвечиваться желтым или красным цветом (по умолчанию).

Атрибут high отделяет высокие значения (но не максимальные). Если значение high меньше чем значение low, то high = low. Если high задано большим, чем max, то high = max. Значения большие, чем high будут подсвечиваться желтым или красным цветом (по умолчанию).

Атрибут optimum обозначает оптимальное значение и должно находиться в пределах от min до max. Оно может быть большим чем значение high.

Еще несколько примеров использования meter

Давайте теперь рассмотрим еще несколько примеров.

Простейший из них:

p > Ваши баллы: meter > 2 из 10 meter > p >

Если Вы запустите этот пример в браузере, то должны увидеть (но пока не увидите) полоску заполненную на 20% зеленым цветом. На момент написания статьи функция считывания данных из внутренней строки тега не была реализована ни в одном браузере. Исправить ситуацию можно следующим образом:

p > Ваши баллы: meter min =»0″ max =»10″ value =»2″ > 2 из 10 meter > p >

Запустив его, Вы увидите полоску закрашенную на 20% зеленым цветом. Работает это во всех браузерах кроме IE и FF.


Точно то же самое будет отображаться если код страницы будет следующий:

meter > 20% meter >

meter > 1/5 meter >

Теперь давайте разберемся с цветами. Введите следующий текст:

p > Ваши баллы: meter value =»1″ min =»0″ max =»10″ low =»2″ high =»8″ optimum =»9″ > 2 из 10 meter > p >

В браузере отобразится полоска на 10% закрашенная красным цветом. При значениях атрибута value от 2 до 7 полоска будет желтой. При значениях от 8 до 10 — оптимальной, т.е. зеленой.

Неправильное использование тега

Как же не нужно использовать элемент meter?

Во-первых он не должен быть пустым:

meter min =»0″ max =»100″ value =»75″ > meter >

Внутри тега обязательно должен находиться какой-либо текст:

meter min =»0″ max =»100″ value =»75″ > обязательный текст meter >

Иначе браузер не обработает тег вообще.

Во-вторых, обязательно нужно задавать атрибуты min и max, если значение которое Вы хотите отобразить не находится в диапазоне от 0 до 1.

Илон Маск рекомендует:  Тег time

Т.е. вот так meter > 12cm meter > использовать этот тег нельзя! Нужно вот так: meter min =»0″ max =»20″ > 12cm meter >

Тег meter и Internet Explorer

Чтобы тег meter работал в Internet Explorer нужно добавить вот такие строчки в голову Вашей страницы:

в HTML

Всем привет. Cегодня мы с вами познакомимся с тегом meter который позволяет создавать индикатор указывающий в каком состоянии находится значение(минимальное, оптимальное, критическое). Данный тег чем то похож на progress. Однако progress не отображает состояний. Ладно, поехали!

Создадим тег meter:

Итак, как вы видите в сам тег мы поместили текст который будет отображаться вместо ползунка если данный тег не поддерживается браузером. На данный момент данный тег поддерживается всеми современными браузерами за исключением IE, ANDROID и IOS.

Тег meter может принимать в себя следующие атрибуты.

value — текущее значение индикатора

min — минимальное значение индикатора

max — максимальное значение индикатора

optimum — оптимальное состояние(цвет индикатора зеленый)

low — минимальное состояние (цвет индикатора желтый)

high — критическое состояние (цвет индикатора красный)

Значение .2 эквивалентно 0.2

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

К примеру наш индикатор при значениях:

0 — 0.5 — имеет зеленый цвет

0.5 — 0.75 — желтый цвет

0.75 — 1 — красный цвет

Если немного поразбираться, то здесь ничего сложного нет.

Теперь рассмотрим практический пример использования данного тега.

Наверняка на сайтах вы встречались с индикатором указывающим допустимое и рекомендуемое количество символов при создании пароля.

В нашем случае допустимое количество символов не меньше 5. Если мы введем меньше допустимого значения индикатор будет красным. От 5 до 20 идет допустимое количество символов(желтый индикатор). C 20 до 32 рекомендуемое(зеленый индикатор).

Мы написали небольшой скрипт который при вводе символов в поле будет динамически менять значение индикатора. В результате мы визуально будем видеть недопустимое, допустимое и рекомендованное количество символов необходимое для создания пароля.

Вот так вот используя данный тег и немного js кода мы можем делать такие интересные индикаторы.

На этом данная статья подошла к концу. Если у вас остались вопросы оставляйте их в комментариях или группе

На этом у меня все. Желаю вам успехов и удачи! Пока.

HTML тег meter

Тег определяет индикатор, служащий для отображения оценочных данных внутри заданного диапазона. Подобный индикатор еще известен, как оценочная шкала.

Пример для тега : использование дискового пространства, релевантность результатов поиска, заполненность неких объемов и т.п.

Тег не должен использоваться для определения индикатора выполнения хода задания. Для этого используется тег


Разница между HTML 4.01 и HTML5

Атрибут Описание
form Определяет к какой форме относится элемент
high Определяет верхний предел диапазона индикатора
low Определяет нижний предел диапазона индикатора
max Определяет максимальное значение индикатора
min Определяет минимальное значение индикатора
optimum Определяет оптимальное значение индикатора
value Определяет текущее значение индикатора

Общие атрибуты

HTML пример

Определяем оценочные данные в заданном диапазоне (шкалу):

HTML тег

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

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

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

Синтаксис

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

Тег — новый в HTML5.

Пример

Результат

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

HTML meter Tag

Contents

HTML Meter: Main Tips

  • HTML meter element is also known as a gauge.
  • You can use it to represent a certain HTML scalar measurement in a predefined range.
  • If you need to generate a progress bar, use

Using the Meter Tag

Which HTML element is used to display a scalar measurement within a range? The answer is simple — an HTML meter , or a gauge:

Note: the meter tag has been introduced in HTML5, so it’s not supported by older versions.

Theory is great, but we recommend digging deeper!
Learn HTML5 and CSS3 to Build a Website from Scratch

Stone River eLearning

Tag-specific Attributes

HTML meter tag supports all global attributes and also has seven tag-specific ones:

  • value , which you are required to set.
  • form , which is used with meters associated with form controls.
  • high , low , max , min and optimum , which define the meter range:

We’ll review each of the tag-specific attributes using code examples to further illustrate the point.

value defines the value of the meter to be displayed in numbers (0 by default):

form indicates one or more form controls to which the HTML5 meter belongs:

max sets a maximum number that is considered as the top of the range (1 by default):

min sets a minimum number that is considered as the bottom of the range (0 by default):

optimum defines the optimum value for the meter:

high sets a value that is to be considered as high. It must be lower than the value of max attribute and higher than the value of min and low attributes:

low sets a value that is to be considered as low. It must be higher than the value of min attribute and lower than the value of max and high attributes:

Note: high and low will only work if the values for min and max are set for the HTML5 meter.

The HTML5 meter Element

Easily manage projects with monday.com

The following is a guest post by Pankaj Parashar. Pankaj has written here before, last time about the progress element. Fitting indeed then to write again about the very related meter element. They are different both functionally and semantically, so read on!

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate. This is also known as a gauge.

If you are like me, the above spec wouldn’t make much sense until we dive deep into the implementation. So let’s just start with a basic markup for the meter element:

Similar to its sibling — the progress element — a meter element must also have both a start tag ( ) and an end tag ( ). This becomes very useful when we devise a robust fallback technique for older browsers that do not support the meter element, later in this article.


Content model

The meter element uses the phrasing content model which means it can contain the text of the document, along with the elements that mark up that text, but there must be no (additional) meter element among its descendants.

Attributes

Apart from the global attributes, the meter element can have 6 more attributes.

value — A floating point number that represents the current value of the measured range. This must be between the min and the max value (if specified).

min — Indicates the lower bound of the measured range. This must be less than the max value (if specified). If unspecified, the minimum value is 0.

max — Indicates the upper bound of the measured range. This must be greater than the min value (if specified). If unspecified, the maximum value is 1.0.

low — It represents the upper bound of the low end of the measured range. This must be greater than the min attribute, but less than the high and max value (if specified). If unspecified, or if less than the minimum value, the low value is equal to the min value.

high — It represents the lower bound of the high end of the measured range. This must be less than the max attribute, but greater than the low and min value (if specified). If unspecified, or if greater than the max value, the high value is equal to the max value.

optimum — This attribute indicates the optimum value and must be within the range of min and max values. When used with the low and high attribute, it indicates the preferred zone for a given range. For example:

  • min ≤ optimum ≤ low — If the optimum value is between the min and the low values, then the lower range is considered to be the preferred zone.
  • high ≤ optimum ≤ max — If the optimum value is between the high and the max values, then the upper range is considered to be the preferred zone.

A meter with everything would look like:

Rules of thumb

  1. All the above mentioned attributes may be floating point numbers e.g. 12, -8, 3.625
  2. Based on the definition of each attribute the following inequalities become true,
    • min ≤ value ≤ max
    • min ≤ low ≤ high ≤ max (if low/high specified)
    • min ≤ optimum ≤ max (if optimum specified)
  3. There is no explicit way to specify units in the meter element, but the authors are encouraged to specify the units using the title attribute. For example, 120GB out of 256GB are used

Do not use meter element to.

  1. indicate the progress completion of a task (use progress element instead).
  2. represent a scalar value of an arbitrary range — for example, to report a weight, or height of a person.

Experiment #1 — Different states of meter element

This experiment shows the various states of the meter element under different combination of input values for each attribute. Feel free to edit the attribute values of the main code to tweak the meter gauge ouput.

Experiment #2 — OSX style disk usage

In this experiment, we’ll try and simulate the appearance of the disk usage panel in OS X using the meter element and then style it as cross-browser as possible.

Populating internal attributes of our meter tag with the known set of input values.

  • Total size of the disk — 120.47GB (our max attribute)
  • Current disk usage — 55.93GB (our value attribute)
  • Minimum disk size — 0 (our min attribute, not required as the default value is 0)
  • Unit — GB (our title attribute that specifies the unit)

Before we apply any CSS, the meter gauge looks like this in Chrome 30 on OX X 10.9.

Default appearance of the meter element in Chrome 30 on OS X 10.9

This is pretty much all that we can do in HTML as rest of the work is done by CSS. At this stage let’s not worry about the fallback techniques for supporting older browsers that don’t understand the meter element.

Styling the meter element

Just like any other element, we can define dimensions by specifying width and height for meter.

This is where things become interesting because generally most of the A-grade browsers provide separate pseudo classes to style the meter element. Although Opera moving to Blink leaves us with less browsers to care for. At this stage, we don’t really have to know about which versions of each browser support the meter element, because our fallback technique will take care of the rest. We classify them as follows:

  • Webkit/Blink
  • Firefox
  • Internet Explorer

On inspecting the meter element via Chrome Developer Tools, we can reverse-engineer the implementation of the spec in webkit browsers.

Inspect element on Chrome DevTools

In addition, the User-Agent stylesheet of WebKit provides a wealth of information on how you can use various pseudo classes to access different states of the meter element.

User-Agent stylesheet of WebKit browsers

Pseudo class Description
-webkit-meter-inner-element Additional markup to render the meter element as read-only.
-webkit-meter-bar Container of the meter gauge that holds the value.
-webkit-meter-optimum-value The current value of the meter element and is by default green when the value attribute falls inside the low-high range.
-webkit-meter-suboptimum-value Gives a yellow color to the meter element when the value attribute falls outside the low-high range.
-webkit-meter-even-less-good-value Gives a red color to the meter element when the value and the optimum attributes fall outside the low-high range but in opposite zones. For example, value or value > high > low > optimum

First, let’s start by resetting the default appearance of the meter gauge by using -webkit-appearence: none;


For this experiment, we will only be using -webkit-meter-bar (to style the container) and -webkit-meter-optimum-value (to style the value) pseudo classes. Each color in background linear gradient represents the space consumed by the sub-categories like — Apps, Movies, Photos etc.

WebKit pseudo classes on the meter element Output after styling the background container Output after styling the meter gauge value

CSS3 Transition/Animation

WebKit browsers support both transition and animation on the meter element. Just for the sake of testing, I experimented by changing the width of the value(on :hover ) using transitions and animating the background position of the container using keyframes . Although not applicable for practical usage, both the experiments turned out pretty well on all three browsers.

CSS3 Transitions in action (:hover) CSS3 Animated background stripes in action

Pseudo Elements

At the time of writing, only webkit browsers support pseudo elements on meter gauge. For this experiment, we could use the pseudo elements to display the meta information like HD Name, Free space right above the meter gauge.

Pseudo elements in action

Apart from WebKit, the support for pseudo elements in other browsers is non-existent. Hence, there is no good reason to embed content inside pseudo elements, at least for now.

2. Firefox

Similar to WebKit, Firefox uses -moz-appearence: meterbar to paint the meter gauge. We can get rid of the default bevel and emboss by resetting it to none .

Firefox is shipped with a wholesome list of pseudo classes to style different states of the meter gauge. The snapshot below has been grabbed from the forms.css file that can be accessed from inside Firebug.

[forms.css] snapshot for meter element in Firefox 25

Pseudo class Description
-moz-meter-bar Represents the current value of the meter gauge that can be used to style the properties of the meter gauge value.
-moz-meter-optimum It gives a green color to the meter element when the value attribute falls inside the low-high range.
-moz-meter-sub-optimum It gives a yellow color to the meter element when the value attribute falls outside the low-high range.
-moz-meter-sub-sub-optimum It gives a red color to the meter element when the value and the optimum attributes fall outside the low-high range but in opposite zones. For example, value or value > high > low > optimum

For this experiment, we will only use ::-moz-meter-bar to style the background of the meter gauge value.

Interestingly, in Firefox you can style the background of the container using the meter selector itself.

Firefox doesn’t support ::before and ::after pseudo elements on the meter gauge. The support for CSS3 transitions and animation is a bit shaky as well. Hence, there is no good reason to use them until the behavior becomes consistent across browsers.

3. Internet Explorer

To my knowledge, no stable version of Internet Explorer supports the meter element. Even the Modernizr test suite failed to detect meter in IE11 preview on Windows 8.1. This perhaps leaves us only with the fallback approaches that will be discussed in the next section.

What about browsers that don’t support meter?

Can I Use (and simple testing) reports the meter gauge is natively supported in: Firefox 16+, Opera 11+, Chrome, Safari 6+. Internet Explorer, however offers no support what-so-ever for any version. If you want to make meter element work in older browsers, then you’ve got two options:

1. Polyfill

Randy Peterman has written a polyfill that makes meter element work in older browsers (especially IE). During my cross-browser testing, I found that the polyfill works for all IE browsers down to IE6! which makes it a good candidate for usage in production.

2. HTML fallback

This is my preferred (no-JS) approach. It makes use of a common technique that was also discussed in my previous article for CSS-Tricks on the HTML5 progress element.

The idea is to simulate the appearance of a meter gauge using div and span inside the meter tag. Modern browsers that support meter will ignore the content within the tag. Older browsers that cannot render the meter element will ignore the tag and render the markup inside it.

It is fairly common to use both the techniques in conjunction and it is perfectly safe for usage in production sites. The demo should run fine for all the browsers including Internet Explorer (down to IE6!). The meter gauge color is blue in all the versions of Internet Explorer. Opera 11 and 12 doesn’t permit changing the color of the meter gauge. Hence, it shows the default green color. The demo also uses some additional markup to display the disk usage of each sub-category like Apps, Movies, Photos etc.

HTML тег

Парный строчный тег, определяющий индикатор для отображения числовых значений в пределах известного диапазона.

  • От англ. «[meter]» — «измеритель».
  • Например, можно использовать для того чтобы показать использование дискового пространства, номер страницы, долю населения.
  • Нельзя использовать для того, чтобы показать прогресс выполнения, т.к. для этих целей предназначен

.

  • Атрибут value является обязательным.
  • Если браузером тег не поддерживается, то будет показан содержашийся внутри него текст.
  • в HTML

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

    Синтаксис

    Атрибуты

    Закрывающий тег

    Пример. Использование тега

    Примечание

    Браузеры, которые поддерживают тег , отображают значение в виде рисунка, на котором цветом помечается текущее значение в указанном диапазоне. Остальные браузеры выводят текст, написанный внутри тега .

    Спецификация ?

    Спецификация Статус
    WHATWG HTML Living Standard Живой стандарт
    HTML5 Возможная рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

    Браузеры: Настольные Мобильные ?

    Internet Explorer Edge Chrome Opera Safari Firefox
    13 6 11 5.2 16
    Android Firefox Mobile Opera Mobile Safari Mobile
    16 11

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — элемент полностью поддерживается браузером;
    • — элемент браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

    Число указывает версию браузреа, начиная с которой элемент поддерживается.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL