Effetto testo su campo testo

Ciao a tutti, sapete dirmi come posso realizzare questo effetto su un campo testo.
https://login.live.com/login.srf?wa=...cxt=mai&snsc=1

se premi ctrl + U riesci a prendere un spunto

[karl94]

In modo semplice e veloce puoi usare l'attributo placeholder definito nelle bozze di HTML5.
Tabella di compatibilità: http://caniuse.com/#feat=input-placeholder

Io dicevo una cosa del genere http://css-plus.com/wp-content/uploa...laceholder.jpg

[karl94]

Hai provato a seguire il mio consiglio?

se premi ctrl + U riesci a prendere un spunto

Che simpatìa...

---------------------------------

karl94 ti ha dato in effetti tutte le informazioni. Nel campo testo inserisci l'attributo placeholder con valore il testo che desideri venga visualizzato.

Esempio: in un form dove ti trovi la mail da inserire, c'è la classica porzione di codice

<input type="text" name="email" />

Ti basterà inserire l'attributo così:

<input type="text" name="email" placeholder="mail@example.com" />

In maniera decisamente più complessa, ma altrettanto funzionale visto che non tutti i browser accettano di buon grado l'attributo placeholder, la cosa si può fare in javascript così:

<input type="text" name="email" value="mail@example.com" onfocus="if (this.value == 'mail@example.com') {this.value = '';}" onblur="if (this.value == '') {this.value = 'mail@example.com';}" />

Spero ora sia più chiaro...

Io dicevo una cosa del genere http://css-plus.com/wp-content/uploa...laceholder.jpg

Se oltre a guardare l'immagine leggi pure l'articolo da dove è tratta, si parla proprio di come fare ciò.

@simpleticket:
Lo letto ma non ho capito come faccia uso di un etichetta posizionandola in modo assoluto che quando l'utente faccia in focus cambia di colore e quando l'utente scrive l'etichetta scompare...
Mi potresti dare una mano...

Scusa il ritardo.

Non ho letto bene l'articolo. Vedo di approfondire e ti dico.

Ok, non ti preoccupare... ;)

Ciao

ho dato un'occhiata veloce allo script e l'autore usa combinatamente sia il placeholder che le label.
Questo perchè, a suo dire, usare solo placeholder ha l'inconveniente che una volta avuto il fuoco sul campo, non essendo più mostrato, si perde la cognizione di quale sia il campo da compilare.
Ecco che allora usa il label, osizionato in manera assoluta (rispetto a) dietro l'input.
Solo quando il campo avrà il focus, si abbassa la trasparenza (la quarta cifra, .8) e così appare, con un'effetto come smorzato, la label dando l'impressione che il placeholder si sia spostatoa destra.