Home arrow Web Standards arrow Page 5 - Web Forms

Web Forms

There are many ways to mark up a form, including using a table or the label tag. Take a look at these methods and tips to ensure your forms are structured so they benefit the user and the site owner. Also covered are some CSS techniques to customize the forms. (From the book Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 76
August 23, 2004
  1. · Web Forms
  2. · Method B: Tableless, but Cramped
  3. · The label E
  4. · Defining Style
  5. · tabindex Attribute
  6. · Styling Forms
  7. · Using label
  8. · Use fieldset to Group Form Sections
  9. · Three-dimensional legend

print this article

Web Forms - tabindex Attribute
(Page 5 of 9 )

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 key board (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.

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

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


This chapter is 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

- 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 

Developer Shed Affiliates


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