The document discusses various challenges in web form design including managing user expectations, order of fields, and validation. It provides solutions such as progressive disclosure of fields, modal and modeless layers for help, and combining client-side and server-side validation. Common elements to focus on in form building include fieldsets, legends, and labels to group related form fields and properly associate labels.

1. Form Design – Challenges & Solutions ProjectEric.com Copyright 2009. ProjectEric / Eric E. Ellis. All rights strictly reserved.

3. Expectation [Managed] Noise Order Flow

6. Solution Show/Hide (progressive engagement)

7. Solution Show/Hide (progressive engagement) – cont’d.

8. Solution Modeless layers http://plugins.jquery.com/project/dyndatetime http://www.mechanicalmarksy.com/hosted/toolman/dyndatetime/example.html

9. Solution Modal layers

10. Solution Modal layers (cont’d). http://plugins.jquery.com/project/modaldialog http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/

14. Try this Password strength meter by Daren Mason Easy to change the validation that the users would see (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.fn.goodPass = 'Good'; $.fn.strongPass = 'Strong'; $.fn.samePassword = 'Username and Password identical.’;$.fn.resultStyle = ""; The math is configurable //password has 3 numbers if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;} http://plugins.jquery.com/project/pass_strength http://mypocket-technologies.com/jquery/password_strength/ http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/ (good comprehensive list of JS libraries)

15. And this too Client-side validation <form method=&quot;get&quot; class=&quot;cmxform&quot; id=&quot;form1&quot; action=&quot;&quot;> <!-- The form section title --> <fieldset> <legend>Login Form</legend> <!-- The username --> <p> <label>Username</label> <input name=&quot;user&quot; title=&quot;Please enter your username (at least 3 characters)&quot; class=&quot;{required:true,minlength:3}&quot; /> </p> <!-- The password --> <p> <label>Password</label> <input type=&quot;password&quot; maxlength=&quot;12&quot; name=&quot;password&quot; title=&quot;Please enter your password, between 5 and 12 characters&quot; class=&quot;{required:true,minlength:5}&quot; /> </p> <!-- The inline error messaging --> <div class=&quot;error&quot;> </div> <p> <input class=&quot;submit&quot; type=&quot;submit&quot; value=&quot;Login&quot;/> </p> </fieldset> </form> http://plugins.jquery.com/project/validate http ://bassistance.de/jquery-plugins/jquery-plugin-validation/

18. Solution Combine server-side checks with client-side best practices