Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML input field hint

I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?

<form action="input_password.htm">   <p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p> </form> 
like image 251
Frank Vilea Avatar asked Jun 08 '11 14:06

Frank Vilea


People also ask

How do you show input field hints?

If you want to set a hint for text area or input field, then use the HTML placeholder attribute. The hint is the expected value, which gets displayed before the user enters a value, for example, name, details, etc.

Which attribute is used to set a hint in a input field?

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.

Why placeholder is used in HTML?

The placeholder attribute specifies a short hint that describes the expected value of a input field / textarea. The short hint is displayed in the field before the user enters a value.


2 Answers

With a bit of JavaScript:

<input    value="Enter username..."    onfocus="if (this.value === 'Enter username...') this.value=''" ... /> 

HTML5 has a nice attribute for this, called placeholder:

<input placeholder="Enter username.." ... /> 

but this attribute is not supported in old browsers.

like image 71
aorcsik Avatar answered Sep 29 '22 14:09

aorcsik


You'd need attach an onFocus event to the input field via Javascript:

<input type="text" onfocus="this.value=''" value="..." ... /> 
like image 45
Marc B Avatar answered Sep 29 '22 15:09

Marc B