Removing default text from <textarea> once it is clicked on by the user?

Okay so here’s some code I wrote for the Form a story exercise:

<textarea id="message" name="message" required cols="40" rows="8">
Insert your text here
</textarea>

So of course this will create a text box with the text “Insert your text here” rendered inside of it. When the user selects the box however, they then have to remove that text themselves, is there any way to set it so that the text is automatically removed once the text area is selected by the user?

Thanks!

use placeholder instead? As the documentation says:

The <textarea> element also accepts several attributes common to form <input> s, such as autocomplete , autofocus , disabled , placeholder , readonly , and required .

input placeholder documentation

2 Likes