HTML – Clear Input Field Value When Selected

--> (Word)

--> (PDF)

--> (Epub)

Often when creating forms on a website it is helpful to place descriptive text with some of the form fields to help the user understand what they should type in the box. If this descriptive text is not cleared automatically when the user begins to type, sometimes this will hinder them more than it helps.

Using a simple JavaScript function you can automatically clear the example values from the input box when the user clicks into the field.

This technique can easily be used to clear the contents of any input box. All you have to do, is add a small bit of JavaScript to your input like this:

HTML Version

<input value="Your Comment" onclick="this.value='' " type="text">

PHP Version

<input value="Your Comment" onclick="this.value=\'\' " type="text">

Alternative (by HeelpBook Staff)

For an example of how this works, look at my search box to the right.

If you want to enable an advanced version of this event, you could use the following solution, always using Javascript in the input form:

HTML Version

<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '' ;}" onblur="if (this.value == '') {this.value = 'Search' ;}" />

PHP Version

<input type="text" value="Search" onfocus="if (this.value == \'Search\') {this.value = \'\' ;}" onblur="if (this.value == \'\') {this.value = \'Search\' ;}" />

NOTE: in PHP the ‘ character is not interpreted AS IS, but you should tell PHP to NOT use it as a command delimiter by using the form \’

There are a lot of other ways to do this… post yours below.