Input Fields and Labels

Input fields are used for entering and displaying data in edit pages. Input fields can have different behaviors, such as password, read-only, or required. They may also have different states, such as normal and invalid.

Different Types of Input Fields

Figure 1: Different types of input fields

Required Properties

  • Provide a field label.
  • Align fields on both sides. For smaller fields, use half the width of a regular field.
  • Required field indicator: Red asterisk located on the left of the field.
  • Refer to SAP Web Style Guide for field labels and abbreviations guidelines.
  • To prevent errors, provide useful input aids. For example, provide date and time fields that are preformatted, provide dropdown list boxes instead of input fields, and provide selection lists (triggered by the Field Help icon).
  • Avoid required input fields if they are not really required to complete a task. If you cannot avoid using required input fields, make sure you indicate that user entry is required.

Recommended

  • Place a label to the left of the field it describes. If this is not possible, place it above and left-aligned with the field. For instance, use a label above the field to provide more space for editing notes.
  • Use nouns or phrases with nouns.
  • Use title case, for example "Shipping Address" not "Shipping address."
  • Do not use punctuation at the end of the word or phrase.
  • Remember that translations may require more space than the original language, provide extra spaces.
  • Consider providing a link to the glossary if it would help users understand the field label.
  • Use terms from SAPTerm, the dictionary of all SAP terminology available on SAPNet.
  • If a field is hard to understand, provide a short instruction above the label.
  • If a group of fields is hard to understand, provide instructions above the group and left-aligned with it. Use complete sentences (for example, Enter your home address).

Fonts and Colors

  • Input field background: White #FFFFFF
  • Standard field border: Black #000000
  • Regular text font: Regular black #000000
    Invalid input field border: Red #D0001D
  • Invalid input field label font: Bold red #D0001D

 

top next

Source:  SAP Style Guide for PDA Applications