The HTML value attribute
The HTML value attribute sets the control's value — the initial or submitted data, depending on the element. It is used on form controls including <input>, <option>, <button>, <li>, <meter>, <progress> and <data>.
Overview
The value attribute sets a control's value — but what that means depends on the element. On a text <input> it sets the initial text; on a checkbox or radio it sets the value that is submitted when checked (not whether it is checked); on an <option> it is what is submitted when that option is selected; and on <li>, <meter>, <progress> and <data> it has its own meaning.
For text inputs, value sets only the initial value — once the user types, the attribute and the live value diverge, so read element.value in JavaScript for the current value. On checkboxes and radios, the value is submitted only if the control is checked, which is why grouping radios by name and giving each a distinct value is how you capture the choice.
One exception worth remembering: <textarea> has no value attribute — its initial content goes between the opening and closing tags instead.
Syntax
<input type="text" name="city" value="London">Values
| Value |
|---|
| A string or number, depending on the element and input type. |
Example
<input type="text" name="city" value="London" style="padding:8px;">Best practices
- On checkboxes and radios,
valueis what is submitted when checked — set it meaningfully. - For text inputs, remember
valueis only the initial value; readelement.valuein JavaScript for the current one. - Give each <option> a
valuewhen the submitted data differs from the visible text. - Put a <textarea>'s initial content between its tags, not in a
valueattribute.
Frequently asked questions
What does the value attribute do?
Does value set whether a checkbox is checked?
value is what gets submitted when the box is checked.Why doesn't value update as I type?
element.value in JavaScript for the live, current value.