Im folgenden Tutorial möchte ich Ihnen zeigen, wie Sie Eingabefelder definieren können, deren Vorbelegung beim Anklicken verschwindet.
Zuerst zum Formular selbst. Im Beispiel besteht das Formular aus zwei Eingabefeldern, einem Button zum Versenden und einem zum Zurücksetzen des Formulars:
<form name="kontakt" onReset="zuruecksetzen()"><!-- hier müssen noch Angaben zu method und action gemacht werden -->
<input type="text" name="absender" id="eingabe" class="vorbelegung" value="Ihr Name" onFocus="activate(this,'Ihr Name')" onBlur="leave(this,'Ihr Name')">
<p><textarea name="nachricht" id="eingabe" class="vorbelegung" onFocus="activate(this,'Ihre Nachricht')" onBlur="leave(this,'Ihre Nachricht')">Ihre Nachricht</textarea>
<p><input type="submit" name="button" value="Absenden"> <input type="reset" name="button" value="Zurücksetzen">
</form>
Der Text der Eingabefelder wird mittels CSS grau und kursiv dargestellt. Außerdem wird die Größe der Felder festelegt. Die Klasse .normal {} wird später erläutert:
<style type="text/css">
.vorbelegung {
color:#808080;
font-style:italic;
}
.normal {
color:#000000;
font-style:normal;
}
input#eingabe {
width:15em;
}
textarea {
width:20em;
height:15em;
}
</style>
Wenn man den Code des Formulars ansieht wird man merken, dass beim Anklicken (onFocus) und Verlassen (onBlur) der Eingabefelder und beim Zurücksetzen des Formulars (onReset) JavaScript-Funktionen ausgeführt werden. Diese möchte ich näher erläutern, denn sie stellen das Kernstück dieses „Effekts“ dar.
Zuerst zu activate(). Diese Funktion wird beim Anklicken der Eingabefelder aufgerufen:
function activate(element,vorbelegung) { //Diese Funktion benötigt zwei Angaben: Die erste (element) dient dazu, auf das entsprechende Formularfeld zuzugreifen. Hier ist im Formular immer this anzugeben (siehe Formular). Die zweite (vorbelegung) enthält den gleichen Text, der auch bei dem jeweiligen <input>-Feld unter value="" bzw. bei <textarea> zwischen <textarea> und </textarea> angegeben ist.
if (element.value == vorbelegung) { //Hier wird überprüft, ob der derzeitige Inhalt der Vorbelegung entspricht.
element.value = ''; //Ist das der Fall, dann wird der Inhalt gelöscht und
element.className = 'normal'; //wieder normal dargestellt (die Klasse des Feldes wird auf 'normal' geändert).
}
}
Nun zu leave(). Diese Funktion wird beim Verlassen der Eingabefelder aufgerufen:
function leave(element,vorbelegung) { //Diese Funktion benötigt die gleichen Angaben wie activate().
if (element.value == '') { //Hier wird überprüft, ob das Feld bereits durch den User ausgefüllt wurde.
element.value = vorbelegung; //Wenn nicht, dann wird die Vorbelegung wiederhergestellt und
element.className = 'vorbelegung'; //der Text wieder grau und kursiv dargestellt (erneute Änderung der Klasse).
}
}
Die letzte benötigte Funktion ist zuruecksetzen(). Sie wird beim Zurücksetzen des Formulars ausgeführt:
function zuruecksetzen() {
for(i=0;i<2;i++) { //die Zahl 2 in dieser Zeile ist durch die Gesamtanzahl der Eingabefelder zu ersetzen
document.kontakt.elements[i].className = 'vorbelegung'; //So wird jedes Formularfeld wieder grau und kursiv dargestellt. Die Vorbelegungen werden automatisch wiederhergestellt.
}
}
Hier können Sie den Code als Ganzes betrachen: http://sandrock-jonas.xardas.lima-city.de/tut/vorbelegung.txt
Und hier können Sie ein Beispiel dieses Tutorials betrachten (JavaScript muss natürlich aktiviert sein): http://sandrock-jonas.xardas.lima-city.de/tut/vorbelegung.html
Ich hoffe, dass alles verständlich erklärt war.
Verbesserungsvorschläge & Kritik bitte per PN an mich: http://www.lima-city.de/mail.php?m=send&recipient=45742
Jonas