The HTML value attribute you can use on the following elements:
For <button>, <input> and <option> elements, the value attribute defines the initial value of the element.
Example1:
The button value attribute. Clicking a button submits its value:
<!DOCTYPE html>
<html>
<body>
<form action="">
<button name="number" type="submit" value="One">One</button>
<button name="number" type="submit" value="Two">Two</button>
<button name="number" type="submit" value="Three">Three</button>
</form>
</body>
</html>Output:
Example2:
The input value attribute. An HTML form with default values:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="fname">First name:</label>
<input type="text" id="name" name="surname" value="Robert"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="name" name="surname" value="Johnson"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
Example3:
The option value attribute. Choose a colour, and click the “Submit” button to send input to the server:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="colors">Choose a colour:</label>
<select id="colors" name="colors">
<option value="red">Red colour</option>
<option value="blue">Blue colour</option>
<option value="yellow">Yellow colour</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>Output:
For meter elements, the value attribute defines the current value of the gauge.
Example4:
A gauge with a current value, min, max, high, and low segments:
<!DOCTYPE html>
<html>
<body>
<p><label for="disc-C">Disc C</label>
<meter id="disc-C" min="0" low="30" high="90" max="100" value="85"></meter></p>
<p><label for="disc-D">Disc D</label>
<meter id="disc-D" min="0" low="30" high="90" max="100" value="65"></meter></p>
<p><label for="disc-E">Disc E</label>
<meter id="disc-E" min="0" low="30" high="90" max="100" value="25"></meter></p>
</body>
</html>Output:
For li elements, the value attribute settles the value of the list item (for ordered lists). The next list items will increment from that value.
Example5:
<!DOCTYPE html>
<html>
<body>
<ol>
<li value="1">Sugar</li>
<li>Milk</li>
<li>Water</li>
<li>Flour</li>
<li>Baking powder</li>
</ol>
</body>
</html>Output:
- Sugar
- Milk
- Water
- Flour
- Baking powder
For progress elements, the value attribute defines how much of the task has been completed.
Example6:
<!DOCTYPE html>
<html>
<body>
<label for="bar">Downloading...</label>
<progress id="bar" value="46" max="100">46%</progress>
</body>
</html>Output:
Enjoy coding!
Read also: