Forms in XHTML

Overview

A form in XHTML is just a user interface for entering data. It is the processing that makes it useful.

Early Internet form interfaces were specialized search clients.
• The files in online FTP archives were indexed by tools such as WAIS (Wide Area Information Server) to create large databases of information.
• The search clients were designed to submit a search term or terms - called the "query" - to one of these servers.
• The server sent back a list of the files that matched the query.
• This is similar to the way the Google search page lets you send your search terms to the Google.
• HTTP (WEb) clients were designed to be multi-purpose clients that could access not only HTTP servers, but also other types, including WAIS servers and FTP servers.
• From the very beginning, HTML provided forms for use with these servers. (Hence the use of the term "query")
• HTTP servers were extended to provide for customized processing of forms information (initially via the Common Gateway Interface).

Components

Forms have two parts:

• A visible form that appears on the screen, generated by the HTML that lies behind it.
• A program that processes the data entered into the form.

Form Controls

• Producing the visible form is simple but tedious.
• The HTML language includes a number of standard input types which the browser will display on the screen.
• The appearence is determined by the client software.
• The input elements, referred to as form controls, are essentially string variables together with a way of entering values for them.
• You can find all of them described in any good HTML book or online reference.
• There are online tutorials that illustrate form elements interactively.

Syntax

A form is a container element. The general structure of a basic form is:

        <form action="URL
                            other attributes"
        >

            <input  type="type"
                   name="name"
                  other attributes />
                  
        </form>
  

In XHTML, the action attribute is required.

Example 1

Here's an example: (more about the action later.)

    <form action="/cgi-bin/echo_form.cgi">
          <input type="text" 
                       name="demo" 
                       value="Initial text" 
          />
    </form>
  

The type determines the appearance and handling of the control produced by the browser.

The final look is determined by the browser.

The example in a separate page.

Example 2

Here is a form with four different types of input elements, as rendered by the client software you are currently using:

The example as a separate page.

The same form as seen in a line mode browser.

Element summary

Link to a chart showing the tags for different form controls.

Form actions

Formcontrols are essentially a combination of string variables and a method of entering values for them; the browser renders the fields and manages the input values. But what can we do with them?

The input element with type="submit" tells the browser to carry out the specified action URL.

The action is similar to the href of an anchor element; it can be of several different kinds, including:

1. Send the data as part of an HTTP request.
2. Process the data using a client-side script such as JavaScript. (If supported)
3. Send the data as an email message. (If supported)

Controlling form display

Users need to know what information the form controls are asking for. One common, but not always effective, approach is to use tables to visually associate identifying text with controls.

However, the the association is purely visual and the result may not be as effective with a line-mode browser, screenreader, or other type of user agent.

The next several elements were added in XHTML to improve the accessibility and presentation of forms.

label

The label inline element can logically associate text with form controls.

• The text is rendered normally, according to whatever structure and style tags are in applicable.
• The information is accessible by specialized applications.
• Labels are not yet necessarily implemented by all browsers.
• If the control has an id value, the label can be explicitly associated using that identifier.
• If the control does not have an id value, it can be implicitly associated by placing it within the label container. A label container may contain only one form control.

Example 3: Labels

    <form action="/cgi-bin/echo_form.cgi">
      
          <label>First element 
          <input type="text" 
              		   name="demo"
              		   id="d1" 
              		   value="Initial text" />
          </label>
          
          <label for="d2">Second element</label> 
          <input type="text" 
          		       name="demotoo"
          		       id="d2"
          		       value="More Initial text" />

    </form> 

As you can see, here and in The example as a separate page., a typical graphic browser, such as IE or Firefox doesn't give the label any special treatment. However it is available for use by non-graphic browsers if needed.

fieldset and legend elements

Blocks of form elements can be grouped using fieldset. The fieldset block may include an optional legend element. User agents may apply special rules to the group of elements such as distinctive styling and keeping the fieldset text on the same page when printing, if possible.

Example 4: fieldset & legend

 
    <form action="/cgi-bin/echo_form.cgi">
      
      <fieldset>
          <legend>It's legendary!</legend>
              <input type="text" 
              		 name="demo" 
              		 value="Initial text" />
      </fieldset>
      
      <fieldset>
          <input type="text" 
          		 name="demotoo"
          		 id="d2"
          		 value="More Initial text" />
      </fieldset>   		 
    </form>  

In the example as a separate page, the fieldset elements have some additional styling.

Selection list options

Options in a selection list may be grouped using optgroup. This provides additional flexibility for different user agents.

The option element also has an optional label attribute which is not the same as the label element. The label attribute provides alternative text that may be used in the selection list by some user agents, such as shorter text to used by handheld devices.

Warning:

The attribute multiple for the select element indicates that multiple options may be selected. It is often displayed as a list with scrollbars.

