Learn about how the placement of labels can impact your form.
- [Instructor] We have already talked about … how important labels are to using your forms, … but the next thing to consider in regards to labels … is where we should place them. … As you can see from this example, … we have quite a few options. … Some of these choices are much better than others. … Here's a rundown of advantages and disadvantages … for each approach. … Left-aligned label forms are the slowest to complete. … This is likely because of the visual distance … between the label and the input field. … The shorter the label, the further away … it will be from the input field. … That said, slower completion times … might not always be a bad thing. … In fact, if you want people to slow down … and consider each input in a form more carefully, … left-aligned labels may be a good way to go, … especially for forms with lots of optional fields, … sensitive data that needs to be considered more carefully, … or unfamiliar data. … Left-aligned labels have another disadvantage. … They require more horizontal space, …
- Why form design matters
- Incorporating visual information
- Selecting colors for web forms
- Designating types of inputs
- Grouping and sequencing questions
- Helping with predictive search
- Showing validation and success messages
- Addressing errors
- Designing forms for mobile screens
- Leveraging boxes, buttons, and tabs
- Adding CAPTCHA to forms
- Accessibility considerations
Skill Level Intermediate
Design the Web: Styling Form Elementswith Chris Converse39m 34s Beginner
Careers in Web Design and Developmentwith Jen Kramer27m 55s Intermediate
1. Forms Are for Everyone
2. Form Organization
3. Organizing Content
4. Guiding Users Through the Form
5. Actions and Buttons
Alignment and styling3m 24s
6. Form Visuals
7. Specific Form Type Tips
8. Common Form Needs and Considerations
Next steps2m 3s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.