Текст-заполнитель HTML в форме текстового поля

На одном из моих веб-сайтов я создал форму, которая собирает имена людей, адреса электронной почты и описание их идеи.

Я ограничил количество символов описания 500 символами, так как я не хочу читать тонну, и я выяснил, как сделать так, чтобы текст отображался в текстовой области до того, как пользователь введет то, что он хочет.

В настоящее время пользователь должен удалить «Описание вашей идеи» сами, но я хочу добавить класс-заполнитель, в котором он удаляет то, что я написал в текстовом поле, когда они щелкают текстовое поле

Я просмотрел несколько сайтов и не мог понять, как его использовать Я поместил его в свой код , но обычно класс просто отображается как текст внутри моего текстового поля.

Любая помощь по использованию этого класса была бы большой благодарностью

Вот что я написал

Внутри тегов заголовка

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

Внутри тегов тела

<form name="form1" method="post" action="ideas.php"> 
Your Name: &nbsp;<input type="text" name="name"><br>
Your Email: &nbsp;<input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);" 
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>