Tutorial 13: Giving Form to Forms
|
| ||||
| ||||
|
|
Generic buttons with the BUTTON element
The BUTTON element is a new element in HTML 4.0 that aims to replace INPUT controls with TYPE reset, submit and button. It has similar function with these controls, but is not an empty element, and can contain other markup, which is displayed inside the button. This is a very powerful rendering mechanism. The BUTTON element is unsupported by Navigator.
The BUTTON element
- Context:
- Can only appear inside a FORM element
- Contents:
- Can contain block-level elements. However, none of the elements contained in a BUTTON element may be hyperlink heads, nor can images with image maps be included.
- Tags:
- Both start-tag and end-tag are required.
Attributes for the BUTTON element
- TYPE (Control type)
- A button's type mey be one of submit, reset or button. An explanation of each is given below.
- NAME (Name)
- The control name of the button.
- VALUE (Text)
- The value for the control. The precise handling of this value depends on the type of control.
- Disabled control attribute
- Identifier and classification attributes
- Language information attributes
- Title attribute
- Inline style information attribute
- Tabbing navigation attribute
- Accessibility key attribute
- Intrinsic event handler attributes
BUTTON elements behave more or less like the corresponding INPUT elements. If TYPE is set to reset, the button resets the form when it is activated, and the control name and value are ignored. If TYPE is set to submit, the name and value are only used if the button is used to submit the form. If TYPE is set to button, the button does nothing but can be used by client-side scripts.
The BUTTON element is supported by Internet Explorer since version 4.0. Navigator does not support the BUTTON element, but Mozilla does, so we'll probably see it in version 5.0.
<FORM ACTION="/cgi-bin/html/formdump.cgi" METHOD="GET" ENCTYPE="application/x-www-form-urlencoded"> <P>Enter your name: <INPUT TYPE="text" NAME="name" SIZE="30"> <BUTTON TYPE="reset"><P><IMG SRC="example2.gif" ALT="Oops"></BUTTON> <BUTTON TYPE="reset"><P><IMG SRC="example3.gif" ALT="OK!"></BUTTON> <BUTTON TYPE="reset" ONCLICK="alert('Hello!')"><P>Say Hello!</BUTTON> </FORM>
A note on backwards compatibility: Since user agents (such as Netscape) that don't understand BUTTON usually just ignore its start- and end-tags, its contents are rendered normally, so care should be taken, when this element is used, to make it so that the contents should be meaningful in their context even if the BUTTON element wasn't surrounding them.
