Home arrow Web Standards arrow Page 4 - Forms
WEB STANDARDS

Forms


Forms play an integral role on the Internet in allowing users to communicate and interact with websites. Forms are an important way for website owners to collect information from their visitors. There are many ways to handle forms markup -- but the best way is the one that will benefit both the user and the site owner. This article was excerpted from the book Web Standards Solutions The Markup and Style Handbook, written by Dan Cederholm (Apress, 2004; ISBN 1590593812).

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
March 09, 2005
TABLE OF CONTENTS:
  1. · Forms
  2. · Method C: Simple and more accessible
  3. · Method D: Defining a form
  4. · Summary
  5. · Styling forms
  6. · No need to be redundant

print this article
SEARCH DEVARTICLES

Forms - Summary
(Page 4 of 6 )

We’ve looked at four different ways to mark up the same simple form, noting the pros and cons of each. It’s important to point out that the accessibility features that we added to Methods C and D could, of course, be easily added to the first two methods as well—and those methods would be better because of those added features.

Neither one of the methods that we’ve looked at here are necessarily miles ahead of the others in terms of a “best solution.” But it’s valuable to know your options—and what you can combine from all four to create better forms in your own projects.

Let’s recap the differences between the methods presented.

Method A:

  • Visually, it’s a nice, neat way to organize form controls and labels—especially for larger complex forms.
  • However, using a table for such a simple form seems a bit unnecessary.

Method B:

  • Simple markup will degrade nicely in text browsers and small-screened devices.
  • Visually, just using <br /> tags results in a cramped layout.

Method C:

  • Simple markup will degrade nicely in text browsers and small-screened devices.
  • Allows for labels and controls of different lengths without any “lining up” issues.
  • Contains an important accessibility feature (that could also be applied to the previous methods).

Method D:

  • Structured markup will degrade nicely in text browsers and small-screened devices.
  • Contains an important accessibility feature (that could also be applied to the previous methods).
  • Labels and form controls could be placed on the same line or separate lines using CSS.

While you wouldn’t be guilty of web design crimes if you were to use Method A or B, taking what we know that is good from Method C and applying it to the previous examples would be a step in the right direction.

There is also room for improvement on Method C as well, and we’ll take a look at a few additional features we can add in the “Extra credit” section that follows. We’ll also talk about some simple CSS that we can apply to make our form more visually appealing.

This article is excerpted from Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm (Apress, 2004; ISBN 1590593812). Check it out at your favorite bookstore today. Buy this book now.

{mospagebreak title=Extra credit}

For this extra credit session, we’ll discuss the tabindex and accesskey attributes and how they can do wonders to make our form more navigable. We’ll also explore the <fieldset> tag, which can help in organizing form sections. Lastly, we’ll cover CSS as it relates to spicing up our form’s appearance.

The fabulous tabindex

A feature that we can easily add to our form is the tabindex attribute. Adding tabindex, and a numerical value, enables users to navigate the focus of form controls with the keyboard (typically using the TAB key). Repeatedly hitting the TAB key will change the focus to the next form control, in an order that we can specify. By default, every interactive element has an implied “tab order,” but using the tabindex attribute takes that ordering away from the browser, putting you in full control.

For instance, let’s add the tabindex attribute to the form controls in our example (Method C):

<form action="/path/to/script" id="thisform" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name"tabindex="1"/></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" tabindex= "2"/> </p>
  <p><input type="checkbox" id="remember" name="remember"
  --> tabindex="3"/>
  <label for="remember">Remember this info?</label></p>   
  <p><input type="submit" value="submit"tabindex="4"/></p>
</form>

Now, when the user tabs through the form, we’ll be ensuring the focus of the cursor follows the exact order we intended: Name:, Email:, Remember this info?, and the submit button.

Using tabindex to set focus order becomes even more useful for complex forms and those where there might be multiple input boxes or other form controls for a single label.

Why tabindex?

Aside from being dead-simple to implement on our form, we’ll again be helping mobility-impaired users by letting them navigate the form entirely with the keyboard. Rather than grabbing the mouse to enter each form item, the user will be able to tab through each control, in the correct order. Think about those who, for whatever reason, are unable to use both hands to navigate the Web. This will help.

accesskey for frequented forms

Similar to tabindex, the accesskey attribute is another easily added feature that can be useful for mobility-impaired users—and just darn convenient for others.

For instance, if we add the accesskey attribute to the <label> tag that surrounds the Name: text of our form, when the user presses the key we specify, the focus of the cursor will change to the field that’s associated with the label.

Let’s take a look at the code that’ll make this happen:

  <form action="/path/to/script" id="thisform" method="post">
    <p><label for="name"accesskey="9">Name:</label><br />
    <input type="text" id="name" name="name" tabindex="1" /></p> 
    <p><label for="email">Email:</label><br />
    <input type="text" id="email" name="email" tabindex="2" /></p>
    <p><input type="checkbox" id="remember" name="remember"
    -->tabindex="3" />
    <label for="remember">Remember this info?</label></p>      <p><input type="submit" value="submit" tabindex="4" /></p>
  </form>

Depending on the system, the user will either use the ALT or CTRL key in conjunction with the 9 key that we’ve specified in the markup. Focus will immediately shift to the Name: field in our form.

Easily accessed search

Adding the accesskey attribute can be especially helpful when used on frequently used forms such as a search box or membership login. Without having to reach for the mouse, users can instantly change focus and start their query or input using only the keyboard.

It’s important to note that, while not all browsers handle accesskey, it’s an added benefit for those that do. For instance, to access the search form field
where we’ve added accesskey="9", Windows users would press ALT+9, while Mac users would press COMMAND+9 to shift the focus to the search field.

This article is excerpted from Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm (Apress, 2004; ISBN 1590593812). Check it out at your favorite bookstore today. Buy this book now.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials