Why is my form deleting information once you leave an entry field and return to that entry field?

Question

So I have a created a contact form and once you enter information, it retains the information like a normal form should. However, when you try and edit the information on any of the form entry boxes, it instantly deletes any information that was located in that box and requires the user to renter their information anew.

Here is my code:

<div class="contatct-form">
           <form>
              <input type="text" value="Name " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name ';}">
              <input type="text" value="Email " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email ';}">
              <input type="text" value="Phone " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone ';}">
              <textarea rows="2" cols="70" onfocus="if(this.value == 'Message ') this.value='';" onblur="if(this.value == '') this.value='Message ';">Message </textarea>
              <input type="submit" value="Submit">
           </form>
        </div>

Answer 1

Well, that's because you have your onfocus set to clear the value. So when the user clicks on the input to edit the information, (the input element is in focus) the value is set to ''

May I ask what are you trying to achieve exactly?

Update: The best way to get what you're trying to achieve is by using the placeholder attribute. This might be of some help.

But you can also just have an if statement to check to what the value of the input element is. So your onfocus should be something like this

onfocus="if(this.value == 'Name ') { this.value = ''; }"

This is just for your first input, but that's the general idea.