Design Patterns for Forms



Input Hints are short descriptions that illustrate what information is required by a user in a given text field.

A text box for input is provided that may be slightly confusing, or if other textboxes on the same page have used the solution provided within this pattern.

A user can only view an Input Hint.

Display at most a sentence within the text box that more clearly explains the desired user input. After the user begins typing characters into the box, the explanation will disappear and only the text which has been input by the user will be visible.

The same goals could be achieved through simply adding a line of text above or below every confusing text box. However, this approach would add clutter to our pages for little benefit. Through placing the explanatory text within the text box, no extra space on the page is wasted, and the explanatory text is only provided when users need it. Users who have already input a value into a text box do not need to see explanatory text as if they have already completed the action, they obviously understand the field. This approach provides explanation when needed, and disappears when it is not needed.

Search Field Hint Text



Search Field Upon User Query - Hint Text Disappears