Form LayoutsAn arrangement of input fields to best collect data from users
- A form gathers user input for the purpose of saving information to the database or configuring a system response (e.g., Rollover).
- Different layouts may related to the page header in specific ways, such as requiring an action bar.
- The placement of labels in relation to each input field reflect the context of use of the form.
- Forms should provide consistency in layout for drafts, creation and updating records, avoiding multiple columns as a default.
- Most forms will place the primary button in the sticky footer, to submit input data to the server.
One-column layout of stacked input fields for familiar forms
Side-by-side layout of labels and input field pairs for unfamiliar tasks
Layout of a search parameter in a single row above the search results it generates
A form in which the collection is the only input
Space-saving layout with multiple input fields arranged in a single row, above the content it generates
- When form fields are organized vertically, place labels directly above each field, in plain text, to simplify how the user scans the page while providing input.
- Horizontal layouts communicate that those fields need to be completes as a unit.
- Multiple page forms should be reserved for cases where there are many fields that can be broken into smaller logical sections that do not need to be done in order.
- Tabs or navigation panels will help users concentrate on one chunk at a time.
- Additional resources for decisions and rationale
Note An Issue
A Living Document
This resource is a work-in-progress. Please contribute any issues or suggested improvements to either the documentation of this component or to how its functionality might be improved in the future.