Section 9.6. The button Tag

9.6. The <button> Tag

As we described earlier, you create an action button with standard HTML or XHTML by including its type value in the standard <input> tag. For instance, the <input type=submit> form control creates a button that, when selected by the user , tells the browser to send the form's contents to the processing server or to an email address (the mailto option). Display-wise, you don't have any direct control over what that submit button looks like, beyond changing the default label "Submit" to some other word or short phrase (e.g., "Hit me" or "Outta here!").

First introduced in the HTML 4.0 standard, the <button> tag acts the same as <input> , but it gives you more control over how the browser displays the element. In particular, all of the attributes you might use with the <input type=button> element are acceptable with the <button> tag.

<button>

Function	Creates a button element within a form
Attributes	accesskey , class , dir , disabled , id , lang , name , notab , onBlur , onClick , onDblClick , onFocus , onKeyDown , onKeyPress , onKeyUp , onMouseDown , onMouseMove , onMouseOut , onMouseOver , onMouseUp , style , tabindex , taborder , title , type , value
End tag	</button> ; never omitted
Contains	button_content
Used in	form_content

9.6.1. The <button> Button

Neither the HTML 4 nor the XHTML standard is overly clear as to what display enhancements to a form the <button> element should provide, other than to suggest that the contents should be 3D and visually appear to react like a push button when the user selects it (i.e., go in and back out when pressed). All the popular browsers support <button> .

The <button> control provides for a greater variety and richer contents than its <input> analogs. Everything between the <button> and </button> tags becomes the content of the button, including any acceptable body content, such as text or multimedia. For instance, you could include an image and related text within a button, creating attractive labeled icons in your buttons . The only verboten element is an image map because its mouse- and keyboard-sensitive actions interfere with the form button.

9.6.2. The type Attribute

Use the type attribute for the <button> tag to define the button's action. You should set its value to submit , reset , or button . Like its <input> analog, a <button type=submit> form element, when selected by the user, tells the browser to package and send the contents of the form to the forms-processing server or email it to the mailto recipient. Using type=reset creates a conventional reset button, and using type=button creates a conventional push button.

For example, Figure 9-5 shows the following exclaim.gif icon inset on a 3D button that pushes in and pops back out when the user clicks it with the mouse. In doing so, the browser submits the form to the server:

Figure 9-5. A form-submit <button>

 <button type=submit> Order <img src="icons/exclaim.gif" align=middle alt="Order Now"> Now! </button> 

Notice that you can exploit the rich set of <img> tag attributes, including align and alt , for this <button> style of form control.

Because the <button> tag is so similar to the <input type=button> element, why have it at all? The only reason is to provide far richer content for buttons. If your buttons are conventional text buttons, the <input> tag will suffice. If you want to create fancy, mixed-content buttons, you'll need to use the <button> tag.