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:

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 »