Form Design: Label

Posted on

Label is very important when building form. Some benefits using label:

  1. Sighted user can see and read it
  2. It can make field easier to digest
  3. Increase hit area so users can click it to set focus to the field
  4. Visually-impaired users can hear them by using a screenreader

Best Practices

Always use label

Considering the importance of label, always use label for every input.

always use label

Use short label

Short labels help user to scan the form quicky. One or two words should suffice.

short label

Don't use placeholder as label

Some problems with placeholder:

label not placeholder

Use Sentence Case

There are some ways to write labels:

Sentence case is easier and faster to read.

label sentence case


in HTML, label is created using <label>. To connect label and input, input id and label's for should match and be unique.

For button ie Submit, label is not needed because the text inside the button acts as label.

Example of form with labels:

<!-- label 'for' and input 'id' must be same -->
<label for="name">name</label>
<input id="name" type="text" name="name">

<label for="email">email</label>
<input id="email" type="email" name="email">

<!-- submit doesn't need a label, its value attribute acts as label -->
<input type="submit" value="Sign up">