button element | button object
[This documentation is preliminary and is subject to change.]
Specifies a container for rich HTML that is rendered as a button.
  |
Standards information
- HTML 4.01 Specification, Section 17.5
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.8
HTML information
| Closing Tag | required |
|---|---|
| CSS Display | inline |
DOM Information
Inheritance Hierarchy
Remarks
The default value of the type attribute depends on the current document compatibility mode. The default value is submit. In other compatibility modes the default value is button.
When the BUTTON element is submitted in a form, the value depends on the current document compatibility mode.
Windows Internet Explorer 8 and later. The default value of the type attribute depends on the current document compatibility mode. In IE8 Standards mode, the default value is submit. In other compatibility modes and earlier versions of Windows Internet Explorer, the default value is button.
Internet Explorer 8 and later. When the BUTTON element is submitted in a form, the value depends on the current document compatibility mode. In IE8 mode, the value attribute is submitted. In other document modes and earlier versions of Internet Explorer, the innerText value is submitted.
Build date: 3/8/2012
REMEDY: Specify object.width.
COMMENT #2: An earlier bug, But resolved to a PC bug:
BUTTON PADDING in conjunction with bold B or font-weight=600, may bloat in normal webpage operation (IE7/8) and overflow right ...
The anomaly occurs in stepping-up from style=font:9pt to 10pt, or font:15px to 16px, and the font size bloats too.
The test settings are; <STYLE...> BUTTON {font:normal normal normal 10pt normal sans-serif}
(cf the editer-javascript-generated-preview-page does-not-bloat the same webpage button padding...!)
FOLLOWUP:
The problem has now disappeared on this-PC after I tried once -ms-layout-grid-mode : none ... Gone--! It's a PC problem.....
[Something turned all the Community Content Bold when I submitted this]
- 6/16/2010
- Mr. Raymond Kenneth Petry
- 1/24/2011
- Mr. Raymond Kenneth Petry
Are you nuts?
================================================================================
Unfortunately, it was their original decision to go non-standard that made things bad to begin with. They should now be commended because of their efforts towards all-standards compliance. The default value of the "type" attribute is specified here:
http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#edef-BUTTON
If you like, I can easily send you a global script to reset this value back to "button" so that your thousands-upon-thousands wouldn't look so bad.
obj.createElement("BUTTON");
// obj.type = "BUTTON" <------ doesn't work!
obj.setAttribute("type", "BUTTON") // does work!
This looks like a bug and even this behavior is not consistent to INPUT tag.
- 3/5/2010
- Artur Muszyński
- 3/5/2010
- Artur Muszyński
Interestingly, this behavior was fixed. IE7 submits back the value per the standards, while IE6 and previous submit back the innerText. One wonders what it takes to get errors corrected to MSDN :-)
-- einhverfr, can you provide an example that works in IE7 according to the standard? All of my tests show that the submit behavior has not changed with regards to innerText from IE6. (jsudds)
-- jsudds, on the LedgerSMB project, we have had a number of reports of things working in IE7 regarding use of button attributes. We use buttons for logalizing the labels of submit buttons. Would you like me to email you the HTML Output of the application where it is known to work on IE7?
-- einhverfr, if you post your working example here, the whole community can benefit from it. But failing that, could you please email it to damonhastings <at> yahoo.com? This bug is a constant nuisance for me. Thanks! (damonhastings)
- 8/23/2007
- einhverfr
- 4/19/2008
- damonhastings
Also, when having multiple buttons of type = submit on a form, they all get submitted when clicking one... When you all give them the same name, the innerHTML of the first one in the source gets submitted, instead of the clicked button.
another: When placing the button inside an Anchor, right-clicking the button doesn't give you the option to open the url of the parent anchor, nor does control-clicking work. Ff, Opera etc do allow this.
[jsudds] This is what I found on IE7 and IE6. (If your results are different, please provide a source example.)
<form action="#" method="get">
<input type="text" name="Name" maxlength="20"/>
<button type="submit" name="A">Btn1</button>
<button type="submit" name="B">Btn2</button>
<button type="submit" name="C">Btn3</button>
</form>
[Multiple submits with different names] In IE7, the form submits only the button clicked. If Enter key is used in the text box, the form is submitted without a button value. (Other browsers will submit the first button in this case.) In IE6, the form submits all buttons, even when pressing Enter in the text box.
<form action="#" method="get">
<button name="B" type="submit">Submit</button>
<button name="B" type="button">Button</button>
<button name="B" >Default</button>
</form>
[Duplicate names with different control types] The form submits all buttons on IE6 and IE7; name is unimportant. However, only the 'Submit' button works. Other browsers submit only the button pressed; both 'Submit' and 'Default' work.
<form action="#" method="get">
<input name="D" type="submit" value="one"/>
<input name="D" type="submit" value="two"/>
</form>
[Multiple submits with same names] The form submits only the button pressed on IE6 and IE7.
That last comment is a limitation of IE’s single-context-at-a-time context menu. It’s either a control, or an anchor, but not both. Not great, and not likely to change anytime soon. Can you suggest a real-world case where this coding style is used?
- 1/2/2008
- K-Many
- 1/3/2008
- John Sudds [Microsoft]
According to the HTML 4.0 recommendation, the button element should function just like buttons created with the input element. However, that is not the case here. Instead of passing back the content of the value attribute when clicked, the submit operation returns the innerText of the button. This behavior is unique to Internet Explorer.
Moreover, the recommendation defines the default type of button elements as "submit" not "button." To ensure that your button element works as expected, always specify the type attribute.
- 8/22/2007
- John Sudds [Microsoft]
