<meter>要素

<meter>要素の定義

英語で「計器」を表す”meter”より。
整数値や小数値を視覚的に表す際に使用します。

子要素として使用できるもの

記述コンテンツが使用できます。ただし、<meter> 要素自体を子要素に使用することはできません。

親要素として使えるもの

記述コンテンツを受け入れるすべての要素。

許可されているARIAロール

なし

DOMインターフェース

HTMLMeterElement

属性

グローバル属性が指定できます。

value

現在の数値を表します。min属性とmax属性が指定されている場合には、その範囲内である必要があります。
value属性が未定義や不正な値であった場合は、”0″として扱われます。
範囲外の値が指定されていた場合は、その範囲内の最も近い値が使用されます。

min

指定できる最小の値を設定します。未設定の場合は”0″となります。

max

指定できる最大の値を設定します。未設定の場合は”1″となります。

low

「低」とされる範囲全体の上限値。属性値は、min 属性の値より大きく、かつ high 属性および max 属性の値より小さいものでなくてはなりません。

high

「高」とされる範囲全体の下限値。属性値は、max 属性の値より小さく、かつ low 属性や min 属性の値より大きいものでなくてはなりません。

optimum

最適な数値の範囲を表します。min 属性と max 属性によって定義される範囲内の値でなくてはなりません。low 属性と high 属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。

form

<meter> 要素の属するフォーム (form owner) の id を指定します。例えばフォームの <input> 要素の範囲を表す用途で <meter> 要素を用いている場合、このフォームの id を指定します。対象がフォーム関連要素である場合にのみこの属性を使用可能です。

サンプル

See the Pen qBdeWGj by Masahiko Iwakiri (@m-iwakiri) on CodePen.