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:
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: