default text is gone when mouse is put

[dotJoon]

<form>
<input type='text' 
          value='This is my text.' 
          style='width:200px'>
</form>

When the page is loading with the code above, the input box has the text "This is my text."
If the user puts his mouse on the box, he or she has to delete the default text for inputting another text.

I like to make it like the following.

(1) When the page is loading, the input box has the text "This is my text."

(2) If the user put his mouse on the input box, the text will be gone, and the input box becomes empty, and it is ready for the user's inputting another text.

[Kravvitz]

Here's how to do that with inline event handlers. (It's best to avoid using inline event handlers.)

<input type='text' 
          value='This is my text.'
          onfocus='if(this.value=="This is my text.")this.value="";'
          onblur='if(this.value=="")this.value="This is my text.";'
          style='width:200px'>

[dotJoon]

<input type='text' 
          value='This is my text.'
          onfocus='if(this.value=="This is my text.")this.value="";'
          onblur='if(this.value=="")this.value="This is my text.";'
          style='width:200px'>

Thank you. it works fine.

It's best to avoid using inline event handlers.

What's the disadvantage of the inline handlers?

[Kravvitz]

You're welcome

One disadvantage is that they clutter the markup. Another is that they can't be cached that way.

For more information on this, read these:
The Behavior Layer
Separating behavior and structure
Behavioral Separation
Unobtrusive JavaScript
DOM Scripting - Sample chapter: Best Practices
Accessible DHTML