Form Control
HTML5
The meter element represents a scalar measurement within a known range, such as disk usage, temperature, voting results, or relevance scores. It’s not suitable for progress tracking (use <progress> instead).
Interactive code playground requires JavaScript. Here's the code:
<p>Disk Usage:</p>
<meter value="75" min="0" max="100">75%</meter>
<p>Battery Level:</p>
<meter value="40" min="0" max="100" low="20" high="80" optimum="100">
40%
</meter>
<p>Temperature:</p>
<meter value="32" min="0" max="50" low="10" high="40" optimum="25">
32°C
</meter>
< meter value = " current " min = " 0 " max = " 100 " > Fallback text </ meter >
The text content serves as a fallback for browsers that don’t support <meter>.
Attribute Description Default Example valueCurrent value (required) - value="75"minMinimum value 0 min="0"maxMaximum value 1 max="100"lowUpper bound of low range min low="20"highLower bound of high range max high="80"optimumOptimal value (min + max) / 2 optimum="50"
Interactive code playground requires JavaScript. Here's the code:
<p>Storage: 45GB of 100GB used</p>
<meter value="45" min="0" max="100">45%</meter>
<p>Value is within normal range (green)</p>
Interactive code playground requires JavaScript. Here's the code:
<p>Battery Low Warning:</p>
<meter value="15" min="0" max="100" low="20" high="80" optimum="100">
15% - Charge soon!
</meter>
<p>Value below 'low' threshold appears in warning color</p>
Interactive code playground requires JavaScript. Here's the code:
<p>CPU Temperature:</p>
<meter value="85" min="0" max="100" low="40" high="75" optimum="50">
85°C - Too hot!
</meter>
<p>Value above 'high' threshold appears in warning color</p>
Interactive code playground requires JavaScript. Here's the code:
<!-- Optimum is HIGH (battery example) -->
<p>Battery (higher is better):</p>
<meter value="80" min="0" max="100" low="20" high="80" optimum="100">
80%
</meter>
<!-- Optimum is LOW (temperature example) -->
<p>Temperature (lower is better):</p>
<meter value="30" min="0" max="100" low="40" high="80" optimum="20">
30°C
</meter>
<!-- Optimum is MIDDLE (humidity example) -->
<p>Humidity (middle is better):</p>
<meter value="50" min="0" max="100" low="30" high="70" optimum="50">
50%
</meter>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Disk Space</strong></p>
<p>C: Drive</p>
<meter value="156" min="0" max="500" low="400" high="450" optimum="0">
156 GB of 500 GB used
</meter>
<small>156 GB / 500 GB</small>
<p>D: Drive</p>
<meter value="480" min="0" max="500" low="400" high="450" optimum="0">
480 GB of 500 GB used
</meter>
<small>480 GB / 500 GB - Nearly full!</small>
Interactive code playground requires JavaScript. Here's the code:
<div>
<p><strong>System Resources</strong></p>
<p>CPU Usage:</p>
<meter value="45" min="0" max="100" low="50" high="85" optimum="0">
45%
</meter>
<p>RAM Usage:</p>
<meter value="72" min="0" max="100" low="60" high="85" optimum="0">
72%
</meter>
<p>GPU Usage:</p>
<meter value="28" min="0" max="100" low="50" high="85" optimum="0">
28%
</meter>
</div>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Device Battery Levels</strong></p>
<p>Laptop:</p>
<meter value="85" min="0" max="100" low="20" high="80" optimum="100">
85% charged
</meter>
<p>Phone:</p>
<meter value="15" min="0" max="100" low="20" high="80" optimum="100">
15% - Low battery
</meter>
<p>Tablet:</p>
<meter value="55" min="0" max="100" low="20" high="80" optimum="100">
55%
</meter>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Server Temperature</strong></p>
<p>CPU:</p>
<meter value="42" min="0" max="100" low="40" high="75" optimum="35">
42°C - Normal
</meter>
<p>GPU:</p>
<meter value="68" min="0" max="100" low="40" high="75" optimum="35">
68°C - Warm
</meter>
<p>Hard Drive:</p>
<meter value="82" min="0" max="100" low="40" high="75" optimum="35">
82°C - Critical!
</meter>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Skills Assessment</strong></p>
<p>JavaScript:</p>
<meter value="90" min="0" max="100" low="40" high="70" optimum="100">
Expert (90%)
</meter>
<p>Python:</p>
<meter value="65" min="0" max="100" low="40" high="70" optimum="100">
Intermediate (65%)
</meter>
<p>Rust:</p>
<meter value="25" min="0" max="100" low="40" high="70" optimum="100">
Beginner (25%)
</meter>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Poll: Favorite Programming Language</strong></p>
<p>JavaScript: 45 votes</p>
<meter value="45" min="0" max="100">45%</meter>
<p>Python: 35 votes</p>
<meter value="35" min="0" max="100">35%</meter>
<p>Java: 20 votes</p>
<meter value="20" min="0" max="100">20%</meter>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Student Grades</strong></p>
<p>Math:</p>
<meter value="95" min="0" max="100" low="60" high="80" optimum="100">
A (95%)
</meter>
<p>Science:</p>
<meter value="78" min="0" max="100" low="60" high="80" optimum="100">
B- (78%)
</meter>
<p>History:</p>
<meter value="55" min="0" max="100" low="60" high="80" optimum="100">
F (55%)
</meter>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Live System Monitor</strong></p>
<p>CPU Usage:</p>
<meter id="cpu" value="30" min="0" max="100" low="50" high="85" optimum="0">
30%
</meter>
<span id="cpu-text">30%</span>
<button type="button" onclick="startMonitor()">Start Simulation</button>
<button type="button" onclick="stopMonitor()">Stop</button>
<script>
let interval;
function startMonitor() {
stopMonitor();
interval = setInterval(() => {
const cpu = Math.floor(Math.random() * 100);
document.getElementById('cpu').value = cpu;
document.getElementById('cpu-text').textContent = cpu + '%';
}, 1000);
}
function stopMonitor() {
if (interval) clearInterval(interval);
}
</script>
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Adjust Value</strong></p>
<label for="slider">Set Level:</label>
<input type="range" id="slider" min="0" max="100" value="50">
<p>Current Level:</p>
<meter id="level" value="50" min="0" max="100" low="30" high="70" optimum="50">
50%
</meter>
<span id="level-text">50%</span>
<script>
document.getElementById('slider').addEventListener('input', (e) => {
const value = e.target.value;
document.getElementById('level').value = value;
document.getElementById('level-text').textContent = value + '%';
});
</script>
Interactive code playground requires JavaScript. Here's the code:
<style>
.custom-meter {
width: 100%;
height: 30px;
}
/* Firefox */
.custom-meter::-moz-meter-bar {
background: #3b82f6;
}
/* Chrome/Safari */
.custom-meter::-webkit-meter-bar {
background: #e5e7eb;
border-radius: 6px;
}
.custom-meter::-webkit-meter-optimum-value {
background: #10b981;
border-radius: 6px;
}
.custom-meter::-webkit-meter-suboptimum-value {
background: #f59e0b;
border-radius: 6px;
}
.custom-meter::-webkit-meter-even-less-good-value {
background: #ef4444;
border-radius: 6px;
}
</style>
<p>Custom Styled Meter:</p>
<meter class="custom-meter" value="75" min="0" max="100">75%</meter>
Interactive code playground requires JavaScript. Here's the code:
<style>
.meter-container {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0;
}
.meter-container meter {
flex: 1;
height: 24px;
}
.meter-label {
font-weight: 600;
min-width: 100px;
}
.meter-value {
min-width: 50px;
text-align: right;
}
</style>
<div class="meter-container">
<span class="meter-label">Storage:</span>
<meter value="234" min="0" max="500">234 GB</meter>
<span class="meter-value">234 GB</span>
</div>
<div class="meter-container">
<span class="meter-label">Bandwidth:</span>
<meter value="78" min="0" max="100">78%</meter>
<span class="meter-value">78%</span>
</div>
<!-- Scalar measurement in a range -->
< meter value = " 75 " min = " 0 " max = " 100 " > 75% </ meter >
Use for: Disk usage, battery level, temperature, ratings, scores, or any static/fluctuating measurement.
<!-- Progress toward completion -->
< progress value = " 75 " max = " 100 " > 75% </ progress >
Use for: File uploads, task completion, loading indicators, processing status, or anything moving toward 100%.
Interactive code playground requires JavaScript. Here's the code:
<p><strong>Progress (task moving to completion)</strong></p>
<progress value="60" max="100">60%</progress>
<span>Uploading... 60%</span>
<p><strong>Meter (current measurement)</strong></p>
<meter value="60" min="0" max="100" low="30" high="80" optimum="50">
60%
</meter>
<span>Current usage: 60%</span>
Interactive code playground requires JavaScript. Here's the code:
<p>Disk Usage:</p>
<meter value="450" min="0" max="500" low="400" high="475">
450 GB of 500 GB used (90%)
</meter>
Screen readers announce the fallback text for browsers that don’t support <meter>.
Interactive code playground requires JavaScript. Here's the code:
<label for="battery-meter">Device Battery Level:</label>
<meter id="battery-meter" value="65" min="0" max="100"
low="20" high="80" optimum="100">
65% charged
</meter>
Interactive code playground requires JavaScript. Here's the code:
<div role="group" aria-labelledby="system-heading">
<h3 id="system-heading">System Resources</h3>
<p>
<label for="cpu-meter">CPU Usage:</label>
<meter id="cpu-meter" value="45" min="0" max="100"
aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
45%
</meter>
</p>
</div>
<!-- Clear, meaningful ranges -->
< meter value = " 75 " min = " 0 " max = " 100 " low = " 30 " high = " 80 " > 75% </ meter >
<!-- Unclear what the range means -->
< meter value = " 7.5 " min = " 0 " max = " 10 " > 7.5 </ meter >
<!-- Battery: higher is better -->
< meter value = " 80 " min = " 0 " max = " 100 " optimum = " 100 " > 80% </ meter >
<!-- Disk usage: lower is better -->
< meter value = " 20 " min = " 0 " max = " 100 " optimum = " 0 " > 20% </ meter >
<!-- Temperature: moderate is better -->
< meter value = " 70 " min = " 32 " max = " 100 " optimum = " 70 " > 70°F </ meter >
<!-- This is task progress, use <progress> instead -->
< meter value = " 50 " max = " 100 " > Uploading 50% </ meter >
< progress value = " 50 " max = " 100 " > Uploading 50% </ progress >
Browser Version Notes Chrome 8+ Full support Firefox 16+ Full support Safari 6+ Full support Edge 13+ Full support IE ❌ Not supported
