Compare Revisions

<button>

Change Revisions

Revision 58724:

Revision 58724 by pixelastic on

Revision 233824:

Revision 233824 by pixelastic on

Title:
button
button
Slug:
HTML/Element/button
HTML/Element/button
Tags:
HTML, HTML:Element, "HTML:Element Reference", Forms
HTML, HTML:Element, "HTML:Element Reference", Forms
Content:

Revision 58724
Revision 233824
tt431      Notes
432    </h2>
433    <p>
434      <code>&lt;button&gt;</code> elements are much easier to sty
 >le than {{ HTMLElement("input") }}&nbsp;elements. You can add inn
 >er HTML content (think <code>&lt;em&gt;</code>, <code>&lt;strong&
 >gt;</code> or even <code>&lt;img&gt;</code>), and make use of {{ 
 >Cssxref(":after") }}&nbsp;and {{ Cssxref(":before") }}&nbsp;pseud
 >o-element to achieve complex rendering while {{ HTMLElement("inpu
 >t") }} only accept a text value attribute.
435    </p>
436    <p>
437      IE7 has a bug where when submitting a form with <code>&lt;b
 >utton type="submit" name="myButton" value="foo"&gt;Click me&lt;/b
 >utton&gt;</code>, the <code>POST</code> data sent will result in 
 ><code>myButton=Click me</code> instead of <code>myButton=foo</cod
 >e>.<br>
438      IE6 got an even worse bug where submitting a form through a
 > button will submit ALL buttons of the form, with the same bug as
 > IE7<br>
439      This bug has been fixed in IE8
440    </p>
441    <p>
442      Firefox will add, for accessibility purposes, a small dotte
 >d border on a focused button. This border is declared through CSS
 >, in the browser stylesheet, but you can override it if necessary
 > to add you own focused style using&nbsp;<code>button<span class=
 >"sy0">:</span><span class="re2">:-moz-focus-inner { }</span></cod
 >e>
443    </p>
444    <p>
445      &nbsp;
446    </p>
447    <h2>

Back to History