HTML value Attribute

HTML value Attribute

The HTML value attribute specifies a value associated with an element. Its exact meaning depends on the element, such as providing an initial value for a form control, a submitted value for an option or button, a number for a list item, or a current measurement for a meter or progress indicator.

Elements That Use the value Attribute

The value attribute is used with several HTML elements, and its meaning depends on the element.

value Attribute Value

There is no single type of value that applies to every element. Depending on the element, the value attribute can contain text, an integer, a floating-point number, or another element-specific value.

<input type="text" value="Garden Club">

<option value="oregon">Oregon</option>

<li value="5">Fifth Item</li>

<progress value="70" max="100">70%</progress>

Always use a value that is valid for the element on which the attribute appears.

Using value with <input>

On an <input> element, the meaning of value depends on the input type. For many text-based controls, the attribute provides the control's initial value.

<label for="name">Name:</label>
<input type="text" id="name" name="name" value="Jane Smith">

For checkbox and radio controls, value specifies the value associated with that control when it is selected and submitted with the form.

<input type="checkbox" id="newsletter" name="subscription" value="newsletter">
<label for="newsletter">Newsletter</label>

For button-like input types such as button and submit, the value can also provide the text displayed on the button.

<input type="submit" value="Send Form">

Using value with <button>

On a <button> element, the value attribute specifies the value associated with the button for form submission. The visible button label is provided by the content between the opening and closing tags.

<button type="submit" name="action" value="save">Save Changes</button>

In this example, the user sees Save Changes, while the submitted value for the control named action is save when that button is used to submit the form.

Using value with <option>

On an <option> element, the value attribute specifies the value represented by that option. When the option is selected and its <select> control is submitted, this value is used as the option's submitted value.

<label for="state">State:</label>
<select id="state" name="state">
  <option value="oregon">Oregon</option>
  <option value="washington">Washington</option>
  <option value="california">California</option>
</select>

If the value attribute is omitted, the option's text content is used as its value.

Using value with <li>

When an <li> belongs to an ordered list, its value attribute can set the ordinal value of that list item. The value must be a valid integer.

<ol>
  <li>First Item</li>
  <li value="5">Fifth Item</li>
  <li>Sixth Item</li>
</ol>

Changing an item's ordinal value also affects the numbering of following items in the ordered list.

Using value with <meter> and <progress>

On a <meter> element, value specifies the current measured value within the gauge's defined range.

<meter min="0" max="100" value="75">75%</meter>

The value must be within the minimum and maximum values. If min and max are omitted, their defaults are 0 and 1.

On a <progress> element, value specifies how much of a task has been completed.

<progress value="70" max="100">70%</progress>

The value must be between zero and the max value. If max is omitted, the maximum defaults to 1. Omitting value entirely creates an indeterminate progress indicator, which represents a task whose completion amount is not currently known.

Using value with <data>

On a <data> element, the value attribute provides a machine-readable representation of the element's human-readable content.

<p>Product: <data value="SKU-1048">Garden Container</data></p>

In this example, users see Garden Container, while SKU-1048 provides a machine-readable value associated with the product.

Common Mistakes

Do not assume the value attribute has the same meaning on every element. Its meaning and permitted values depend on the element where it is used.

Do not confuse an <option> element's visible text with its value. They can be different, and the value attribute determines the option's value when it is provided.

Do not use a non-integer value for value on an <li> element. Ordered-list item values must be valid integers.

Do not give <meter> or <progress> a value outside its permitted range.

Do not use value="0" to create an indeterminate <progress> element. An indeterminate progress indicator is created by omitting the value attribute.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The value attribute and its established uses are widely supported in current core browsers. Browser support can vary when an attribute has different behavior or permitted values depending on the element where it is used.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the value Attribute

The example demonstrates how the value attribute can provide an initial value for a text input, a submitted value for an option, an ordinal value for an ordered-list item, and current values for meter and progress elements.

Summary

The HTML value attribute specifies a value associated with an element. It can provide values for form controls and options, set the ordinal value of an ordered-list item, define the current measurement of a <meter>, indicate task completion with <progress>, or provide machine-readable information with <data>. Always interpret and use value according to the element on which it appears.