XHTML Forms - Web Development and Design Foundations with XHTML - page 374

Table 9.12 Common attributes of the <button> tag

Common
Attributes Values Usage

Functions as a submit button.

type submit

Functions as a reset button.

reset

Functions as a button.

button

Alphanumeric, no spaces, begins
with a letter

Names the form element so that it can be easily
accessed by client-side scripting languages (such as
JavaScript) or by server-side processing. The name
should be unique.

name

Brief text description of the image Provides accessibility to visitors unable to view the

image.

alt

Alphanumeric, no spaces, begins
with a letter

Provides a unique identifier for the form element.

id

Text or numeric characters A value given to a form element that is passed to the

form handler.

value

Figure 9.21 shows a form that has an image (signup.gif) configured as a submit button
using the <button> element.

Figure 9.21
The <button>
element configured
as a submit button

The following XHTML code creates the button shown in Figure 9.21:

<button type="submit">
<img src="signup.gif" width="80" height="28" alt="Sign Up for
Newsletter" />
</button>

As you visit Web pages and look at their source code, you will find that the <button>
element is not used as often as the standard submit button or the image button.

9.4 Using CSS to Style a Form

Many Web developers cruise along using CSS for page layout until they need to code a
form. Tables (usually avoided when coding CSS page layouts) are traditionally used to
configure forms. This section will show you two approaches to using CSS to style a
form—the first uses a table whose attributes have been configured with CSS instead of
with XHTML, the second does not use an XHTML table.