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:

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="">

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


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!


i hope you will find the answer here :smiley:


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.


Hi factoradic,
Does the placeholder attribute assume in this case (‘input’ tags in forms) the same role/function as ‘value’ attribute.

My doubt comes from the lesson where it explains: " The value of the value attribute is paired with the value of the name attribute and sent as text when the form is submitted."

So would the placeholder attribute work the same? Would it be ok as standard “form” coding?Thanks in advance

The placeholder attribute is, as its name suggests, simply a placeholder. Let’s say the placeholder attribute of an <input> element is set to "Name", the text "Name" will be displayed in the input field until the user inputs at least one character, then the placeholder will disappear and instead, we will see what the user inputted

Keeping this in mind, it wouldn’t make sense for form data to be send in name/placeholder pairs, as we don’t care about the placeholder, but what the user actually inputted meaning it would only make sense if the data was sent in name/value pairs

Thank’s for your reply, accurate and solving my doubt.

1 Like

Pseudo code

const input = document.querySelector('input')
input.onblur = function (e) {
    if ( === "") {
        // log that value is missing, or = "Not Specified"  // or, = "Some default value"

id is used for mainly css purpose and javascript.
id is only used to identify an element

what’s supr key? I am confused about what you said