Common Form
The common form user interface pattern is the most frequent pattern used to display a form which can be used to create a new Thing or edit an existing Thing.
Titles
HTML title
The title attribute is a an essential piece of information, especially for assisitive technology users and should be short, relevant to the data being listed, descriptive and make use of variables where necessary.
Use the pipe character | to separate the heirarchy of information. The account or organisation name should be included to help the user discern between multi-tenanted systems like CXM, or Galaxies Sites.
Examples
<title>Publishing | News | Create News Item | {{ account_name }}</title>
<title>Publishing | News | Edit {{ content_name }} | {{ account_name }}</title>
Page title
The page title should describe the Thing being created or edited by the UI. For example. New Document, New Case etc. If you’re editing an existing Thing, there are two cases to consider:
- When the form contains a field to the name/title of the Thing, the page title should be Edit Thing
- For any situations where it is not appropriate to have the name/title of the Thing, either in a regular field or a disabled field, then you should include it in the page title, e.g. Edit Acme Organisation
Actions bar
Usually, the primary action in the actions bar will be a save button for the form, which will be mirrored in the form actions. While in edit mode there’s usually not a need to provide an actions menu.
Primary action button
The primary action is located towards the top right of the user interface and is typically an html.button element with the .btn--primary class which, when pressed, will perform a form submit or a save action, allowing people to save their changes.