Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Form Elements

Last updated Oct 17, 2003.

By Molly Holzschlag

There are numerous elements and attributes used in forms, many unique to forms themselves and not applicable to other aspects of markup. Forms require input options to be displayed and made functional by the form. So elements are interpreted and displayed as controls. First, we'll review the elements used in forms and then I'll show you more about form controls.

Form elements of note include the following:

  • form. The foundational element of all forms, form is a container element. The element accepts a variety of attributes. The two most critical are action, which combines with a URL to the form processor, and method, which takes the value of get or post depending upon the way the form technology is set up.

  • input. The input element is responsible for managing the input attributes that will be added to the element. These attributes dictate the type of form control to be displayed. Note that input is an empty element and therefore must terminate in XHTML as <input />. Commonly used attributes for the input element are as follows:

    • type. This attribute specifies the type of control being called upon. See the "Controls" section for details.

    • name. The name attribute names the control.

    • value. The value attribute describes the input control, determining the value for input, labels for buttons, and the value to be sent back in the event that a checkbox or radio button is checked. The use of value is optional with all controls except for radio or checkbox.

    • size. The width of the input control in pixels. Sometimes the number of characters determines the size of the control, as is the case with the text and password controls. Size is considered a presentational attribute, so in strict HTML and XHTML documents, you'll want to use style sheets instead of the size attribute.

    • maxlength. The maximum numbers of input characters allowed in an input control.

    • checked. This option preselects a given radio button or checkbox within a form. Note that the attribute name is minimized (stands alone) in HTML, but must be written as an attribute name and value in order to conform to the rules of XHTML.

    • src. Allows you to determine the location of an image to be used for graphical button elements within the form.

    • alt. Specifies alternative text for graphical buttons.

  • textarea. This element creates a text input area. The attributes it accepts are name (see above), rows="x" where x defines the numbers of lines in the box, and cols="x", where x specifies the width of the box.

  • select. The select element creates a menu. You can add the multiple attribute if you'd like to have a site visitor be able to choose more than one option in the list menu.

  • option. This element defines each individual list item within a menu. Both the opening and closing tags are required. Note that the end tag in HTML 4.0 was optional with the option element, but is necessary in XHTML because the element is non-empty element. It contains the text to display in each list item and the value to be submitted if the item is selected.


Be sure to see Listing 1 in the following section, which provides an example of a working form using many of these options.