Fine-Tuning Your Forms

Michael Adams, Webmaster

University of Northern Colorado

Structure your forms for better usability and display by using XHTML and CSS fieldset tags. Fieldsets can be very helpful and are easy to use.

Bonus: learn some general guidelines on how to organize your form information to make it easier for users to understand.

Second bonus: script automatic email(s) from a form that are much more useful for the recipient than name/value pairs.

What Is A Form?

• Allows for user input
• Used to collect data for various purposes
• Results can be returned to user, emailed to someone, placed in a database, or combinations

Warning!

Unless sent through an SSL connection, forms are inherently insecure!

Of Labels and Fields

• Forms usually have a label (what you want entered) paired with a field (the place to enter)
• How are these pairs usually formatted?
  • On same line with one or more spaces to separate
  • In a table with a column for labels, a column for fields
  • As a dictionary list (dl), floating the dd element to put it on same line
  • Within separate divs
• Which one of these makes semantic sense?

Of Formatting and Problems

• Form 1 - No block element on labels, no possibility of spacing correctly
• Form 2 - Formatting awkward, semantically labels and fields are equal (i.e. the same type of information)
• Form 3 - Better control, relationship between labels and fields different (i.e. associated with each other, all associated through dl)
• Form 4 - Better control, elements separate from each other

Semantic markup allows a computer to parse the information into meaningful globs. The markup is descriptive of the content. Which description provided by the markup in the sample forms best describes a form?

Of Better Semantic Solutions

• The kind people at W3C have given us the perfect semantic solution: the fieldset
• A <fieldset> is a block-level tag, to be used in a form tag
• It has one default tag, the <legend> tag
• Can be used easily with the <label> tag for semantic and accessibility purposes
• Since it's a block-level tag, it can be nested, providing further flexibility

Example code

<fieldset><legend>What are your favorite things?</legend>
<label for="favorites">Kittens</label>
<input type="radio" name="favorites" value="k" />
</fieldset>

Of Possibilities and Flexibility

• Our familiar form styled with <fieldset>
• Our familiar form again, with added <accesskey> and <tabindex>
  • Bonus! This uses the :first-letter pseudoclass to indicate accesskeys
• Let's add some nested <fieldsets> and color coding to enhance usability

Of Styling Fieldsets et al

• Here is the embedded style for the nested fieldset example:

<style type="text/css">
   fieldset {width:60%;background: #FFFF99;padding 5px;
             border:4px outset #aaa;float:left;margin:20px;}
   fieldset fieldset {width:90%;background: #FFCC33;margin:10px 3px;
            padding:10px;font-size:80%;border:3px inset #bbb;}
   fieldset fieldset fieldset {width:60%;background-color:#33CCFF;
            border:2px solid #993300;font-size:110%;}
   legend {font-size:100%;font-weight:bold; text-transform:
            capitalize; background-color: #FFDD88;
            border:1px solid #333; border-bottom:none;}
   label {clear:left;width:15%;float:left;}
   label:first-letter {text-decoration:underline;}
   label.without:first-letter {text-decoration:none;}
   input, select {width:auto;float:left;}
   .clear {clear:both; margin:10px 0 5px 0; width:100%;}
</style>

Of Semantic Fieldsets

• Nested fieldsets group like items together
• The outer fieldset groups all the information together
• The form indicates that this information should be clumped together - like a database record
• The labels are associated with the form elements (using the "for" attribute)
• An XML parser can now distiguish all the various parts of this form and deal with them appropriately
• The styling is also very flexible and can accommodate many different "looks"

Of Real-World Examples

Here's my administrative functions menu (used by a couple of others as well)

Organizing Form Elements

• Rethink the order of the form elements - are they logical?
• Are similar items grouped together?
• Are the labels clear as to what information is needed - specific?
• Do you give any explanations needed, additional information that makes the form understandable to everyone?
• Do you have a response to the submission that makes it clear what will happen to the information?
• Do you have a route away from the response page to get the user back to the website without using the Back button?

Examples of Forms

• Example of a Program Admission Form
• Example of complicated form that could benefit with some work

Dealing with Information

• A form sends the information from the user to whatever is in the "action" attribute of the <form> tag
  • A different page with a script
  • The same page with a script and an if...then tree
  • A webbot that handles it with a dll
  • A script somewhere that emails results or enters results in a database or saves to a text file, or combinations of these
• The information in an email must be easily usable by the recipient
• Let's take a look at an email script (written in ASP, could be done in any language)

Lessons Learned

• Use semantic markup on forms
• Take advantage of most practical means to use information
• Pay attention to security, in all its manifestations
  • Don't collect sensitive information unless using an SSL connection
  • If you use an SSL connection, remember that email may not be secure - perhaps encryption?
  • Use the same "From" email address for all submissions, then add that address to recipient's address book - (keeps the spam filters at bay)
  • Create a separate mailbox (plus perhaps an email rule) to separate submissions
• Consider sending a separate email to the user who just submitted information
• Don't ever forget the human communication element in this information transaction

Questions?

• Anyone? Anyone? Bueller?