Make the words in a Form Input disappear on click.

Recently I was creating a contact form for a client’s website. Due to the fact that the form was in a rather small area, I didn’t have very much room for the text and inputs. See my solution below.

Usually I would write the name of the input followed by the input like this:

First Name:

Since I didn’t have room for that I had to come up with a solution.

The first thing I thought was to add the name of the field as a value:

What I don’t like about that solution is that the user has to select the text manually, delete it, and then fill out the field. I wanted the text to disappear when the user clicked into the input. I looked around and figured it out; here’s how it looks / works finished:

All you need to do is add onfocus="this.value=''" to your input. So the code for this input looks like this:

Here’s one other similar technique that might come in handy. The following input selects the text on input, instead of clearing it.

Here’s the code for that technique: