HTML value Attribute

The value attribute on an element sets the value of the element. The semantics (meaning and usage) of the value depends on the element. Elements that accept this attribute includes <input>, <button>, <option>, <data>, <li>, <meter>, <progress>, and <param>, .

Example

#

A variety of <input> elements, each with their own value.

Edit User Information First name  

Last name  

       

<form action="/tutorial/action.html">
 <fieldset style="background:#f6f8ff;border:2px solid #4238ca;">
  <legend>Edit User Information</legend>

    First name &nbsp; <input type="text" name="firstname" value="Alex"><br /><br />
    Last name &nbsp; <input type="text" name="lastname" value="McNeil"><br /><br />
  
    <label>Gender</label> &nbsp;
    &nbsp; <label for="male"><input type="radio" id="male" name="gender" value="male" checked> Male</label>
    &nbsp; <label for="female"><input type="radio" id="female" name="gender" value="female"> Female</label>
    &nbsp; <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.


Using value

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:

  • <input> of type button, reset, and submit. The value is used as the text.
  • <input> of type text, password, and hidden. The value serves as the initial value.
  • <input> of type checkbox, radio, and image. The value is submitted to the server.
  • <button>. The value is submitted to the server when clicked.
  • <option>. The value is the selected value of the select element.
  • <li>. The value is the starting number to display on the item in the ordered list.
  • <data>. The value adds additional information to its contained content.
  • <param>. The value sets the value of the parameter.
  • <meter>. The value sets the initial value of a range.
  • <progress>. The value sets the initial value of a range.

Syntax

<tagname value="text">

Values

#

Value Description
text An alphanumeric string.

Elements that accept value

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.

<button> with value

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.


<option> with value

A value attribute on an <option> element.
The selected value is sent during form submission.

Your location
<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.


<data> with value

A value attribute on a <data> element.
The invisible values represent the cost of each product.

  1. Sugar
  2. Jelly
  3. Bread
<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.


<li> with value

A value attribute on an <li> element.
This attribute sets the starting value for the remainder of the list.

  1. Paper
  2. Pencils
  3. Scissors
  4. Erasers
<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.


<meter> with value

A value attribute on a <meter> element.
This attribute assigns the initial meter value.

Pressure reading

7/10
<div>Pressure reading</div>

<br />
<meter min="1" max="10" value="7">7/10</meter>

For additional details see our HTML meter value Reference.


<progress> with value

A value attribute on a <progress> element.
This attribute assigns the initial progress value. The control repeatedly fills with the help of JavaScript.

Loading files...

<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.


<param> with value

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.


Browser support

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

You may also like



Guides