![]() |
The Use the meter element to display a scalar value within a given range (a gauge): Definition and UsageThe Examples: Disk usage, the relevance of a query result, etc. Note: The Tip: Always add the <label> tag for best accessibility practices! Browser SupportThe numbers in the table specify the first browser version that fully supports the element. Attributes
Global AttributesThe Event AttributesThe |
Use the meter element to display a scalar value within a given range (a gauge):
Example:
HTML
<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.6">60%</meter>
The form
attribute specifies the form the <meter>
tag belongs to.
The value of this attribute must be equal to the id
attribute of a <meter>
element in the same document.
<meter form="form_id">
Value | Description |
---|---|
form_id | Specifies the form element the <meter> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document. |
A <meter> element located outside a form (but still a part of the form):
Example:
HTML
<form action="/action_page.php" method="get" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p><label for="anna">Anna's score:</label>
<meter id="anna" form="form1" name="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
The high
attribute specifies the range where the gauge's value is considered to be a high value.
The high
attribute value must be less than the max
attribute value, and it also must be greater than the low
and min
attribute values.
The numbers in the table specify the first browser version that fully supports the attribute.
<meter high="number">
Value | Description |
---|---|
number | Specifies a floating point number that is considered to be a high value |
A gauge with a current value and min, max, high, and low segments:
Example:
HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
The low
attribute specifies the range where the gauge's value is considered to be a low value.
The low
attribute value must be greater than the min
attribute value, and it also must be less than the high
and max
attribute values.
The numbers in the table specify the first browser version that fully supports the attribute.
<meter low="number">
Value | Description |
---|---|
number | Specifies a floating point number that is considered to be a low value |
A gauge with a current value and min, max, high, and low segments:
Example:
HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
The max
attribute specifies the upper bound of the gauge.
The max attribute value must be greater than the min
attribute value.
If unspecified, the default value is 1.
Tip: The max
attribute, together with the min
attribute, specifies the full range of the gauge.
The numbers in the table specify the first browser version that fully supports the attribute.
<meter max="number">
Value | Description |
---|---|
number | Specifies a floating point number that is the maximum value of the gauge. Default value is "1" |
A gauge with a current value and min, max, high, and low segments:
Example:
HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
The min
attribute specifies the lower bound of the gauge.
The min
attribute value must be less than the max
attribute value.
If unspecified, the default value is 0.
Tip: The min
attribute, together with the max
attribute, specifies the full range of the gauge.
The numbers in the table specify the first browser version that fully supports the attribute.
<meter min="number">
Value | Description |
---|---|
number | Specifies a floating point number that is the minimum value of the gauge. Default value is 0 |
A gauge with a current value and min, max, high, and low segments:
Example:
HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
The optimum
attribute specifies the range where the gauge's value is considered to be an optimal value.
The numbers in the table specify the first browser version that fully supports the attribute.
<meter optimum="number">
Value | Description |
---|---|
number | Specifies a floating point number that is the optimal value of the gauge |
A gauge with an optimal value of 0.5:
Example:
HTML
<p><label for="yinyang">Yin Yang:</label>
<meter id="yinyang" value="0.3" high="0.9" low="0.1" optimum="0.5"></meter></p>
The required value
attribute specifies the current, or "measured", value of the gauge.
The value attribute must be between the min
and max
attribute values.
The numbers in the table specify the first browser version that fully supports the attribute.
<meter value="number">
Value | Description |
---|---|
number | Required. Specifies a floating point number that is the current value of the gauge |
A gauge with a current value and min, max, high, and low segments:
Example:
HTML
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
<p><label for="linda">Linda's score:</label>
<meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p>
html tag |
How to create HTML <meter> Tag | HTML Tag |
What is HTML <meter> form Attribute | HTML Tag |
How to create HTML <meter> form Attribute | HTML Tag |
What is HTML <meter> high Attribute | HTML Tag |
How to create HTML <meter> high Attribute | HTML Tag |
What is HTML <meter> low Attribute | HTML Tag |
How to create HTML <meter> low Attribute | HTML Tag |
What is HTML <meter> max Attribute | HTML Tag |
How to create HTML <meter> max Attribute | HTML Tag |
What is HTML <meter> min Attribute | HTML Tag |
How to create HTML <meter> min Attribute | HTML Tag |
What is HTML <meter> optimum Attribute | HTML Tag |
How to create HTML <meter> optimum Attribute | HTML Tag |
What is HTML <meter> value Attribute | HTML Tag |
How to create HTML <meter> value Attribute | HTML Tag |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |
Views: | 127 |
Reffered: https://www.w3schools.com/tags/tag_meter.asp