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:
<input onfocus="this.value=''" type="text" value="First Name:" />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:
