Other Form Elements

---

HTML 4.0 initially added several form- related tags and attributes beyond those commonly used by Web developers. These are intended to address limitations in the current forms and to make them more interactive. While initially not supported, today most of these elements are supported in browsers and are included in the XHTML specification.

<button>

This element provides an alternate way to add generic buttons to forms. The text enclosed by the tag is the button's label. In its simplest usage, the button element is functionally equivalent to <input type="button"> . In most browsers that support both button forms, the following two statements render identically:

  <input type="button" value="Press Me" />   <button>  Press Me  </button>  

The <button> usage is more versatile because its content can include most inline and block-level elements. The following example illustrates a button element containing text, an embedded image, and the use of a cascading style sheet rule to change the background and text color .

  <button name="HomePage" value="Test Button"   type="button"   style="background-color:blue; color:yellow;">   <img src="images/logonotext.gif" alt="" width="141" height="197" />   <br />  Demo Company Home Page  </button>  

What is interesting about this element is that the browser should render the button in a relief style and even present a pushing effect, just like a Submit or Reset button, so it is not quite the same as <input type ="image" /> . Another key difference between the image button previously described and the button element is that the new element does not submit any coordinate information, nor is it strictly a Submit button. In fact, it is possible to tie this style of button to a general action using the type attribute. Allowed values for this attribute are button , submit , and reset . The HTML/XHTML specification suggests that submit is the default value.

Note  

It is incorrect to associate an image map with any image enclosed by a <button> tag.

Although the button element seems a more generalized way to deal with images as form buttons, it is not as well-supported as it could be. In particular, older browsers might require an alternative approach.

Labels

Another new form element initially introduced in HTML 4.0 is the label element. One use of this tag is to better support speech-based browsers that can read descriptions next to form fields. However, a more common use of the label element is to associate the labeling text of form controls with the actual controls they describe.

A <label> tag can be associated with a form control by enclosing it as shown here:

  <label>  First Name:  <input type="text" name="FirstName" id="FirstName" size="20" maxlength="30" />   </label>  

A <label> tag also can be associated with a control by referring to the control's id with the for attribute. In this usage, the label does not need to enclose the control. This allows labels to be positioned in tables with their own cells . It is common to use tables to make better-looking forms. Far too often, form elements snake down a page and are not aligned very well. The following code fragment illustrates how a <label> tag with the for attribute would be used.

  <table>   <tr>   <td align="right">   <label for="CustName">  Customer Name:  </label>   <td align="left">   <input type="text" name="CustName" id="CustName" size="25"   maxlength="35" />   </tr>   </table>  

The label element also supports the id , class , style , title , lang , and dir attributes as well as numerous event handlers. These are used in the same way as on any other HTML element. In particular, consider the use of label within style sheets to set the look of all form labels at once or in a group . The disabled and accesskey also are supported attributes for this element; these are discussed later in the chapter in the section on form accessibility enhancements.

Note  

Many browsers allow you to click on text enclosed within a label and have the associated field automatically focused. For this small usability improvement alone, page designers are encouraged to strongly consider using <label> tags.

< fieldset >

The fieldset element groups related form elements in much the same way the <div> element groups general body content. Like a <div> tag, a <fieldset> tag can be especially useful in conjunction with CSS to apply look or positioning information to a group of form fields at once. The fieldset element also can have an associated legend element to describe the enclosed items. The fieldset element itself has no special attributes aside from those core attributes common to all elements. However, the legend element does support the align attribute, which can be used to specify where the description will be rendered in relation to the group of form items; its values are top (the default value), bottom , left , or right . The example here illustrates how <fieldset> and <legend> tags are used:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">   <head>   <title>  Fieldset and Legend Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <form action="http://www.htmlref.com/scripts/scriptecho.php" method="post"   name="form1" id="form1">   <fieldset>   <legend>  Customer Identification  </legend>   <br />   <label>  Customer Name:  <input type="text" name="CustomerName" id="CustomerName" size="25" />   </label>   <br /><br />   <label>  Password:  <input type="password" name="CustomerID" id="CustomerID" size="8"   maxlength="8" />   </label>   </fieldset>   <br />   <input type="submit" value="Send" />   <input type="reset" value="Reset Form" name="reset">   </form>   </body>   </html>  

The HTML/XHTML specification recommends that content within a fieldset element be enclosed by a box. An example rendering as supported by Internet Explorer is shown in Figure 12-6.

Figure 12-6: <fieldset> and <legend> rendering under Internet Explorer

---