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