Example 5: Selection list options

      <select name="entered" id="entered">
        <optgroup label="This year.">
            <option label="2007" value="07" selected="selected">Current: 2007</option>
        </optgroup>         
        <optgroup label="Recent">
            <option label="2006" value="06">Recent: 2006</option>
            <option label="2005" value="05">Recent: 2005</option>
            <option label="2004" value="04">Recent: 2004</option>  
        <optgroup label="Not-so-recent">
            <option label="2003" value="03">A while ago: 2003</option>
            <option label="2002" value="02">A while ago: 2002</option>
            <option label="2001" value="01">A while ago: 2001</option>
            <option label="2000" value="00">A while ago: 2000</option>
        </optgroup>
            <option label="Pre Y2K" value="oldie">Ages ago: 1999 or earlier</option>
        </select>
        

In the example as a separate page, the select element has a few more options.

Example 6

Example form illustrating all these elements.

The Source code for the example form.

Form components summary

Note: It is not really recommended to use fieldset for this sort of visual display trick that is unrelated to the definition of the element.

Navigating forms: the tabindex and accesskey attributes

Non-graphic browsers use the keyboard or other input for navigation, not a mouse.

Users of graphical browsers may use the keyboard or voice for navigation, either by necessity or preference.

• The most common approach is to use the tab key to move the focus from one link or form element to another.
• The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard.
• The default order is determined by the order in which the elements appear in the document character stream (i.e. in the source code).
• The preferred order may be different - for example, if form input elements are arranged in a table, the default tabbing order would access them by row, but the more natural order may be by column.
• The tabbing order can be specified with the tabindex attribute.
• The tabindex value must be a number between 0 and 32767, but numbers need not be contiguous.
• An element can have only one tabindex, but multiple elements may have the same tabindex value.

In long documents, it's good if the user doesn't have to tab through all of the links or form elements to reach one specific one.

This is easy enough with the mouse, but tabbing is a sequential access.

• Links and form a elements can be a assigned an access key (also called a hot key) using the accesskey attribute.
• Using the access keys depends on the underlying system.
• On MS Windows, you usually have to press the "alt" key in combination to the access key
• On Apple systems, press the "cmd" key in combination with the access key.

The specific effect of the key depends on the associated element.

• text field: the focus moves to the field allowing input
• checkbox: it is toggled
• link: the link is followed.
• This link behavior is different from tabbing,which merely moves the focus to the link and requires an extra step to actually follow it.

Example 3

The following example illustrates both attributes. Experiment with tabbing and with the access keys (the bracketed numerals).

The highlighting is created with the CSS :focus pseudo-class.

<form id="showoff" action="">
  <div class="showy">

    <label accesskey="1">One [1] 
          <input type="text" tabindex="1" /></label><br />
    <a accesskey="4" href="/" tabindex="4">Four [4]</a>

          wyrd index<br/>

    <label accesskey="3">Three [3] 
          <input type="checkbox" tabindex="3" /></label><br />
    <a accesskey="6" href="forms.shtml" tabindex="6">Six [6]</a> 
          top of page<br/>

    <label accesskey="2">Two [2] 
          <input type="text" tabindex="2" /></label><br />

    <a accesskey="7" href="./" tabindex="7">Seven [7]</a>
          class index<br/>
    <label accesskey="5">Five[5] 
          <input type="text" tabindex="5" /></label><br />

The example as a separate page.

Designing forms

Guidelines from Sensible Forms: A Form Usability Checklist by Brian Crescimanno

• Use the right field for the task
• Give them room to type
• Shorten your forms and question “mandatory” fields
• Mark mandatory fields clearly
• Provide descriptive labels for all of your fields
• Let the computer, not the user, handle information formatting (Note: You can't do the handling yet, but you can make the form fit the guideline.)

Lab Exercise: Create an online form

Create a basic HTML feedback form for your site. It should be designed to provide information to you about how visitors .

TEST THE FORM by coding it with an ACTION that submits the form to http://wyrd.hood.edu/cgi-bin/echo_form.cgi so that you can see exactly what is being received by the program. (This is very useful when developing and debugging a form.)

Your form should include at least the following form elements:

• two or more text input fields (For example, Name and grade)
• at least one group of three or more radio buttons (For example, "Rate this site")
• At least one group of three or more checkboxes (For example, to indicate "Which things do you like about this site?")
• at least one textarea field (For example, "Comments")
• at least one selection list (For example, "How did you discover this site")
• Submit and Reset buttons

You can ask different questions as long as you use the required elements.

Overall, the exercise page should:

• use fieldset and legend appropriately
• use the label element to identify fields
• provide an accesskey for each control
• provide a tabindex for each control
• include appropriate text, besides the form labels