Eliminare il valore di un campo form con javascript

Possiamo trovare, per esempio, in un campo email, la scritta:
"Scrivi la tua email" e non appena inseriamo il puntatore del mouse per scrivere, il valore predefinito "scompare". È un modo, per guidare l'utente, molto utile ma vediamo come fare se volessimo inserire questo effetto simpatico nel nostro sito.

Premetto che ho preparato un file in cui sono presenti 2 campi: uno per il nome e l' altro per l'indirizzo email. Ho voluto rendere, lo spero, un pò più simpatica la cosa, facendo in modo che, oltre ad eliminare la scritta, il campo di testo assuma un colore diverso da quello di default, cioè bianco. Innanzitutto vediamo l' esempio finale e poi diamo uno sguardo al codice.

 
.label{
font-family:Verdana, sans-serif;
font-size:12px;
color:#369;
font-weight:bold;
}

Per prima cosa ho creato una "classe" denominata .label; questo testo non è altro che l' etichetta davanti al campo di testo. Nulla di difficile fin qui. Adesso passiamo a costruire il nostro form, in questo modo:

<form name="form1" id="form1">
<span class="label">Scrivi il tuo nome:</span>
<input name="nome" type="text" id="nome" onfocus="document.getElementById('nome').style.backgroundColor='#e4e4e4'; this.value=' '; return false;" value="Scrivi il tuo nome" size="40" />

<span class"label">Scrivi la tua email:</span>
<input name="email" type="text" id="email"
onfocus="document.getElementById('email').style.backgroundColor='#cfe7e7'; this.value=' '; return false;" value="Scrivi la tua email" size="40" />

<input type="button" value="Invia" />
</form>

Questo è tutto il codice che serve per avere quanto visto nel file.
<span class="label">Scrivi la tua email:</span> altro non è che l'applicazione della nostra classe .label al testo che precede il campo di testo;
adesso vediamo il codice da inserire nel campo di testo:
input name="email" type="text" id="email" nome della casella di testo (name=email), tipo (type=text), riferimento univoco all' oggetto, con lo stesso nome del campo di testo (id=email).
onfocus="document.getElementById('email').style.backgroundColor='#cfe7e7'; this.value=' '; return false;"
questo è il codice DOM del W3C il quale permette di accedere a qualsiasi elemento (nodo) presente nella pagina ed indica che, nel momento in cui si passa il "fuoco" all' elemento (si inserisce il puntatore del mouse) il suo colore di sfondo diventerà celeste (style.backgroundColor='#cfe7e7') ed il suo value (il testo predefinito) non sarà più presente (this.value=' '), lo spazio vuoto tra i 2 apici.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati