Organisms

Form

We use forms to present data to the user and to allow them to enter data in a structured way. The form also acts as a container for other UI elements (input fields, checkboxes etc) and structure them into a specific layout.

Properties

Form components

Various types of UI Components can be placed in the form container:

• Label and text elements
• Text input controls, like input field and text area
• Selection controls, like checkbox, combo box, date picker, radio button, select
• Icons
• Links

Form attributes

• Group related information and give them adequate form and group titles.
• Order the form content in a logical manner from a user’s perspective.
• A label is not a help text. Assign to each field a meaningful label. Labels should be to the point, descriptive and short.
• If an input element is in an error or warning state, choose a meaningful message for the user.
• Less is more - try to minimize the number of labels and their corresponding fields to only the necessary.
• Provide interaction buttons such as “Cancel” and “Save” buttons on user input forms to reduce user’s uncertainty when leaving the page or entering data.

Label attributes and alignment

• All labels should have the same font attributes and should be placed uniformly (and according to the Jedox Measure System).
• Labels can be placed above the field or can be right-aligned to the left of the value. Right-aligned labels minimize the gap between label and field so the user’s eyes can scan along one line and which avoids unnecessary eye movements. Keep in mind that label size can vary when translating them into another language.

Example

Example of a form inside a report

Spacing in Forms

Spacing of elements inside a form

Form Stylesheet

The different elements of a form

Definitions Form Styles

See also

• Label
• Text input

• Previous
  Dialog
• Next
  Table