Web Interface  |  Inputs

Labels

This section is about how to deal with input labels and placeholders.

01Input without label

Labels at the form fields are one of the foundations of a good form structure. How they are named and how they are associated with the fields determines how quickly and accurately the form is filled out. An input without a label with only a placeholder causes problems if text is typed in it.

If text is typed in a field without a label, the context of that input disappears.
A label is always a good thing.

02Floating labels

Sometimes, you still want to make the input field without the label. For example, to make the form look more compact. In this case, you can use a floating label that will move over the input during typing.

Floating labels make the input field and data understandable.

03Long labels

People scan the forms, they dislike forms and try to fill them out as quickly as possible and get on with more important things. Short labels at the inputs make reading the form more efficient and help the user think less about filling it out.

The label of input is too long.
The label is still too long.
The label is short and clear.

04Placeholder

The placeholder is an important part of an effective form. It helps to understand the format of the data being entered and tells the user what you are expected of them.

Often in forms you will find that the placeholder simply duplicates the field label. This makes little sense. In that case, placeholder is not needed at all and just creates noise. It is better for placeholder to show the expected data or format.

The placeholder does not give an understanding of the format of the data. It simply duplicates the label of the input.
The placeholder helps to understand the format of the data.