| The most monotonous entities in the known | | | | useful for fields such as social security or phone |
| universe, forms, are a staple of every web | | | | numbers containing a character limit for each input |
| programmer's balanced diet. Whether we like them or | | | | field. For example, after a user enters the area code |
| not, forms are the gatekeepers to our site's goodies | | | | of a phone number, the form automatically tabs to |
| and often their design alone determines whether a | | | | the next input box allowing the user to continue |
| user will try what you're selling or simply walk away. | | | | entering their phone number without interruption. |
| Without pomp or circumstance, here are ten tips to | | | | To flag an input element to be autotabbed, you only |
| transform your plain vanilla into double chocolate | | | | need to include three things in your markup: tabindex, |
| chunk with marshmallows. | | | | className of autoTab and maxlength. |
| 1. Remember Your Markup We've notice a lot of | | | | Field Information It's always good policy to provide |
| people forgetting to use the tools that are already | | | | information describing a field's requirements and |
| made accessible to them by the very medium that | | | | restrictions. How else is the user going to know a |
| they work in. And so we've highlighted a few HTML | | | | password must have 3 capital letters, an exclamation |
| elements below that are made especially for forms. | | | | point and be somewhere between 6 and 17 |
| Just to refreshen the ol' web noggin. | | | | characters long? Inspired by the forms used over at |
| Label A label is used to attach information to a | | | | Tangent, we came up with some additional |
| control. If you focus on a label, its associated control | | | | suggestions. |
| will gain focus. This is useful when a user clicks on a | | | | Store all related information in a fields label tag. You |
| label name and the associated field gains focus. | | | | can place a className of required, an accesskey, and |
| "The FIELDSET element allows authors to group | | | | a descriptive title in there, so that all information is in |
| thematically related controls and labels. Grouping | | | | one place. This makes it easier to roganize, and easier |
| controls makes it easier for users to understand their | | | | for JavaScript to pull from. |
| purpose while simultaneously facilitating tabbing | | | | We choose to use onfocus instead of onmouseover |
| navigation for visual user agents and speech | | | | when displaying information to the user. While mostly |
| navigation for speech-oriented user agents. The | | | | personal preference, it is still nice to know that the |
| proper use of this element makes documents more | | | | proper information will be displayed on the field with |
| accessible." "The LEGEND element allows authors to | | | | focus rather than where the mouse is. |
| assign a caption to a FIELDSET. The legend improves | | | | It is easier to give labels an id similar to the field they |
| accessibility when the FIELDSET is rendered | | | | related to. For example, if a field is named fname, call |
| non-visually." "This attribute specifies the position of | | | | the label lfname. It makes things much easier on the |
| the current element in the tabbing order for the | | | | JavaScript side to pull information. You can see the |
| current document. This value must be a number | | | | labels title being accessed below: Error Displays When |
| between 0 and 32767. User agents should ignore | | | | a user makes a mistake, it's your duty to show them |
| leading zeros.The tabbing order defines the order in | | | | errors quickly and efficiently. Here are some ideas to |
| which elements will receive focus when navigated by | | | | make your forms display errors better: Don't just |
| the user via the keyboard. The tabbing order may | | | | show the user one error. If they left 3 required fields |
| include elements nested within other elements." "This | | | | blank, make sure that you tell them they have three |
| attribute assigns an access key to an element. An | | | | errors, this way they can correct them all in one fell |
| access key is a single character from the document | | | | swoop. |
| character set. Note. Authors should consider the input | | | | Provide as much information to the user beforehand |
| method of the expected reader when specifying an | | | | as possible. Examples of this would be marking a field |
| accesskey." Password By adding type="password" to | | | | as required, or explaning the minimum password |
| your input field, characters entered will be | | | | length (See #2 above). |
| transformed into a series of asterisks. | | | | Be aware of the three validation options at your |
| "Application designers should note that this | | | | disposal: 1) you can give responsive feedback straight |
| mechanism affords only light security protection. | | | | from the JavaScript. The user benefits from instant |
| Although the password is masked by user agents | | | | feedback, but you will have to duplicate your |
| from casual observers, it is transmitted to the server | | | | validation functions on the client and server. 2) You |
| in clear text, and may be read by anyone with | | | | can provide Degradable Ajax Validation that gets rid |
| low-level access to the network." 2. CSS This isn't | | | | of the duplicated code, but increases the server load. |
| new, but CSS can turn your eye sore of a form into | | | | 3) You may validate only on form submit which |
| something negative fugly. There is no need to | | | | leaves you with no duplicated code, no additional |
| reinvent the wheel here, so check out the following | | | | server load, and unfortunately, no instant feedback. |
| sources on enhancing your form with some CSS and | | | | Put some effort into the display of your error |
| a little Javascript. | | | | messages. Make them bold, noticable, and throw in a |
| Style Those Buttons - The Man In Blue shows us | | | | bit of creativity. It is also best to stick with colors |
| how to make those buttons not look so cheap. | | | | that the user is comfortable with:red for errors, |
| Niceforms - Niceforms does a great job of turning | | | | yellow for warnings, green for success. Obviously |
| that ugly form into something much more tolerable | | | | you can switch those up based on your evaluation, |
| using a little CSS action. | | | | but going to far and making an error message pink |
| Hide Optional Fields - In this example, a little CSS and | | | | could cause some confusion. |
| Javascript is used to make a form better looking and | | | | 6. Postbacks There is nothing worse than filling out a |
| more usable. | | | | form, encountering an error, and having to retype all |
| CSS Forms - Jeff Howdens shows us how to create | | | | of your information all over again. In order to save |
| a well layed out and styled form without using tables. | | | | your users from needless frustration, we need to |
| AutoTab When navigating through a form, the user | | | | ensure that all data is preserved. This means if there |
| traditionally presses the tab button in order to | | | | is an error, the fields should be repopulated. If we |
| advance to the next form control. This AutoTab | | | | have a multistep form, back and forward navigation |
| function automatically sets the focus to the next | | | | should also keep the form populated. A common |
| control after the control's maxlength is reached. This | | | | approach is to set a form's action to it's current URL. |
| allows for the user to no longer manually tab through | | | | That way, you can read in the form value and |
| fields with a maxlength. This function is particularly | | | | populate the fields immediately if there is an error. |