| Depr. | Version |
|---|---|
| No | HTML 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Buggy | Full | Full | Full | Full |
Syntax
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.
