Learn how to add placeholder text to a form.
- [Narrator] A placeholder is a…pseudo-element that allows you to…display text inside a form field…and disappears once the user has…focus in the field.…It's meant to give the user a hint…as to what should go in the field.…This is an example.…Here the placeholder lets the user…know that the format of email@example.com…is expected in that field.…In the code, you can see the placeholder…attribute on line 22.…It's just "placeholder=" and then…whatever text you wish to display.…By default, the placeholder appears…as gray text.…
The placeholder can be used on any…fill-and-type input field, except…for those that already have their…own placeholder text, like date or time.…The placeholder doesn't need to match…the rules for the input element.…For example, the zip code placeholder…that you see here on this form…has a word, even though there's a…pattern restricting the field to digits.…Although placeholder text is very popular…on websites lately, there are several…accessibility and usability reasons…why you should avoid it.…First, a user may look at this…
- How users interact with forms
- Designing forms that are easy to use
- Following data privacy laws when collecting information
- Choosing which HTML input types to use
- Adding buttons
- Adding interactive validation
- Styling form fields with CSS
- Using positioning and flexbox to create responsive form layouts
Skill Level Beginner
Building Web Applications with Ajaxwith Sasha Vodnik1h 31m Intermediate
1. Designing a Form Experience
2. Creating Forms with HTML
3. Making Forms Interactive
4. Styling Form Fields with CSS
5. Form Layout with CSS
- 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.