HTML Inputbox mit Beschreibung "vorbefüllen"

[Xetoxyc]

Hi,

das ich eine Input box mit value="" vorbefüllen kann ist mir klar deswegen bitte hierzu keine dummen kommentare...

ich will das im Inputfeld z.b. Username steht aber wenn man reinklickt Username verschwindet so, dass die eingabe einfach durchgeführt werden kann ohne zuvor etwaiges rauszulöschen...

hab 1 beispiel bereits im inet gefunden nur das hat irgendwie nicht bei mir funktioniert =(

Danke =)

 

[Madman1209]

Hi,

dafür brauchst du JavaScript.

VG,
Mad

 

[OhNoIKilledMyHD]

als attribut an das jeweilige Eingabefeld
onFocus="this.value=''"
Die roten sind doppelte Anführungszeichen (")
Die grünen beiden (!) sind einfache Anführungszeichen (')

 

[Mumpitzelchen]

Da gibts ne Webseite namens computerbase.de. Die hat oben ein Suchen Feld wo schon "Suche" drinsteht und weggeht wenn man da reinklickt.
Dann gucken wir uns doch https://www.computerbase.de an und was finden wir ab Zeile 49?

	<form action="/suche/" id="search">
		<input type="search" name="q" value="" placeholder="Suche" id="searchbox" />

 

[Daaron]

Kannst du die Seite in HTML5 schreiben? Wenn ja: Du suchst das Attribut "placeholder". Klappt natürlich nur in HTML5-fähigen Browsern. Chrome, aktueller Safari, aktueller Firefox und auch der aktuelle Opera sollten damit keine Probleme haben. Für den IE9 würd ich meine Hand nicht ins Feuer legen. IE <=8 kanns definitiv nicht. Aber dafür gibts ja JS-Fallback - Lösungen...

<input type="text" placeholder="Username" />

 

[Xetoxyc]

ty Mumpitzelchen
so einfach kanns gehn...

hab mir von mehreren Seiten den Code angeschaut...
bei allen warns Labels und inputs in einem Span verpackt
unds js dahinter

Edit:
@Daaron ah k dachte mir fast das es nen HTML 5 feature is...
da ich der meinung bin das alle die alte browser haben pech haben sollen reicht mir die HTML5 varriante... ewiges mitschleppen von altlasten nervt ;P

 

[Daaron]

Der Vorteil an Labels: Du kannst über CSS (teilweise sogar CSS2 -> IE7 & 8 könnens wahrscheinlich) nette Wirkungen erzielen.

 

[Xetoxyc]

erhält der Placeholder seine farbe auch durch das color attributes oder kann die seperat verändert werden ?

 

[Daaron]

Für Firefox und Webkit-basierte Browser gibts jeweils CSS-Selektoren für die Placeholder, mit denen du Farbe, Schriftart,... modifizieren kannst. IE9 kanns definitiv nicht (da dürfen wir noch n paar Jahre auf IE10 oder 11 warten), Opera kanns soweit ich weiß NOCH nicht.
Die genauen Deklarationen spuckt Google aus.

 

[Xetoxyc]

Ty Daaron

 

[character]

Übrigens sollte man placeholder nicht als Ersatz für label ansehen. Das steht sogar in der HTML5 Spec.

The placeholder attribute should not be used as an alternative to a label.

Bei Formularen mit nur einem Feld (z.B. die Suche hier) ist das kein Problem, aber großen Formularen kann es nerven, wenn das label fehlt.

Das liegt u.a. auch daran, dass Firefox die placeholder anders implementiert als die Webkit-Browser. Beim Firefox verschwindet der placeholder schon, sobald man das Feld fokussiert, bei Webkit erst, sobald man tippt.

Nur so zur Info...

 

[Daaron]

Im Hinblick auf Textbrowser, Brailleterminals, Screenreader,... sollte man definitiv immer Label verwenden. Man kann die Labels ja sogar zum eigenen Vorteil einsetzen. Klick auf ein Label, und der Cursor landet im entsprechenden Feld bzw. markiert die entsprechende Checkbox bzw. den Radiobutton

 

[Xetoxyc]

wie funktioniert den der "workaround" mit dem labels also wie muss das js dafür aussehen ?
Habt ihr hier evtl ein beispiel ?

 

[character]

Daaron meint einfach nur, dass du Labels verwenden sollst. Das ist kein Workaround. Das Klick-Feature, von dem er spricht, ist bei Labels automatisch dabei (ohne JS).

Mit for-Attribut:

<label for="x">Foo</label>
<input id="x" ...>

Oder verschachtelt:

<label>Foo <input ...></label>

Natürlich gibt es auch abgefahrene Lösungen mit JS bzgl. placeholder: http://www.csskarma.com/lab/plugin_slidinglabels/

 

[Daaron]

Nene, man kann mit purem CSS und ohne Verschachtelung (also: erst label, dann input) schon durchaus nette Pseudo-Placeholder erzeugen. Geh z.B. mal auf http://playport-dresden.de/ und scroll runter bis zur Newsletter-Anmeldung. Klick dann mal in die Textbox. Oder blend oben das kleine Suchfeld (Lupen-Icon) auf und klick da rein. Der Effekt funzt in jedem Browser, der CSS3-Transitions (also nicht im IE9) richtig. In IE9 und älter gibts keinen sanften Übergang sondern es schaltet einfach um.

 

[character]

Auch sehr nett.

 

[Daaron]

OT: wenn du mal was wirklich cooles sehen willst, dann scroll mal ganz runter und klick auf den google maps link...
Ist aber nicht zur Nachahmung empfohlen. Der Effekt kostet derb was an Ladezeit, weil man die Karte auch dann generieren muss, wenn sie eigentlich gar nicht gebraucht wird.