|
|
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 |
How to create HTML <meter> Tag
Use the meter element to display a scalar value within a given range (a gauge):
index.html
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>
Output should be:
What is HTML <meter> form Attribute
Definition and Usage
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.
Browser Support
Syntax
<meter form="form_id">
Attribute Values
| 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. |
How to create HTML <meter> form Attribute
A <meter> element located outside a form (but still a part of the form):
index.html
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>
Output should be:
What is HTML <meter> high Attribute
Definition and Usage
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.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<meter high="number">
Attribute Values
| Value | Description |
|---|---|
| number | Specifies a floating point number that is considered to be a high value |
How to create HTML <meter> high Attribute
A gauge with a current value and min, max, high, and low segments:
index.html
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>
Output should be:
What is HTML <meter> low Attribute
Definition and Usage
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.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<meter low="number">
Attribute Values
| Value | Description |
|---|---|
| number | Specifies a floating point number that is considered to be a low value |
How to create HTML <meter> low Attribute
A gauge with a current value and min, max, high, and low segments:
index.html
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>
Output should be:
What is HTML <meter> max Attribute
Definition and Usage
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.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<meter max="number">
Attribute Values
| Value | Description |
|---|---|
| number | Specifies a floating point number that is the maximum value of the gauge. Default value is "1" |
How to create HTML <meter> max Attribute
A gauge with a current value and min, max, high, and low segments:
index.html
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>
Output should be:
What is HTML <meter> min Attribute
Definition and Usage
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.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<meter min="number">
Attribute Values
| Value | Description |
|---|---|
| number | Specifies a floating point number that is the minimum value of the gauge. Default value is 0 |
How to create HTML <meter> min Attribute
A gauge with a current value and min, max, high, and low segments:
index.html
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>
Output should be:
What is HTML <meter> optimum Attribute
Definition and Usage
The optimum attribute specifies the range where the gauge's value is considered to be an optimal value.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<meter optimum="number">
Attribute Values
| Value | Description |
|---|---|
| number | Specifies a floating point number that is the optimal value of the gauge |
How to create HTML <meter> optimum Attribute
A gauge with an optimal value of 0.5:
index.html
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>
Output should be:
What is HTML <meter> value Attribute
Definition and Usage
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.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Syntax
<meter value="number">
Attribute Values
| Value | Description |
|---|---|
| number | Required. Specifies a floating point number that is the current value of the gauge |
How to create HTML <meter> value Attribute
A gauge with a current value and min, max, high, and low segments:
index.html
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>
Output should be:
| 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: | 179 |
Reffered: https://www.w3schools.com/tags/tag_meter.asp