button (HTML element)

Description

The button form control is an attempt at improving the humble "submit" button (input type="submit"), which can only contain one line of text (the value attribute), and places certain limitations on the possibilities for CSS styling. It’s possible to wrap the button element around a whole collection of HTML elements, encapsulating the entire area as a single, clickable element. Of course, it’s not necessarily wise to cram too much into the button, but some helpful effects are possible. For example, this control could be used to add emphasis to part of the button text, as Figure 1 shows.

Figure 1. Formatting part of the button text differently from the rest

By default, the button should act as a "submit" button, but we can set it, via the type attribute, to be a "reset" or a simple "button" (with no default action—we’d need to use JavaScript to add behavior in this case).

Use This For …

This control is used in cases where a simple "submit" button isn’t capable of containing the information required, or where CSS styling requirements can’t be met by a simple "submit" button.

Compatibility

Rendering of the button and its contents varies, but Internet Explorer presents both the worst rendering and functionality issues. IE will not submit a form with a button unless there is a type attribute set to "submit" (it should default to "submit" rather than have to be told). This is easy enough to put right, then, but there are bigger problems with the data that is submitted. In IE versions 6 and earlier, if you have several buttons with the same name but with three different values and text displayed inside the button to the user (see code sample below), it does not matter which button is pressed, data from all three are passed through, rather than just the button that is pressed (IE7, IE8 only submit the data from the button pressed).

<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>

Using the markup above in a simple test page that submits to itself using a method of "get", IE versions 6 and earlier will send the following (carriage returns added to make it fit - would normally appear in the address bar in one continual line):

button%20test.html?buttonChoice=Button+1+Text&
buttonChoice=Button+2+Text&buttonChoice=Button+3+Text

This certainly makes using the button element tricky with IE. Assuming that catering for IE6 is important for your audience - and it still is for a significant number of web sites - you may be better off avoiding this element entirely, opting instead for a simple input of type "submit". For more information about the what data is submitted by IE refer to the button value compatibility section.