View video tutorial
HTML Form Elements
HTML
A form shows a set of related user input fields in a structured way.
HTML Form elements
A form displays a set of related user input fields in a structured way.
A form collects user input and sends data to a server for processing.
Form elements are
<button>,
<datalist>,
<fieldset>,
<form>,
<input>,
<label>,
<legend>,
<optgroup>,
<option>,
<output>,
<select>,
<textarea>.
Example HTML <meter> tag and <progress> Tag
<!DOCTYPE html>
<html>
<head>
<title>HTML Meter tag and Progress Tag example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
button {
margin: 20px 20px;
padding: 10px;
}
</style>
</head>
<body>
<div class="mydiv">
<h3>HTML Meter tag and Progress Tag example</h3>
<p>The max attribute specifies the maximum value acceptable for an element.</p>
<p>Click on the bar to start process.</p>
<label for="meterbar">CPU Usage:</label>
<meter id="meterbar" value="29" min="0" max="100" low="30" high="80" onclick="startMeter()">29%</meter><span
id="meterbarspan">29
</span>%<br><br>
<label for="progressbar">HD Consumption:</label>
<progress id="progressbar" value="0" max="100" onclick="startProgress()"></progress><span id="progressbarspan">
</span>%
<br>
<button onclick="startProcess()">Start all Process</button>
<button onclick="clearValue()">Clear Values</button>
</div>
</body>
<script>
let meterBar = document.querySelector("#meterbar");
let meterBarSpan = document.querySelector("#meterbarspan");
function startMeter() {
let currentValue = meterBar.value;
if (currentValue >= meterBar.max) {
meterBar.value = 0;
}
const intervalId = setInterval(function () {
if (meterBar.value >= meterBar.max) {
clearInterval(intervalId);
} else {
meterBar.value += 1;
progressBar.style.accentColor = "#ff0000";
meterBarSpan.textContent = meterBar.value;
}
}, 100);
}
const progressBar = document.querySelector("#progressbar");
const progressBarSpan = document.querySelector("#progressbarspan");
function startProgress() {
let currentValue = progressBar.value;
if (currentValue >= progressBar.max) {
progressBar.value = 0;
}
const intervalId = setInterval(function () {
if (progressBar.value >= progressBar.max) {
clearInterval(intervalId);
} else {
progressBar.value += 1;
progressBar.style.accentColor = "#ff0000";
progressBarSpan.textContent = progressBar.value;
}
}, 100);
}
function startProcess() {
startMeter();
startProgress();
}
function clearValue() {
meterBar.value = 0;
meterBarSpan.textContent = 0;
progressBar.value = 0;
progressBarSpan.textContent = 0;
}
</script>
</html>
Copy code and click on the "Try it Now" button to see how it works.