How To Develop Good Web Forms

Be careful when implementing some of the suggestions from this presentation, especially if you are trying to be accessible to mobile phone browsers and/or people who use screen readers.

For example, some screen readers are really noisy when it comes to list items--when you wrap a label/input in a list item the screen reader will say a bunch of garbage that distracts the user.

If you use a bunch of floating and/or CSS positioning then be prepared to have your form look horrible to the point of being unusable on mobile browsers--by default, many mobile browsers will ignore your CSS and present the user with a bunch of unaligned, way-too-narrow fields.

Similarly, the BUTTON element is not part of the deployed versions of XHTML Mobile Profile, so you generally shouldn't use it if you can get away with INPUT TYPE='submit'.

Finally, you should be careful with your Javascript validation--some mobile browsers will let you disable submit buttons, but they don't support the Javascript events that you are depending to re-enable them. As a result, it is usually a good idea to leave the Submit button enabled all the time.

Also, be sure to put a "Reset" button just to the left of the Submit button. Users often get to the end of a form having entered hilarious joke data, then need to reset the form to submit real data. The importance of having a button that means "just kidding, erase everything I just entered" cannot be overstated.