Users need to provide personal information and send it to a service provider


Offer users a form with the necessary elements


Use when

Users need to provide information. In many occasions, there can be a need for users to give information via a site. For example, when Booking a flight, using an Advanced Search, when doing a Registration on a site, doing some online tax calculations, or simply to Login. Giving particular information must be part of a user task or at least provide benefit for the endusers.


A form is essentially a collection of labels and input fields on a single page. When designing forms, the following issues must be taken into account.

Wording. Make sure that users understand what you are asking from them. Realize that there are internationalization issues here, e.g. "state" is only for US, "title" can be easily misinterpreted. Give examples to re-enforce the meaning of the field. Put examples below or at the right of the input field. Use prompts sparely, adding more text also increases the chance that people won't read it. So keep any form of introduction text short, no more than a couple of lines.

Grouping and ordering. Place elements in a logical ordering and group fields that together describe an entity, e.g. name and address could form "personal information".

Basic Form Wireframe

Layout of label and input elements. Use grids, put the label left of the element or above it there are sever space limitations. Right align the label with the field so that label and field are always closely together. Both the labels and input elements must be aligned using Grid-based Layout. Design in one column only, avoid having multiple input elements on the same line. Only do that if an entity is sensibly split up in part for which you need separate input elements. The length of text input fields must be determined by the information that needs to be supplied. However, keep in mind that this can vary because of internationalization issues as well. A surname in the US is usually quite short (one or two words), but in Spain they use much longer surnames (three to six words is not uncommon).

Mandatory and optional fields. In general making a distinction between mandatory and optional fields is a bad idea. Users should never have to fill in anything that is not required for the task at hand. However, there are certainly exceptions where optional fields make sense. In such cases it is important that it is clear to the user how filling in these fields will benefit them. For example, so that recommendations can be improved or so that the service can be improved (supporting multiple shipping addresses). If you have mandatory fields AND optional fields, mark the mandatory fields with an asterisk "*". If the users submits the form but not all mandatory fields have been filled in, show a popup that says which fields (still) need to be filled in. Also add a privacy statement....?

Using the right input element It is important to use the right input element for a certain field. This depends on the number of options, single/multiple choice, and the sort of information that is required. For selecting elements from fixed sets use:

Single Choice from a fixed set: (e.g. number of guests,)
Multiple Choice from a fixed set: checkboxes
Alternatively, use edit boxes and check afterwards if the input has been interpreted correctly. For example

Good defaults In order to speed up data entry, it is often good to use appropriate default values. However, do not use default values for sensitive fields such as "gender".

Preventing input errors Consider Constraint Input to make sure users cannot provide invalid input. Otherwise, validate the data and give an Input Error Message. Be aware that validation is not always 100 percent waterproof, e.g. it is simply not possible to verify that an email address is valid by checking it syntactically.

Keyboard navigation Filling in forms is tedious and it goes much faster if you can use the keyboard to go from one field to the other. Make sure that the TAB key can be used to do this and that the ENTER key is a shortcut for "confirm", submit, save etc. When the page is loaded the cursor should be already in the first field and it should have the focus so that users can start typing straight away. Using the tab key users go to the next item in the form, i.e. the element to the right or below the current element.


Filling in forms is error-prone and things must be made as clear as possible for users. Using the right labels, widgets and defaults all contribute to the successful completion of the form.

More Examples

plml logo


6 comments have been added to this pattern

James MacEwan, 1st August 2007
Sometimes the data on the Form is important enough that the application wants to confirm what has been submitted with the user before acting on it. This is done by deliberately echoing the Form data back to the user in a read only format with a message similar to "Confirm the data you have entered is correct?" with a set of "yes" and "no" buttons. Clicking on "no" takes the user back to the form. Clicking on "yes" causes the application to act on the form data.

You could call this the "Confirm Form" pattern perhaps.

Jason Bao, 11th November 2007
Sometimes , when a user is in the TEXTAREA. ENTER key always causes returning. And this is well-known.
So what should be the shortcut when a user is in the TEXTAREA and want to submit the form?

Monique, 18th June 2008
According to usability experts, it is best practice to right align the form labels because it enhances readability.
Danni Swalef, 1st July 2008
An example of how to use validation hints:
Cidi Davidse, 14th July 2008
How about the the button "delete input" or "cancel"?
Is it really neccesary? The risc of accidental use is big, so why not leave it out?
Lucas Gwadana, 7th June 2012
Sometimes the ERROR handling is not explicit enough because when a user makes an error, the system shows a summary of errors after a user has finished filling a form which it was supposed to be otherwise.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below