Explore the pros and cons of this clever technique leveraging both the look of placeholder text and use of visible labels. Consider where best to use floating labels and how to make them assessable.
- [Instructor] You may have seen this pattern … going around the internet and used on forms. … It's where an input appears as if it has … placeholder text in it, but when you click or tap … into that point, the text moves out of the way … and it allows you to type. … It's really rather clever. … Here's what it looks like. … The user would come to the field, … type in their information, and when they do so, … that what looks like placeholder text … actually floats above the text. … In this way, you can keep the label visible … and also have your placeholder text. … There are pros and cons to using this float label technique. … The main advantage of this pattern … is that the user keeps the field's context … after they've focused and entered a value. … This provides for a more accessible, … less frustrating experience. … This pattern also allows for a clean inline label experience … by default, and it only becomes a little more cluttered … once the user has filled things out. … This pattern will surprise and delight users. …
- 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.