How To Put a Label Inside of an HTML Text Box

In this post I am going to show you a relatively basic trick in the world of web development and web design, but has a big impact on the design and usability of your web forms. This post will explain how to put the label inside of an HTML text box and then have it appear and reappear based on if the user click inside or outside of the text box.

EXAMPLE OF HOW IT WORKS

Here is a text box with this code implemented. Notice that when you click on the text box the “Click Here to Test” text goes away and you can type. When you then click outside of the text box the “Click Here to Test” text then reappears.

THE CODE TO IMPLEMENT

From the following code you can probably pretty easily see how this is implemented. The “onclick” and “onblur” attributes are the pieces of code that you will want to edit.

Leave a Reply

Your email address will not be published. Required fields are marked *