Hudzilla.org - the homepage of Paul Hudson
Contents > HTML Forms Wish List | Report Bug | About Me ]

7.8     Form design

This is NOT the latest copy of this book; click here for the latest version.

As mentioned already, forms are the primary way for users to send data to your scripts, so its essential you get them right. Above and beyond the coding aspect of forms, there are a number of basically usability guidelines you should follow in your design:

  • Use tables to lay your elements out neatly. This makes the form easier to read, and it is also easier to report individual errors on fields.

  • If there is an error with a field, put a notice next to it and a message at the top - if you don't put the message at the top, people will not realise there is an error, and if you don't put a notice next to the problem field, people might not spot it amongst the others.

  • Mark required fields - either with bold text, or, more commonly, an asterisk *.

  • If your database has a field limit, put a size limit on a text box - this stops people from entering too much text and later finding out their data has been trimmed by your database.

  • Don't make your forms too long - they confuse people and make them feel threatened.

  • If you split your form across pages, let your visitors know how far they are through the process of form submission e.g. "Page 2 of 5" - this lets people know where they stand at all times, without leaving them wondering "will this next button take money out of my account, or are there more pages to come?"

Note that for the purposes of this book, most examples do not follow the principles laid out above. Yes, this might sound hypocritical but it is a simple matter of space - I do not think you would like to have large chunks of the book dedicated to making output look nicely formatted in HTML.





<< 7.7.5 Key validation points   7.9 Summary >>
Table of Contents
Want to see this stuff in print? PHP in a Nutshell takes the core topics covered here, adds in thousands of edits from the editorial team and myself, and combines them to make an unbeatable reference for PHP programmers at all levels.



My latest book has hundreds more tips on how to use PHP, Apache, and MySQL, plus Perl, Python, shell scripts, performance tuning, and more!



Top-right shadow
 
Bottom-left shadow Bottom shadow

Comments from other readers
Matt - 06 Sep 2008

Yes, using CSS is the way to go with new versions of html, like xhtml.

Tom - 06 Sep 2008

Instead of using tables for forms, it's probably a better idea to use fieldsets, and if you want to align a field, just style it (Form fields should have an ID anyway) .



Add comment
Please note that by posting a comment here you are committing it to the public domain. This is important so that others can make use of your code themselves, and also so that I can incorporate helpful notes directly into the main text. Comments are limited to 2000 characters in length.

If you are reporting an error in the content, please tell me directly.

Your name/email address:
Your comment:
 
Now, in order to verify that you're a real person, please answer this simple question: what is seven plus one?
The answer is:
(please write in
numbers, eg 19)


Top-right shadow
 
Bottom-left shadow Bottom shadow