HTML Formular - vordefinierten Text verschwinden lassen?

Guten Abend zsm.

Ich hoffe, mir kann hier jemand eine Lösung/Idee geben. Aktuell bin ich grad dran, im HTML ein Formular zu schreiben.

Das ganze ist in einem Form- & Label-Tag verschachtelt (Bin nicht sicher, ob ich den label weglassen könnte). Nun möchte ich z.B. im Name-Feld einen vordefinierten Text haben (z.B. Name oder Ihr Name), welcher allerdings beim reinklicken verschwindet.

Aktuell sieht der Code so aus:

   <label>
            <input type="text" maxlength="30" value="Name" name="Name">

Über den den value gebe ich ihm den vordefinierten Text. Allerdings muss der Besucher dann den Text erst auswählen, löschen und dann reinschreiben. Gibt es die Möglichkeit, dass direkt beim 'reinklicken' in dieses Feld der vordefinierte Text verschwindet, wie man es im Web bei vielen Formularen findet?

Suche nebenbei noch bei w3schools, selfhtml und in Foren, bin aber bisher noch nicht fündig geworden.

Danke für jeden Tipp, wie ich das lösen könnte!

Gruss, jeff

Answer 1

[BrilleHN]

Geht mit JavaScript und dem Eventhandler "OnFocus" du musst allerdings in der Javascript-Funktion vor dem Löschen prüfen ob das Element z.B. den Wert "Name", denn sonst würde auch eine Eingabe des Users bei erneuter Zuweisung des Fokus gelöscht werden.

Hier wird es genauer beschrieben:

http://www.vlmedia.de/571/textfeld-inhalt-bei-fokus-loschen

Answer 2

[verreisterNutzer]

Ich weis nicht sicher warum du das machen willst, ich gehe jetzt davon aus das du dem Nutzer einfach sagen willst, was in den Input rein soll. Dafür ist das Placeholder Attribut da, da wird dann der Text im Hintergrund eingefügt und bei einer Eingabe einfach überschreiben. Falls du unbedingt den Text über Value einfügen willst, dann musst du das per JavaScript machen.

Das habe ich mal schnell gemacht, ist alles andere als Praktisch aber das Prinzip sollte klar werden. http://jsfiddle.net/bLpzo063/

Hoffe ich konnte dir Helfen

LG

Comments

[jeffreycolt]

Gesucht habe ich eigentlich das Placeholder-Attribut. Nur war mir das bisher noch nicht bekannt, bin doch noch ziemlich Anfänger ;-)

Werde also damit arbeiten, danke

Answer 3

[threadi]

Wenn Du HTML5-Dokumente schreibst solltest Du hierfür das placeholder-Attribut verwenden, welches genau für das gedacht ist was Du suchst.

Woher ich das weiß: Berufserfahrung – mit dem Internet verbunden seit 1993

Answer 4

[yerooke]

Auch ich kann dir nur zu Placeholder Raten!

Beispiel:

<input type="text" maxlength="30" value="Name" name="Name" placeholder="Bitte Namen eingeben">

Ältere Browser unterstützen dies aber nicht, hier evtl. eine Backuplösung via JavaScript bzw. jQuery anbieten.

Answer 5

[NFSOG]

wenn du html5 benutzt kannst du die placeholder-Eigenschaft benutzen. Die wird allerdings noch nicht von allen Browsern nativ unterstützt, da solltest du dann nach einer Ausweichlösung googlen.

Comments

[jeffreycolt]

Wie der Kommentar zu MoVo's Antwort schon sagt, der Placeholder ist das gesuchte.