How can I create a default value that disappears when the user types in the form?

What code could I use to show a default value that will disappear once you write the first character (without the need to delete the default value using supr or the backspace key as it happens in the exercise) in the cell where the information should be submitted?

This is something I have seen in many website forms and I think it enhances the UX.

To show what I mean, the searcher of this website can serve as an example:

To do this you should use placeholder attribute. Quote from MDN:

placeholder
A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is text , search , tel , url or email ; otherwise it is ignored.

For example, this is the search input field from Rotten Tomatoes:

<input type="text" name="search" class="form-control" placeholder="Search movies, TV, actors, more..." id="fullscreen-search-term" autocomplete="off" value="">
38 Likes

Thanks, factoradic! I put what you said into practice and it worked!

8 Likes

How can I put the placeholder text in italics ? I tried using emphasis tags, but it didn’t work. Is it possible to do it with HTML, or does that need to be done with CSS? Thanks in advance!

2 Likes

i hope you will find the answer here :smiley:

2 Likes

Why would I use id on the input?
I don’t have a good understanding of id, can you help me out with an explanation or recommendation of a webpage/book?

1 Like

id and class are selectors we are using them to style the elements in the CSS , the difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
while learning HTML you will not use them so don’t worry you will understand them well in the CSS lessons.

3 Likes