<form>    
    <input onclick="this.value=''" type="text" value="Ihre E-Mail" />
</form>

Wenn der Benutzer das Feld anklickt sollte der Hinweis entfernt werden. Dies kann mit mit dem onclick JavaScript Ereignis geschehen:

<form>
    <input onfocus="this.value=''" type="text" value="Ihre E-Mail" />
</form>

Unsere Besucher können die Eingabefelder aber auch anders erreichen. Die Tab Taste kann beispielsweise benutzt werden, um zwischen den Feldern zu navigieren. Daher ist das onfocus Ereignis besser für unsere Zwecke geeignet:

<form>
    <input onfocus="this.value=''" type="text" value="Ihre E-Mail" />
</form>

Die scheint gut zu funktionieren. Es gibt aber immer noch ein Problem wenn der Besucher seine E-Mail Adresse eingibt, und dann etwas anderes auf unserer Seite liest. Klickt er das Feld dann noch einmal an verschwindet seine Vorherige Eingabe. Um dies zu verhindern überprüfen wir, ob sich der Inhalt des Textfelds geändert hat:

<form>
    <input type="text" value="Ihre E-Mail" onfocus="if (this.value == 'Ihre E-Mail')  {this.value=''}" />
</form>

Hier das Beispiel:

Den Ausgangstext wiederherstellen wenn nichts eingegeben wurde

Wunderbar, so weit funktioniert alles. Was passiert aber, wenn unser Besucher das Feld anklickt und dann nichts eingibt? Das Feld bleibt einfach leer. Wenn das Formular keine weiteren Beschreibungen hat kann der Benutzer vergessen haben, welche Informationen in das Feld sollen. Wir umgehen diesen Fall indem wir den ursprünglichen Wert wiederherstellen, wenn das Feld verlassen wird und nichts eingegeben wurde:

<form>
    <input type="text" value="Ihre E-Mail" onblur="if(this.value == '') { this.       value='Ihre E-Mail'}" onfocus="if (this.value == 'Ihre E-Mail') {this.value=''}" />
</form>

Text beim anklicken auswählen

Bei einigen Eingabefelder kann etwas anderes nützlich sein, beispielsweise den Text auszuwählen. Wenn wir dies tun kann der Besucher den Feldinhalt entweder löschen oder bearbeiten:

<form>
    <input onfocus="this.select()" type="text" value="Vorherige Suche" />
</form>

Dynamische Farben

Dies ist ein etwas komplizierteres Thema. Nehmen wir an wir wollen den Hinweistext in einer anderen Farbe haben als die Eingabe des Benutzers. Hier ist ein Weg um dies zu erreichen:

<form>
    <input style="color: #f00" type="text" value="Ihre E-Mail" onblur="if(this.value  == '') { this.style.color='#f00'; this.value='Ihre E-Mail'}" onfocus="if (this.value  == 'Ihre E-Mail') {this.style.color='#0f0'; this.value=''}" />
</form>

Hier muss man im Auge behalten, dass beim erneuten Laden der Seite Probleme auftreten können. Manche Browser werden vorher vom Benutzer eingegeben Werte automatisch wiederherstellen. Dann haben wir diese Werte jedoch in der falschen Farbe.
Möchte man dies verhindern kann man zu onload oder ähnlichen JavaScript Ereignissen greifen.