Top 10 Form Usability Tips

1. Place form labels above text fields

2. Cluster similar types of controls

3. Use standard values to enable autofill

4. Use <select> sparingly

5. Submit buttons don't have to be "Submit" buttons

6. Use smart scripts

7. Select logical defaults, or none at all

8. For multi-page forms, give the user a progress map

9. Postbacks. Please.

10. Use design to help the user

Use large font in text fields

Email address

Email address

input[type="checkbox"] {width: 1em; height: 1em; }

Beef up text field borders




Change the label cursor





label { cursor: pointer; }

Highlight active and/or completed fields




Accessible HTML/XHTML Forms: Advanced Level

Distinguish primary and secondary actions


   

 

Request Audit