Skip to end of metadata
Go to start of metadata

Form Layouts

An arrangement of input fields to best collect data from users

Tag: form-layouts

  1. A form gathers user input for the purpose of saving information to the database or configuring a system response (e.g., Rollover).
  2. Different layouts may related to the page header in specific ways, such as requiring an action bar.
  3. The placement of labels in relation to each input field reflect the context of use of the form.
  4. Forms should provide consistency in layout for drafts, creation and updating records, avoiding multiple columns as a default.
  5. Most forms will place the primary button in the sticky footer, to submit input data to the server.

Common Layouts

One-column layout of stacked input fields for familiar forms

Guided Layouts

Side-by-side layout of labels and input field pairs for unfamiliar tasks

Search Layouts

Layout of a search parameter in a single row above the search results it generates

Collection Layouts

A form in which the collection is the only input

Compact Layouts

Space-saving layout with multiple input fields arranged in a single row, above the content it generates

Wireframes

This gallery contains wireframes that helped guide exploration of these layouts.

Design Decisions

  • 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.

Discussion Sandbox

0%

Comments