javascript - Can you you show a grey hint in an HTML text box with CSS alone? -

You see these text input boxes from time to time on the Web: A gray label is displayed inside the box, but Once you type there, the gray text disappears. This page also has one: The "title" field behaves like that.

So, the question is:

1. Is there a standard term for this? I'm really struggling to find anything on Google

2. Can it be done with CSS only?

3. This can be unsuccessful, can it be done with local JavaScript? (I.e., just the code inside the tag, not in the HTML header).

I have no way to do this with CSS. But by looking at the source of the page, it is doing this in a variety of ways:

  & lt; Input = "q" class = "textbox" tabindex = "1" onfocus = "if (this value == 'search') this.value = ''" type = "text" maxlength = "80" size = " 28 "value =" search "& gt;  

The middle line, starting with "onfocus", is the place where the work is going on. When the text field gets focused, it checks whether the default value ("search") is there or not. If so, then it sets the value for '' (empty string) otherwise, the text is unaffected.

One potential problem here is that if someone is trying to search for the word "search", then clicks out of the box and clicks again, the text is reset There is no big issue, but you are working, as if keeping something in mind.