PLURALSIGHT COURSE

---

Web Forms

Module 1 - Checklist

• View 4 example forms supporting autofill
• View tab index form
• View checkbox sequencing
• View best practices checklist

Module 2 - Simple Login Form

• View a short login form

Module 3 - Long Web Form

• View a long form broken into four chunks.

Module 4 - JavaScript Validated Form

• View a JavaScript validated form

Best Practices Checklist

LABELING:

1. Title your form with the users' needs and goals in mind.
2. Never label the submit button "Submit", Instead answer the question "I want to..."

CONTENT:

3. Remove unnecessary questions (short is better)
4. Make sure optional questions are clearly optional by marking required fields clearly with * or color.

LAYOUT:

5. Place labels above the corresponding input field
6. Never do more than one column
7. Never slice a phone number into parts
8. Multistep forms and progress indicator (x of y steps)
9. Use Radio Buttons for less than 5 items and dropdown for more than 5 items

INPUTS:

10. Use placeholder (to help format information correctly)
11. Design to support Autofill
12. Make sure the form is tab key friendly
13. Order choices logically (MTWRF) or by abc order
14. Wrap inputs in labels tags

SUBMISSION:

15. Never use reset buttons
16. Show a conformation page

ERRORS:

17. Make sure validation is inline and easily seen.
18. Don't make validation too strict let the programmer figure it out on the back end.

DESIGN:

19. Use beautiful design to inspire confidence
20. High color contrast for use in sunshine
21. Inputs should be 44px high
22. Text should be 16 pixels
23. Group related fields using fieldset
24. Group labels and inputs (test using photshop blur)
25. Submit button should be the same width as the input fields

Back to Top