Fields

Labels and Help Texts | Read-Only Fields | Input Fields | Alignment | Saving Space

Labels and Help Texts

Please note: The iView Guidelines differ from the IAC Guidelines with respect to the usage of field labels and inspection texts. In iViews inspection texts are not used; use help texts instead.

Labels are simple text elements that can be used for descriptive texts within an iView. Labels can wrap and spread over multiple lines.

Field labels are labels describing read-only fields, input/output fields or selection elements like dropdown list boxes. Field labels in front of input fields are underlined to indicate the connection between label and field; if the field labels have to be set above the input field (e.g. in narrow iViews), use a smaller font and don't underline the label. The field labels should be as descriptive as possible; e.g. in an iView on searching in a search engine, "Search in" would be a nice label; if a category has to be chosen "Select category" is rather descriptive.

Help texts are special labels that are set behind or, if space is limited, below and left aligned with read-only or input/output fields; they give advice (e.g. examples) on what kind of data to enter into a field, if necessary. Please use only two or three words as possible examples.

Small field labels and help texts can be combined as well:

Sometimes - mainly for seldomly used applications - it may be useful to provide an enriched field label, using a short sentence, thus giving easy access to the functionality:

Note: See Text, Lists, Links for predefined text styles for labels and headers.

Accessibility

Ensure that screen readers will identify the connection between a field and its corresponding label. When using the HTMLB library use the label control for labels. When using plain HTML use the HTML label element for labels (see the code example below). The connection between a label and the corresponding field (or other screen element) is established with the "for" statement.

Example

<label for="fd1"
       title="Input field Search" accesskey="S">
       <u>S</u>earch</label>
<input type="text" name="textfield1" id="fd1" title="Input field Search">

Code 1: HTML code for a simple input field with shortcut for the label

Read-Only Fields

Read-only fields are fields where data have been entered either by the user or the system, but which in the current context cannot be changed. Typically read-only fields describe attributes of objects. An inspection text behind the field may explain the meaning of the field value.

Input Fields

Input fields come in several variants:

Input/Output Field: Fields where users can enter or edit data.
Required Field: Users cannot leave these fields empty; they are required to enter a value.
Field with Dropdown List Box: Here users can select or change predefined values; they cannot enter values manually.
Dropdown List Box with Button: This is an extension of the dropdown list box with label; an event is fired as soon as a new value is being selected; in this case no button is needed. Alternatively, an additional button initiates an action after a value has been selected; depending on the context, it is set to "emphasized" or not.
Input Field with Button: This is a combination of an input field, usually with a label, and a pushbutton. The pushbutton is used to initiate an action after a value has been supplied; depending on the context (i.e. if it is important or not), the button is set to "emphasized" or not.
Example: A search field can be implemented as an input field with "emphasized" "go" button.
There is more information on pushbuttons and the difference between emphasized vs. non-emphasized buttons.

Examples

Input/Output Field
Required Field
Field with Dropdown List Box
Input Field with Button

Alignment

Basically the rules for alignment and arrangement of fields apply as they are laid down in the SAP Style Guide. We summarize:

Fields are triples consisting of

a label,
a read-only field, input/output field or dropdown list box, and
an optional help text.

Labels and fields are left-justified and aligned below each other; help texts should be put behind the input field or, if space is insufficient, directly underneath the input field, left aligned with its left border. If there is no space to put the label to the left of the input field, put it above (see above).

Text (labels without corresponding fields) is usually left-aligned.

There are four possibilies of arranging field labels and help texts in relation to the input field:

		help text
field label	Orientation	vertical (behind)	horizontal (underneath)
	vertical (in front)	Standard (wide): + takes only one line - is rather wide	can be used, but: - takes two lines - is of medium width
	horizontal (above)	not recommended - rather take the upper right one. (If you have got the space to write the help text behind the input field, it's preferable to put the label in front and the help text underneath - the label is more important and should be more prominent.)	Standard (narrow): + is rather narrow - takes three lines

Figure 1: Possible combinations of label and help text position in relation to the input field.

There can be cases when "primary" and "secondary" field labels can be used, the primary ("valid thru" in the example below) indicating the meaning of the group of fields, the secondary ("Month" and "Year") giving information on what to enter into the fields directly associated.

Saving Space

If space matters,

place the labels above the fields and omit the help texts (labels put above fields are set in small type and are not underlined)
combine labels with read-only fields to one label or omit the label if the meaning of the field is evident.
Example: "Phone: +496227-12345678"
Example: "Germany"

Figure 2: Saving space with field names and read-only fields.

top