لطفا منتظر باشید ...
9.6 The <button> Tag
As we described earlier, you create an
action button with traditional 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 the
<input> button, 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, onBlur, onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, tabindex, 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 button control 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 selected by the user (i.e., go in and
back out when pressed). Internet Explorer Versions 5 and later and
Netscape Navigator Version 6 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 labelled icons in your buttons.
The only verboten element is an image map, since
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. Its value should be set 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 how Netscape renders
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:
<button type=submit>
Order <img src="/image/library/english/10232_exclaim.gif" align=middle > Now!
</button>
Figure 9-5. A form-submit <button>
Notice that you can exploit the rich set of
<img> tag attributes, including
align and alt, for this
<button> style of form control.
Since 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.
