HTML value Attribute

HTML value Attribute: The HTML value Attribute is used to specify the value of the element with which it is used. It has different meaning for different HTML elements. It can be applied on <button>,<input>,<meter>,<li>,<option>,<progress>,<param>.

Usage: It can be used with the following elements: <input>, <button>, <meter>, <li>, <option> <progress> and <param>.

<input>: When the value attribute is present, it specifies the initial value of the input element.

HTML value Attribute

It has a different meaning for different input type:

  • When present in “button”, “reset” and “submit” it specifies the text on the button.
  • When present in “text”, “password” and “hidden” it specifies the initial value of the input field.
  • When present in “checkbox”, “radio” and “image” it specifies the value associated with the input.

Syntax: <input value = “value”>

Browser Support:

This attribute is supported by the following browsers:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Internet Explorer

Example: for <button> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
</form>
</body>
</html>

Output:

HTML value attribute

Example: for <input> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  First name: <input type="text" name="fname" value="John"><br>
  Last name: <input type="text" name="lname" value="Doe"><br>
  <input type="submit" value="Submit form">
</form>
</body>
</html>

Output:

HTML value attribute

Example: for <li> element

<!DOCTYPE html>
<html>
<body>
<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>
</body>
</html>

Output:

100. Coffee
101. Tea
102. Milk
103. Water
104. Juice
105. Beer

Example: for <meter> eleement

<!DOCTYPE html>
<html>
<body>
<p>Display a gauge:</p>
<p>A's score: <meter min="0" low="40" high="90" max="100" value="95"></meter></p>
<p>B's score: <meter min="0" low="40" high="90" max="100" value="65"></meter></p>
<p>C's score: <meter min="0" low="40" high="90" max="100" value="35"></meter></p>
</body>
</html>

Example: for <option> element

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<select name="cars">
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:

HTML meter element

Example: for <progress> element

<!DOCTYPE html>
<html>
<body>
Downloading progress:
<progress value="22" max="100">
</progress>
<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

Output:

HTML progress element

Example: for <param> element

<!DOCTYPE html>
<html>
<body>
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
</body>
</html>

Output: