HTML value Attribute
Definition and Usage
For <button>, <input> and <option> elements, the value attribute specifies the initial value of the element.
For <li> elements, the value attribute sets the value of the list item (for ordered lists). The next list items will increment from that value.
For <meter> elements, the value attribute specifies the current value of the gauge.
For <progress> elements, the value attribute specifies how much of the task has been completed.
For <param> elements, the value attribute specifies the value of the parameter.
Applies to
The value attribute can be used on the following elements:
| Elements | Attribute |
|---|---|
| <button> | value |
| <input> | value |
| <meter> | value |
| <li> | value |
| <option> | value |
| <progress> | value |
| <param> | value |
Examples
<button> Example
Two buttons with equal names, that submit different values when clicked:
<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>
Try it Yourself »
<input> Example
An HTML form with initial (default) values:
<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>
Try it Yourself »
<li> Example
Use of the value attribute in an ordered list:
<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
Try it Yourself »
<meter> Example
A gauge with a current value, min, max, high, and low segments:
<meter min="0" low="40" high="90" max="100" value="95"></meter>
Try it Yourself »
<option> Example
A drop-down list inside an HTML form:
<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>
Try it Yourself »
<progress> Example
Downloading in progress:
<progress value="22" max="100"></progress>
Try it Yourself »
<param> Example
Set the "autoplay" parameter to "true", so the sound will start playing as soon as the page loads:
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
Try it Yourself »
Browser Support
The value attribute has the following browser support for each element:
| Element | |||||
|---|---|---|---|---|---|
| button | Yes | Yes | Yes | Yes | Yes |
| input | 1.0 | 2.0 | 1.0 | 1.0 | 1.0 |
| li | Yes | Yes | Yes | Yes | Yes |
| meter | 8.0 | 13.0 | 6.0 | 6.0 | 11.0 |
| option | Yes | Yes | Yes | Yes | Yes |
| progress | 8.0 | 10.0 | 16.0 | 6.0 | 11.0 |
| param | Yes | Yes | Yes | Yes | Yes |
