Tutorial 13: Giving Form to Forms - HTML with Style | 8

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.

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial13/15.html

Created: May 28, 1998
Revised: February 25, 1999