Building Better Web Forms

The ISS Form Builder

The Form Builder is a new service available to all members of Newcastle University, available at http://forms.ncl.ac.uk/

As the ISS Form Builder may not be always be suitable for your needs, here's some advice on creating good web forms.

Forms are traditionally very difficult to do well in HTML. By well I mean: look nice, have a logical structure, be easy to use, collect valid data, have dynamic elements, and be accessible.

What are the problems?

  • HTML doesn't provide for a number of useful types of input, such as calendar boxes and tree structure menu's.
  • The boxes that it does provide are often fiddly, for example, the multiple select box requires you to hold down control or the shift key while clicking with the mouse.
  • Forms layout is often a complicated business, requiring sets of fields to be grouped together in complex ways. CSS for forms is difficult, so the resulting layout tables are often accessibility problems.
  • Developers who use visual layout tools have often never heard of some of the useful tags and attributes that HTML does provide, such as <fieldset>, <legend>, <label for="id"> and tabindex="n".
  • Adding any intellegence (validation, optional areas of forms, automatic totaling of values, etc) to forms requires some level of programming, Javascript or PHP.
    1. To do these things on the server with PHP or ASP can be annoying since the page has to reload before changes take effect.
    2. To do these things on the client can be unreliable since Javascript support can be shaky, and can be bypassed.

So, what are you proposing?

What follows is a number of how-tos, prewritten scripts and stylesheets which you can use to get your forms working a lot better and make them easily maintainable and accessible.