- Options for positioning form labels
- 1. Label on top of the field
- 2. Label to the left of the field, and flush left
- 3. Label to the left of the field, and flush right
- 4. Label inside the field
- 5. Label as a tool tip
- Deciding on position
- Consistency
- Summary
- Frequently Asked Questions (FAQs) about Form Label Positioning
When it comes to the design and development of forms, one of the most popular topics is the positioning of labels.
There are a range of different options, but many articles on the subject touch on only some of the advantages and disadvantages of some of these options.
How do you put all that disparate information together to make a good decision, especially if you’re in a hurry?
It was clearly time to bring everything together in one place. Read on for the different options for form label positioning, and the complete list of advantages and disadvantages for each.
If you haven’t got time for that, the main thing you need to know is:
The most usable and accessible option is to have labels always visible, and located above or beside the field.
There’s also a handy guide to choosing between these options.
Options for positioning form labels
For English-based forms, the main options (1) are:
- Label on top of the field
- Label to the left of the field, and flush left
- Label to the left of the field, and flush right
- Label inside the field
- Label as a tool tip
Some of these choices are much better than others. Here’s the complete list of advantages and disadvantages for each approach.
1. Label on top of the field
Advantages
- On small screens, when focus is in-field, label can still be seen (despite zoom).
- User may be able to see the label and the field within one glance.
- Label length can be longer than field length.
- Allows for different label lengths when form is translated into other languages.
- Form is narrower compared to having labels beside fields.
- Longer labels that wrap are easier to read, as there is a consistent left edge for the eye to return to.
- Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
- Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
- At any time, users can compare their answers to the labels.
- Easy to implement well.
- In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
- It’s easy for users to see where they have to enter information.
- Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
- Works with touch interfaces.
Disadvantages
- Form is twice as long compared to forms with labels beside fields.
- Labels are harder to scan, as they are separated by fields.
2. Label to the left of the field, and flush left
Advantages
- Form is shorter compared to having labels above fields.
- Label length can be longer than field length.
- Labels are easier to scan, as they are not separated by fields.
- Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
- At any time, users can compare their answers to the labels.
- Easy to implement well.
- In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
- It’s easy for users to see where they have to enter information.
- Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
- Works with touch interfaces.
Disadvantages
- On small screens, when focus is in-field, label may not be visible (because of zoom).
- User is unlikely to be able to see the label and the field within one glance.
- When form is translated into other languages, labels may no longer fit into allocated space.
- Form is wider compared to having labels above fields.
- Labels may be far away from their corresponding fields, so it can be hard to see which goes with which (zebra striping can help to minimise this issue).
3. Label to the left of the field, and flush right
Advantages
- User may be able to see the label and the field within one glance.
- Form is shorter compared to having labels above fields.
- Label length can be longer than field length.
- Labels are easier to scan, as they are not separated by fields.
- Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
- Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
- At any time, users can compare their answers to the labels.
- Easy to implement well.
- In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
- It’s easy for users to see where they have to enter information.
- Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
- Works with touch interfaces.
Disadvantages
- On small screens, when focus is in-field, label may not be visible (because of zoom).
- When form is translated into other languages, labels may no longer fit into allocated space.
- Form is wider compared to having labels above fields.
- Longer labels that wrap are harder to read, as the left edge is ragged, making it more work for the eye to find the start of each line.
4. Label inside the field
Advantages
- On small screens, when focus is in-field, label can still be seen (despite zoom).
- User may be able to see the label and the field within one glance.
- Form is narrower compared to having labels beside fields.
- Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
- Works with touch interfaces.
Disadvantages
- Label length has to be less than field length.
- When form is translated into other languages, labels may no longer fit into allocated space.
- Labels are harder to scan are they are contained within fields.
- Doesn’t allow for longer labels that wrap.
- If label disappears completely once the field is being filled out, the user has to remember what the label was, and will be derailed by interruptions.
- If label disappears completely once the field is being filled out, the user can’t later compare their answers to the labels.
- If the label stays as is, even when the field is being filled out, the user has significantly less room to enter information. It’s also very hard for users to distinguish labels from answers, and there is no real space-saving.
- Difficult to implement well.
- In HTML, use of the placeholder attribute as a replacement for label reduces accessibility.
- Because fields look like they’ve already been filled out, it’s difficult for users to see where they have to enter information, so error rates are higher.
- Doesn’t work with field types other than text boxes and possibly drop downs.
5. Label as a tool tip
Advantages
- Allows for different label lengths when form is translated into other languages.
- Form is somewhat narrower compared to having labels beside fields.
- Labels are visually associated with their corresponding fields, so it easy to see which goes with which.
- It’s easy for users to see where they have to enter information.
Disadvantages
- Atypical design, so likely to confuse and frustrate users.
- Breaks the conversational pattern that is central to successful form filling: ask the question before collecting the answer.
- On small screens, when focus is in-field, label may not be visible.
- User unlikely to be able to see the label and the field within one glance.
- When form is translated into other languages, labels may no longer fit into allocated space.
- Form is somewhat wider compared to having labels above fields.
- Labels are impossible to scan as they are hidden.
- If label disappears completely once the field is being filled out, the user has to remember what the label was, and will be derailed by interruptions.
- If label disappears completely once the field is being filled out, the user can’t later compare their answers to the labels.
- Difficult to implement well.
- Reduces accessibility.
- Doesn’t work with field types other than text boxes and possibly drop downs.
- Doesn’t work well with touch interfaces.
Deciding on position
Even if you don’t actually read the text in the bullet points above, it’s clear that there are many more disadvantages than advantages for:
- label inside the field
- label as a tooltip.
So in most cases, these are going to be poor choices. Instead, go with one of the following:
- label on top of the field
- label to the left of the field, and flush left
- label to the left of the field, and flush right.
To decide between these three options, ask the following questions:
| Question to ask about the form | How answer impacts label positioning |
|---|---|
| Will this form be filled out on small screens? | Best choice for small screens is label above field. |
| Will the form be accessed via touch? | Avoid labels inside fields or as tool tips. |
| Are the labels mostly short? | Labels beside fields works best when labels are short. |
| Are the labels full questions (e.g. “When do you want your new policy to start?”)? | With full questions, labels can be either above or beside the field, but should be flush left. |
| Will the form be translated? | Labels above fields gives the most flexibility for translation. |
| What types of fields does the form have? | If there are fields other than text boxes, you can’t put labels inside fields. Labels as tool tips is also a poor choice. |
| What resources are available for development? | Labels above fields take the least development time, closely followed by labels beside fields. |
| At what skill level are the developers? | Labels inside fields or as tool tips should only be attempted by expert developers with plenty of time. |
Consistency
Within a form
Like all elements of an interface’s design, consistency with label positioning helps users and minimises errors. This is because the brain is wired for patterns; when positioning is consistent the brain will rapidly learn where to look for labels. This means it’s best if you can stick just one approach per form.
Across forms
If users may encounter more than one form from your organisation, usability and accuracy are further aided by using consistent positioning across forms. Sometimes this means going for the next-to-best choice for an individual form, for the sake of overall usability.
For example, it may be that labels above fields are the ideal choice for the form you are currently working, but most other forms within your organisation work better with labels beside fields.
Summary
Form label positioning is a hotly-debated topic, with many people quick to declare one approach is a clear winner. In reality, the situation is more nuanced. But that doesn’t mean that deciding on positioning has to be hard. Using the questions and advantages/disadvantages above, you can easily determine what’s going to be best for your particular situation (and hopefully use that approach consistently).
What’s been your experience with label positioning? Are there any advantages and disadvantages that have been missed? Tell us in the comments.
Further reading
- Eye Tracking and Usability Testing in Form Layout Evaluation
- Labels in input fields aren’t such a good idea
- Don’t put labels inside text boxes unless you’re Luke W
- Labels in input fields are problematic (tweet)
- Mobile form usability: place labels above the field
- Top, right or left aligned form labels
- Alignment
- Label placement in forms
- Web form design guidelines: an eyetracking study
- HTML 5 spec – forms – the placeholder attribute
- HTML5 spec – DOM – the title attribute
- Making infield form labels suck less
- Strictly speaking, other options include: putting the label to the right of or beneath the field; and float label, where the label begins inside the field but floats to the top of the field upon focus. For languages that read left to right, top to bottom, putting the label to the right of or below the field makes no sense. It would essentially mean questions are being asked after answers must be given. The float label approach has some of the benefits of putting the label above the field, but also some of the problems of putting the label inside the field. It has problems of its own too, namely: introducing unnecessary animation; and that the floated label is very small and thus hard to read. ↩
Frequently Asked Questions (FAQs) about Form Label Positioning
What is the importance of form label positioning in web design?
Form label positioning plays a crucial role in web design as it directly impacts user experience. Properly positioned labels make it easier for users to fill out forms, reducing the chances of errors and enhancing overall usability. Labels guide users on what information is required in each field, making the process more intuitive. Poorly positioned labels can lead to confusion, errors, and increased time to complete the form, which can frustrate users and potentially drive them away from your site.
What are the different types of form label positioning?
There are several types of form label positioning, each with its own advantages and disadvantages. The most common ones include top-aligned, left-aligned, and right-aligned labels. Top-aligned labels are placed above the input field and are generally the easiest to read and fill out. Left-aligned labels are positioned to the left of the input field and provide a clean vertical alignment. Right-aligned labels, positioned to the right of the input field, are often used in languages that read from right to left.
How does form label positioning affect mobile users?
Form label positioning can significantly impact the experience of mobile users. Due to the smaller screen size, top-aligned labels are often the best choice for mobile forms as they are easier to read and don’t require users to zoom in or scroll horizontally. Left or right-aligned labels can be more challenging to use on mobile devices due to the limited screen width.
How can I position a label on top of a text area using CSS?
To position a label on top of a text area using CSS, you can use the ‘position’ property. First, set the position of the parent element to ‘relative’. Then, set the position of the label to ‘absolute’ and use the ‘top’ and ‘left’ properties to adjust its position. Here’s a simple example:.parent {
position: relative;}.label {
position: absolute;
top: 0;
left: 0;}
How can I align form labels to the left using HTML and CSS?
To align form labels to the left using HTML and CSS, you can use the ‘float’ property. Here’s a simple example:<form>
<label for="name" class="left">Name:</label>
<input type="text" id="name" name="name"></form>.left {
float: left;}
What are the accessibility considerations for form label positioning?
When positioning form labels, it’s important to consider accessibility. Labels should be clearly associated with their corresponding input fields to ensure that screen readers can correctly read the form. This can be achieved by using the ‘for’ attribute in the label tag, which should match the ‘id’ attribute of the input field. Additionally, top-aligned labels are generally the most accessible as they can be easily read by people with cognitive disabilities.
How can I position a label inside an input field?
Positioning a label inside an input field, also known as a placeholder, can be achieved using the ‘placeholder’ attribute in the input tag. Here’s an example:<input type="text" id="name" name="name" placeholder="Enter your name">
How does form label positioning affect form completion time?
The positioning of form labels can significantly impact the time it takes for users to complete the form. Research has shown that top-aligned labels can be read and filled out faster than left or right-aligned labels. This is because top-aligned labels require less eye movement and cognitive effort to process.
How can I position a label to the right of an input field?
To position a label to the right of an input field, you can use the ‘float’ property in CSS. Here’s a simple example:<form>
<input type="text" id="name" name="name">
<label for="name" class="right">Name:</label></form>.right {
float: right;}
What are the best practices for form label positioning?
The best practices for form label positioning include ensuring that labels are clearly associated with their corresponding input fields, using top-aligned labels for mobile forms, considering accessibility, and testing different label positions to see what works best for your specific audience. It’s also important to keep labels short and concise, and to use clear and descriptive language.
Jessica EndersJessica Enders has suffered from a life long condition known as a love of designing forms and other transactional interfaces. She is attempting to minimise the adverse symptoms by running her own form design business, Formulate Information Design.
