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:
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:
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:
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:
Example: for <param> element
<!DOCTYPE html> <html> <body> <object data="horse.wav"> <param name="autoplay" value="true"> </object> </body> </html>
Output: