Form labels vertical alignment

Form labels should be put on a baseline of their fields’ text:

Form labels should be put on a baseline of the fields’ text

If you put a label at the vertical center of a field, as some do, it will jump up when split into lines:

If you put a label at the vertical center of a field it will jump up when split into lines

It gets worse with more lines; here the long label has actually shifted down the field:

It gets worse with more lines

If labels and fields behave this way, a form looks unstable and loosely built, and you start thinking badly of its developer.

The first line of a label text should always stand still:

Same with multiline fields’ text:

A form is an editable table, so the table layout principles apply.

Subscribe to this blog
Share
Pin
2014   design
Popular