From the course: HTML and CSS: Creating Forms

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Placeholder attribute

Placeholder attribute

From the course: HTML and CSS: Creating Forms

Start my 1-month free trial Buy for my team

Placeholder attribute

“

- [Narrator] A placeholder is a pseudo element that allows you to display text inside a form field that disappears once the user has focused in the field. It's meant to give the user a hint as to what should go in the field. Here we have the email address field we set up in an earlier video. We're going to add a placeholder to this input to let the user know that the format of email@example.com is expected in that field. So on the input element, I'm going to add placeholder equals, and then email@example.com, and save. Going to the browser, I'm going to refresh. And now, you can see that placeholder shows up inside the input field. By default, the placeholder appears as gray text. Once I click in this field and start typing, the placeholder text disappears. Although placeholder text is very popular on websites, there's several accessibility and usability reasons why you should avoid it. First, a user may look at this input field and think that it's already filled out, even if it seems…

Contents