The Future of Forms

In the beginning, Internet users were willing to put up with bare bones HTML, but now users expect to find the future. They expect and demand nothing less than the best.

The features available with Dynamic HTML -- the ability to enhance the capabilities of a form in terms of layout and functionality -- represent the first real attempt to provide the kind of presentation users are expecting.

In this article, I will show you how to create a Dynamic "Growing" form that adapts to selections the user makes by checking a box or clicking on a radio button. Before we get any deeper, try the demo so you can get a feel of what The Future of Forms holds for us.

Getting started

To fully grasp the concepts discussed in this article, you will need at least a working understanding of HTML forms and a familiarity with the basic elements of JavaScript.

We will begin by creating an HTML form that uses the functionality of the display property to make form elements appear and disappear in response to user actions. Next we'll look at using some of the new HTML form elements and attributes. These new features will give you greater control over the flow of information and let you provide more ways for those elements to be accessed by the user. But first, we will look at what the new features are.

Growing forms

The first Dynamic form, and probably the easiest to make, is the growing form. As the user answers questions additional questions are added. For example, start by asking the user for a name and email address and whether or not he or she has children. Once those questions are answered new questions will pop-up. One set of questions will appear if they do have children, and another set if they do not.

Making the growing form work requires that we use a few simple JavaScript functions and a Cascading Style Sheet (CSS). The JavaScript controls the Document Object Model (DOM), determining which elements are visible and when elements are made visible.

Creating a growing form

The growing form is actually very simple to create. You will use a small JavaScript subroutine to tell the browser to hide or display various HTML elements. Listing 1 shows the JavaScript required:

Listing 1: Growing Forms Script

function gokids() {
var kids = document.all.kid
kids.style.display='block'
}
function nokids() {
var kids = document.all.kid
kids.style.display='none'
}

When the gokids() subroutine is called (with the help of a defined event handler), the browser changes the default value of the display property, which was set at none in the style sheet, to block. What this means onscreen is that the element whose ID value is kids becomes visible. Alternately, when the nokids() subroutine is fired, the element disappears.

In JavaScript, we provided the subroutines to handle the job of showing and hiding the elements. The subroutine sets the value of the display property to either block, if we are showing the element, or none if we are hiding the element. In the style sheet, we created a style class called hidden that sets the default display value of any elements with its class name to none.

In the HTML we will need to include an event handler to let the browser know when to fire the script:

onclick="gokids()"

We also need to include the class name attribute, CLASS="hidden", for the elements that will be hidden when the page is loaded.

Form enhancements

Netscape Navigator and Internet Explorer offer the greatest level of document control in the history of hypertext. The HTML form elements and HTML element attributes introduced here will be used later in this article to construct truly Dynamic HTML forms. NOTE: Most of the information discussed here is true for IE4 only.

<LABEL>

The <LABEL> tag is wrapped around the form text and acts as a label for a control. It lets you create a link between the form control and the label text, which is one of several ways to use the accesskey attribute (discussed later) for keyboard shortcuts.

There are five attributes for the <LABEL> tag: accesskey, disabled, for, onblur, and onfocus.

• The for attribute is required as it identifies the control that the label refers to.
• Use the disabled attribute to render a control unusable.
• onfocus and onblur are two browser events that are fired when the control, not the label, gains and loses the focus (in that order).

There are other events which can be attached to the text of the label, but that's something different. To make use of other events for the label, wrap another HTML element around the text (a simple <B> tag will do), and you will be able to use any of the events associated with that element.

To understand the relationship that the onfocus and onblur attributes have with the label, consider the following.

Listing 2: Playing with the focus

<SCRIPT>
function red() {
document.all.cool.style.color = 'red'
}
function blk() {
document.all.cool.style.color = 'black'
}
</SCRIPT>
<FORM>
<LABEL for="myinput" 
  ID="cool" accesskey="P" onfocus="red()" 
  onblur="blk()">Cool Label
</LABEL>
<input type=text name="myinput">
</FORM>

The text for the label will change color when the control receives the focus and causes the color to revert to its default when the control loses the focus. There are several ways for this control to be given the focus:

1. Press TAB until the cursor appears in the control.
2. Press CTRL-P; defined as the accelerator key with the accesskey attribute.
3. Click on the label for the control, or click on the control.

Regardless of the way control is given the focus, the browser will perform the task indicated by the onfocus attribute. In this case, the event triggers a script that changes the text of the label to red.

IMAGE

IMAGE is a new sub-type of the <INPUT> tag. <INPUT TYPE=IMAGE> will let you create a button-like element from an image. Instead of always using HTML-generated buttons that are plain and boring, you can design an aesthetically pleasing alternative to match the design and style of your site.

The attributes available for the IMAGE attribute of the <INPUT> tag are: name, disabled, size, src, alt, usemap, align (which is deprecated in HTML 4.0), tabindex, onfocus, onblur, and onselect.

