Form - label all'interno dei campi

[bANART]

Ciao a tutti.

Sapete dirmi come si può fare un form di login in stile bwin? (quello che c'è in alto a destra)

www.bwin.it

Le label "username" e "password" sono già inserite nei campi, appena si clicca all'interno le label spariscono e si può scrivere. Se non si scrive niente ricompaiono le label.
Inoltre nel campo password c'è proprio la parola "password" ma quando si va a scrivere escono i classici puntini/asterischi come è giusto che sia.

Io ho trovato questo su HTML.it e va bene in parte.
Funziona perfettamente per l'username ma non mi accetta il campo type="password".
Inoltre vorrei una cosa come bwin, scritta password come label e quando si va a scrivere dentro escano i pintini/asterischi.

Secondo voi come si può fare?

Grazie 1000!!

[Luca450Mhz]

A fare si può fare, dato che sul sito bwin è proprio così!
Hai provato a vedere il codice di bwin per cercare di capire come realizzano l'effetto?

[br1]

Si puo' fare con una semplice immagine di sfondo con la scritta opportuna...

<input type=password"
onfocus="this.style.backgroundImage='';"
onblur="this.style.backgroundImage=(this.value)?'' :'url(pw.gif)';"
style="background-image=url(pw.gif);">

ciao

[Luca450Mhz]

In effetti se ci fai caso sul sito bwin quello della password non è un campo password, bensi text.. quando tu clicchi sparisce il campo text e rimane il campo password.. un congegno "malefico"

Ciao

[bANART]

Innanzitutto grazie mille per le celeri risposte.

BR1, ho provato come mi dici tu ma non va!

Ho inserito una gif nella cartella images (l'ho chiamata proprio pw.gif) e ho scritto questo codice nell'html:

<input class="inputID" type="password" onfocus="this.style.backgroundImage='';" onblur="this.style.backgroundImage=(this.value)?'' :'url(images/pw.gif)';" style="background-image=url(images/pw.gif);">


...ma non va...

dove sbaglio?

[bANART]

(precisazione, controllando meglio)

Non è che proprio non va....

è che appena apro la pagina non appare il background, se clicco all'interno del campo input (password) mi fa inserire la password sotto forma di puntini, quando esco APPARE IL BACKGROUND!!! (magiiiiaaa!!!!!)

Come posso fare a far apparire il background da subito?

graziegrazie!

[Luca450Mhz]

Quello che ti ha scritto era un suggerimento, anche perchè una volta che digiti qualcosa quell'immagino di sottofondo non deve essere più visualizzata..
Comunque per far caricare l'immagine da subito nel body onLoad imposti la proprietà dell'immagine.

Ciao

[br1]

Ho copia-incollato il tuo codice in una nuova pagina e funziona... :master: controlla piuttosto che nella classe CSS che usi non ci sia qualche conflitto....

[bANART]

Luca450Mhz io ti ringrazio per il tuo suggerimento ma se ho chiesto aiuto in questo thread è perchè non SO come si fa, inoltre se mi dai un'informazione generica come "imposta la proprietà opportuna con onload nel body" è come se ti dicessi che per fare un buon ragù nel sugo oltre alla carne devi mettere 'del cibo'!! ...in questo modo questa discussione oltre a non essere d'aiuto a me non è d'aiuto neanche a chi la leggerà in seguito e si va a perdere la funzione di un forumo tecnico come questo.

Non fraintendermi, non è ne un attacco ne una polemica, vorrei solo sapere 'cosa devo impostare nell'onload nel body?

Grazie mille per il tuo aiuto.

[bANART]

niente... ho riprovato ma niente... questa è la classe nel CSS:

.inputID{
background: #333333;
color: #ffffff;
font-size: 80%;
padding: 0 0 2px 5px;
width: 100px;
height: 13px;
border: 1px solid #999999;
}


ho provato anche a togliere il background ma niente...
ho provato a incollare il form in una pagina vuota e niente lo stesso...
non capisco