The value attribute on an element sets the value of the element.
The meaning and usage of the value depends on the element.
Elements that accept a value includes <input>, <button>, <option>, <data>, <li>, <meter>, <progress>, and <param>.
Different <input> controls, each with their own value.
<form action="/tutorial/action.html">
<fieldset style="background:#f6f8ff;border:2px solid #4238ca;">
<legend>Edit User Information</legend>
First name <input type="text" name="firstname" value="Alex"><br /><br />
Last name <input type="text" name="lastname" value="McNeil"><br /><br />
<label>Gender</label>
<label for="male"><input type="radio" id="male" name="gender" value="male" checked> Male</label>
<label for="female"><input type="radio" id="female" name="gender" value="female"> Female</label>
<label for="other"><input type="radio" id="other" name="gender" value="other"> Other</label><br /><br />
<input type="hidden" name="userid" value="819404">
<input type="submit" value="Submit">
</fieldset>
</form>
For additional details see our HTML input value Reference.
The value attribute specifies the element's value.
The semantics (meaning and usage) of the value depends on the element.
These are the elements that accept the value attribute and how they use the value:
<tagname value="text">
| Value | Description |
|---|---|
| text | An alphanumeric string. |
The following elements accept the value attribute.
| Elements | Description | |
|---|---|---|
| <input> | Specifies an input field -- see example above | |
| <button> | Creates a clickable button. | |
| <option> | Adds an option to a dropdown element. | |
| <data> | Adds a machine-readable value to its content. | |
| <li> | Adds an item to an ordered list. | |
| <meter> | Displays a scalar measurement within a known range. | |
| <progress> | Graphically displays the percent of work completed. | |
| <param> | Sets a parameter value for an <object> element. |
A value attribute on a <button> element.
Clicking a button submits its value. These buttons function much like radio buttons.
<form action="/tutorial/action.html">
<button name="score" type="submit" value="High">High</button>
<button name="score" type="submit" value="Medium">Medium</button>
<button name="score" type="submit" value="Low">Low</button>
</form>
For additional details see our HTML button value Reference.
A value attribute on an <option> element.
The selected value is sent during form submission.
<form action="/tutorial/action.html">
<fieldset>
<legend>Your location</legend>
<select name="country" style="width:220px;">
<option value="">-- Select a Country --</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="fr">France</option>
<option value="de">Germany</option>
</select><br/>
<input type="submit" value="Submit">
</fieldset>
</form>
For additional details see our HTML option value Reference.
A value attribute on a <data> element.
The invisible values represent the cost of each product.
<ol>
<li><data value="$2.19">Sugar</data></li>
<li><data value="$2.99">Jelly</data></li>
<li><data value="$3.97">Bread</data></li>
</ol>
For additional details see our HTML data value Reference.
A value attribute on an <li> element.
This attribute sets the starting value for the remainder of the list.
<ol>
<li>Paper</li>
<li value="55">Pencils</li>
<li>Scissors</li>
<li>Erasers</li>
</ol>
For additional details see our HTML li value Reference.
A value attribute on a <meter> element.
This attribute assigns the initial meter value.
<div>Pressure reading</div>
<br />
<meter min="1" max="10" value="7">7/10</meter>
For additional details see our HTML meter value Reference.
A value attribute on a <progress> element.
This attribute assigns the initial progress value. The control repeatedly fills with the help of JavaScript.
<div>Loading files... </div>
<br />
<progress id="myprogress" value="30" min="0" max="100"></progress>
<script>
setInterval( function(){
let value = document.getElementById("myprogress").value;
value = Math.min(value + .1, 100) % 100;
document.getElementById("myprogress").value = value;
}, 10 );
</script>
For additional details see our HTML progress value Reference.
A value attribute on a <param> element.
The value identifies the embedded object as a PDF document.
<object data="/media/contract.pdf" style="width:100%;height:450px;">
<param name="type" value="application/pdf" />
</object>
For additional details see our HTML param value Reference.
Here is when value support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