• src attribute identifies an image source.
• usemap identifies an imagemap.
• tabindex is used to specify the number of times the TAB key must be pressed before the control is given the focus.
• onselect fires a script, if defined, when the control is selected.

Listing 3: Image Control

<FORM>
<other controls>
<INPUT TYPE=IMAGE tabindex="3" 
  onclick="something()" src="someimg.gif" 
  name="testImage" align="right"
  size="40">
</FORM>

Clicking the image causes the JavaScript function (identified by the onclick event handler) to be activated. This means that you can do anything that you normally would with JavaScript.

FIELDSET

You can break radio buttons and checkboxes up into form fields by using the new <FIELDSET> tag. Add to this the <LEGEND> element and you have the tools for creating aesthetically pleasing forms. In fact, the <FIELDSET> tag is more a visual enhancement element since it draws a box around the elements within its scope. This isn't a new concept, but it's much easier than putting the elements into a <DIV> tag and defining a border.

Listing 4: Defining a FORM field

<FORM>
<other controls>
<FIELDSET class=hidden id=educate>
<LEGEND TITLE="Please indicate if you want 
  to be close to any schools">
  Near Schools?</LEGEND>
<input type=checkbox>Primary School<br>
<input type=checkbox>Middle School<br>
<input type=checkbox>High School<br>
<input type=checkbox>College<br>
<input type=checkbox>University
</FIELDSET>
</FORM>

The options are set aside, clear indication that they are a group unto themselves. This listing was pulled from the code for the demo.

BUTTON

The <BUTTON> tag is a cool new element that places a button on your form that has no default action. It will do whatever you specify, and nothing more.

Listing 5: The BUTTON Element

<FORM>
<BUTTON ID=clkit 
  onclick="clicked()">View next 
  listing</BUTTON>
</FORM>

