6.2. Place each label next to the corresponding field

Each label must be placed close to the field to which it is attached:

There must only be a few pixels that separate a label from its corresponding field so that their association is visually obvious.

Screenshot of a form with 4 fields, the distance between the labels and the fields varies from 70 to 140 pixels (depending on the label length).
Same form, the labels are aligned on the right, they are all about 10 pixels from their respective fields.
In this example, labels are right-aligned so that they are next to the corresponding fields.

Screen capture, caption below.
In this example, the headings are positioned immediately above their respective form fields.

Screenshot, a checkbox followed immediately by a label.
In this example, the checkbox is positioned immediately to the left of the label.

Comments

Add a comment

Required fields are marked *.

Back to top