Creating Forms Module: One Last Attribute

Creating Forms

One Last Attribute

Normally, users can jump from one part of a form to the next by pressing the TAB key on their keyboard. When they finish filling in the “First Name” text field, for example, hitting TAB will automatically move their cursor to the “Last Name” text field. The order in which a user cycles through each input when pressing TAB is determined by the order in which those inputs are listed in the form’s HTML code. Try it out:

First name

Last name

Address

Phone number

In complicated HTML layouts, though, elements may not appear on a Web page in the same order they do in your code. When that happens, giving each <input /> tag, text area or select tag a tabindex attribute will let you define how a user will progress through your form:

<input type="text" tabindex="1" />

Give the first element a tabindex of “1″, the second a tabindex of “2,” and so on. Remember that most users will expect this to match the visual hierarchy of the page.

Try it Yourself

Make your own tweaks or additions to the code in the left box below, then click “Show Changes” to see the results in the right box.

Web Page First name Last name Address Phone number

More Information

To learn more about forms, try these sites:

http://www.webmonkey.com/tutorial/Add_HTML_Forms_to_Your_Site

http://www.w3schools.com/html/html_forms.asp