The interesting thing about the <BUTTON> tag is that you can define its size, position, and if necessary, an image source for the button. Buttons can be placed anywhere in the HTML document (i.e., you're not locked into using them only within the scope of an HTML FORM).

accesskey

Assigning an accesskey to a control creates a keyboard shortcut alternative to that function. This means that instead of forcing your users to point and click with their mouse, the users can choose the method of navigation they most prefer. An accesskey attribute assignment requires the keyword accesskey and the letter to be used as the keyboard shortcut key.

For example, in Listing 6 below, the accesskey attribute assigns the letter B as the shortcut key. When the user presses the ALT key (which is used for all accesskey assignments), and the B key, the control receives the focus and the cursor is inserted into the text box.

Listing 6: Setting an accesskey

<FORM>
<other controls>
<LABEL><u>B</u>edrooms:
<input type=text NAME="bdrms" accesskey="B">
</LABEL>
</FORM>

Pressing ALT-B moves the element into view and places the cursor in the control so the user can begin typing. This feature will be well received by both Windows and Mac users.

There are other ways to improve the usability of forms that go along with using the accesskey property. For example, if a default value is supplied in the TEXTAREA or TEXT field, you can have the current text selected (highlighted) so that the user does not have to press the backspace or delete key. This is done by defining a handler for the onfocus event. The script the event handler points to will use the select() method to highlight the text.

Listing 7: Highlighted Text

<FORM>
<input type=text ID="beds" tabindex=9 
  value="hiya" 
  onfocus="document.all.beds.select()"
  accesskey="B">
</FORM>

When ALT-B is pressed, the control is given the focus and the default text is highlighted. The same thing happens if the user presses the TAB key until the control gets the focus. An odd thing happens when you use the mouse to give the element the focus. The default text does get highlighted, but only for a fraction of a second; then the cursor moves to the end of the selection and clears the highlighting. Go figure.

disabled

Often the answers of one set of questions can be assumed from the answers of another set. In the demo, the form asks if the user has any children. Then the next question is "How many children?". If the answer to the first question is "No," the next question is pointless. In the demo there are three question sets where the answer to the first affects the answer to the second. In each, the second question becomes disabled if the answer provided is "No."

Listing 8: Disabling the Control

<FORM>
<other controls>
<b>Do you have any children?</b>
<br>
<input type=radio name="anykids" value="no" 
  onclick="document.all.kids.disabled=-1">No
<input type=radio name="anykids" value="Yes" 
  onclick="document.all.kids.disabled=0">Yes
<br>
<b>How many?</b>
<input ID="kids" type=text value="Disabled Control">
</FORM>

People will often change their minds about a question. However, with dynamic forms, if the answer changes, the condition of the control also changes.

readonly

Similar to disabled, the readonly property prevents the user from changing an element's contents. This feature provides you with excellent layout and presentation opportunities. For example, if you have already prompted the user for a name when he or she came to the page, you can use JavaScript to insert that information into the NAME field and make the field readonly.

This becomes a valuable function when the form is completed. When the user clicks on the submit button, instead of actually sending the form contents to the server for verification, you run a set of sub-routines on the client-side to verify all required fields have been completed. You can also use client-side verification as an opportunity to let the user review the answers and revise them if necessary. Now, instead of letting them simply make the changes, set all the fields to readonly, and require the users to press a button to enter edit mode.

Listing 9: A readonly control

<FORM>
<other controls>
<textarea readonly rows=3 cols=40>
  Here is a warning note for all! Do not 
  attempt to hitch a ride on a comet by 
  sipping a toxic cocktail.
</textarea>
</FORM>

The note in Listing 9, appears as a TEXTAREA note, but its contents cannot be changed. Perfect for user notices or other information that needs to be shared with the user in this way. (Plus not to mention that it takes up less room than a standard paragraph, and makes the overall presentation of a form much cleaner.)

tabindex

Pressing the TAB key to navigate through the form is very common. What often happens, however, is that the tabbing order is not such that it compliments the layout of the form. The solution is to assign a tab order using the tabindex attribute.

Listing 10: Setting the tabindex order

<FORM>
<other controls>
<table>
<tr>
<th align="left">Name:</th>
<td><input type=text tabindex=1 ></td>
<td><b>e-mail:</b></td>
<td><input type=text tabindex=4 ></td>
</tr>
<tr>
<th align="left">Spouse's Name:</th>
<td><input type=text tabindex=2></td>
<td><b>Phone: </b></td>
<td><input type=text tabindex=5 ></td>
</tr>
</tr>
<tr>
<th align="left">Address:</th>
<td><input type=text tabindex=3></td>
<td>Street</td>
<td></td>
</tr>
</table>
</FORM>

Rather than tabbing from left-to-right, top-to-bottom, as a layout like the one in Listing 10 would normally cause, the tabindex order has been set to override the default. Tabbing will go from top-to-bottom and then move to the next column. This is a very effective method of controlling the data flow of form input.

Advancing forms

The HTML form found in the demo uses everything we have discussed up to this point -- the result is a very dynamic, interactive HTML form. In order to fully appreciate the value of the demo, you need to try it out. Look for all the features we have discussed in this article. You will even recognize some of the elements from the listings.

Examining the demo

To begin, we see the text controls for the user to enter his or her name, spouse's name, address, email address, and phone number. Each of these data items uses the accesskey function, indicated by the underlined letter. If you press ALT and the appropriate letter, the cursor will appear in the control.

Tab indexing (tabindex) is another way to control the way data is entered into the form. Pressing the TAB key from the name field will not take you to the email field as you might expect. It has been set up to tab down first, then over to the fields on the right-hand side. This seems to be a more natural way to navigate through form fields than by using the default left-to-right, top-to-bottom approach that we have become familiar with.

Immediately following the Identification area you will notice that the form is broken up into fields using the new <FIELDSET> tag. Each field has a title that appears to be included in the border; this is done by using the <LEGEND> tag.

The field titled Preference Indicators asks two questions. An affirmative response to either triggers a JavaScript subroutine. A little background first, though. The text control for the first question has been disabled upon loading. You cannot enter data into this control while its edit state is disabled. The second question uses a hidden (display="none") element. If you go to the demo and select "Yes" for both questions, the first control becomes editable -- as indicated by the darkening of the text in the control -- and the second control (the select box) now becomes visible. Alternately, selecting "No" for both questions makes the controls revert to the default settings.

The next field, titled Features Desired, contains eight checkbox items. Of the eight, five are special in that they reveal a new set of questions if they are checked. For example, if you check "Garage," you will see a new form field appear with questions specific to that category. Since the default tab order has been altered, we have to rely on the accesskey or the mouse to navigate through specific questions.

The last of the main categories, Specific Requirements, has three questions. The first two use an accesskey, as well as having a defined position in the tabindex, making navigating to them very easy. When the text box for those questions receives the focus the current value becomes highlighted, allowing them to be edited simply by typing a new value over the old one.

Below the buttons we have a text area, which is a readonly text area (i.e., its contents cannot be altered in the browser). This is shown here as an alternative way to present the user with some important information that might otherwise be missed or overlooked.

Conclusion

If you're anything like me, you've already downloaded the source code for the demo (if not, go ahead and download it now), and plan to use it to help you design your own "Forms of the Future." If you have an artistic flare, you may even use the <BUTTON> element, or the <INPUT type="IMAGE"> tag with an image to really jazz up your forms. (If there was any artistic talent in my blood, those features would have been in the demo as well.)

If you use the code to create your own Dynamic Form, let us know, we'd like to see what you create with it.

Dynamic Forms Demo
Try the Dynamic Forms demo to see what the Future of Forms holds for Web developers. (IE4 required)

Source Code for Dynamic Forms Demo
View the source code for the Dynamic Forms demo.