How to Clear Text From a Search Field on an HTML Page on Click

A common way of labeling input fields on an HTML page is to put the description inside the field where the user will type the information. For example, you might put the words "Enter Search Text" inside the field where a user can type text to search the Web page. However, when the user clicks inside the field, you don't want him to have to backspace over the label. The ideal functionality is for the text to be automatically erased when the user clicks inside the field. To do this, you can use the "onFocus" attribute of the HTML "input" tag.

Instructions

1

Create the Web page. Add an HTML form for the search input box. For example, type:

2

Add the "onFocus" attribute to the "input" tag. Use "this" to indicate the current field and set the field equal to blank. For example, type:

3

Navigate to the Web page in a browser and click on the search field to test it. Watch the text disappear when you click in the field.