Learn about the pros and cons of placeholder text.
- [Instructor] The placeholder attribute … is intended to store a hint. … It gives users extra guidance when filling out a field. … It's particularly useful for fields that have complex rules, … such as a password field. … As placeholder text is not a real value, … it's grayed out so that it can be differentiated … from user-entered values. … Placeholders are appealing … because of their minimal, space-saving aesthetic. … This is because placeholder text is placed inside the field, … but this is a problematic way to give users a hint. … In an attempt to shorten the length of a form … or reduce visual noise, … designers use placeholder text as an input label. … This practice places a burden on short-term memory. … Once the user clicks on an input field … the label will disappear. … And so the user cannot double-check … that what they wrote was what was being asked of them. … This increases the chance of error. … Another problem is that users could mistake placeholder text … for pre-filled data, and hence ignore it. …
- 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.