value (HTML attribute)

Spec
Depr. Version
No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

value="value"

Description

The button element has the potential to encapsulate a number of different HTML elements and a range of content. HTML authors are unable to access the data submitted via this element. The value attribute can be used to alleviate this issue, although the most common scenario sees value used to identify which of a series of button elements a user clicked on, and to behave accordingly, as suggested in the example above.

Example

This markup defines different value attributes for two submit buttons:

<form>
⋮
  <button accesskey="b" name="cmdsubmitter1"
      type="submit" value="blue">
      Take the <strong style="color:blue;">blue</strong> pill
  </button>
  <button accesskey="r" name="cmdsubmitter2"
      type="submit" value="red">
      Take the <strong style="color:red;">red</strong> pill
  </button>
</form>

Value

This attribute can take any name or value that the developer chooses.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

Most browsers deal with this attribute properly, correctly submitting the data contained inside the value attribute, but Internet Explorer handles this differently. Assuming you have three buttons, each with different text presented to the user and different values that you want to send depending on which button is pressed, as shown in the markup below:

<div><button name="buttonChoice" value="btn1" 
 type="submit">Button 1 Text</button></div>
<div><button name="buttonChoice" value="btn2" 
 type="submit">Button 2 Text</button></div>
<div><button name="buttonChoice" value="btn3" 
 type="submit">Button 3 Text</button></div>

In all versions of IE, it’s not, as you might expect, the value attribute that gets sent (in the example above "btn1", "btn2" or "btn3"). Instead, the inner HTML is passed through (including any additional markup that may be inside). So, for example, <button value=”proceed”>Yes, <strong>please proceed</strong></button> would be submitted as Yes,+%3CSTRONG%3Eplease+proceed%3C%2FSTRONG%3E, not the value “proceed”.

For this reason, the button element should be used with caution - or avoided entirely to be on the safe side.

User-contributed notes

Related Products