The BUTTON element allows for the creation of richer form control
widgets than the standard plain text used for BUTTON, RESET and
SUBMIT fields available via the INPUT element. The use of the
BUTTON element allows HTML formatting to be encapsulated within these
control widgets. The BUTTON element can contain most any non interactive
element such as character and block-level formatting.
Rendering details for the BUTTON element have a few suggested
guidelines; The size can be suggested using style sheets, but the
actual dimensions are determined by following these rules:
Clipping of content should be avoided.
Button size may be increased to accommodate this rule.
Window edges should not clip buttons.
Button size may be reduced to accommodate this rule or the line
rendering of button content may be wrapped to allow a better fit.
NOTE: HTML 4.0 considers the use of
image maps in conjunction with images in the BUTTON element to be
illegal.
Description:
This is a method of giving access/focus to an active HTML element using
a keyboard character. This is a common GUI paradigm also known
as a "keyboard shortcut" or "keyboard accelerator"
A single character is used as the value of this attribute. In addition,
a platform-dependent key is usually used in combination with the
ACCESSKEY character to access the functionality of the active field.
Values:CDATA.
[A single, case-insensitive character from a browser's character set.]
Description:
This is a stand-alone attribute which indicates the element is
initially non-functional. Disabled form elements should not be submitted
to the form processing script.
Description:
"Tabbing" is a method of giving access/focus to an active HTML
element using a standard keyboard sequence. All the active elements in a
document can be cycled through using this sequence (ex: Windows TAB key.)
The order of the active elements in this cycle is usually the order they
occur in the document, but the TABINDEX attribute allows a different order
to be established. The use of this attribute should create the following
tabbing order cycle if the browser supports the attribute:
Active elements using the TABINDEX attribute with positive integers are
navigated first. Low values are navigated first.
Active elements not specifying any TABINDEX attribute
Those elements carrying a DISABLED attribute or using negative TABINDEX
values do not participate in the tabbing cycle.
<buttontype="submit"
name="helpbutton" tabindex="1">
<imgsrc="helpicon.gif"
align="middle" /> Get the
<strong>HELP</strong>
that you need here...
</button>
If a BUTTON is used with an IMG element, it is a good idea to use the ALT
attribute to provide a description for users unable to see the image.
Browser Peculiarities
[Test] IE 4.0: submitting a form would only submit the 'innerText' content of
the BUTTON (the text content of the element.) IE 5.0: submitting a form submits the contents of the VALUE attribute
of the BUTTON if it is present. If it is not, the 'innerText' content
of the BUTTON is submitted instead. IE 6.0: Behaves like IE5.0, but the innerHTML is sent instead of
the innerText.
In Opera 4.0, CSS attributes (%core%) and event handler attributes
(%events%) are honored for this element, but none of the other
attributes appear to have any effect at all. Rendering of the element
as expected didn't occur until Opera 5.0.
[Test]
Opera 5.0 used the background color/image of the parent as the default face
for the button (unless set by CSS for the button of course.) Opera 6
uses the system user interface color designated for button faces as
IE and Netscape does.
[Test]
Netscape 6: If the DISABLED attribute is used, it grays out the content,
but I noticed that it did not gray out content inside tables that are
used in the BUTTON.
Opera 4.0 supported CSS and events applied to the BUTTON element content, but
didn't treat the element itself as a button widget. Opera ignores other unknown
elements so this must have been a special case. Opera 5 begins proper support
for this element.
Opera 6.0: Using DISABLED makes the button unusable, but it does not
gray the element out as Opera does with DISABLED for other form elements.
[Test]
Opera 5/6: Using the DISABLED attribute still sends the name/value pair
for the element to the form processing script. It should not do this.