Evidenziare label di un form con javascript

Nel file di esempio possiamo vedere un "mini-form", formato da soli 3 campi ed un pulsante di invio dati. Per puro scopo didattico, alla pagina non è stato assegnato nessuna action. Per vedere in azione la label, è sufficente mettere il cursore del mouse all'interno di una textbox.

Avete visto che quando si inserisce il puntatore del mouse in un campo di testo per scrivere, contemporaneamente cambia colore l'etichetta associata a "quel" campo. Non credo che un utente avesse bisogno di "capire" in quale campo di testo stesse scrivendo, ma con questo piccolo script diamo l' impressione al visitatore che lo si "guida" nelle operazioni da compiere. Fatta questa premessa, passiamo a vedere dove, eventualmente, cambiare il codice per avere colori diversi per le etichette.

Innanzitutto ricordo sempre che per non appesantire la pagina .html è buona norma richiamare i file di script, .js in questo caso, dall' esterno; o inserendoli in una cartella apposita (meglio) oppure tenerli allo stesso livello di tutti gli altri file.

Il codice JavaScript

Poniamo il caso si voglia scrivere il codice Javascript nella header della pagina; la sintassi è la seguente:

 
function seleziona(id) 
{
if (!document.getElementById) return;
selDiv = document.getElementById(id);
selDiv.style.color = "#FF8000";
}

Per i più esperti non ci dovrebbero essere eccessivi problemi. Innanzitutto si inizializza una funzione - function - che ho chiamato - seleziona(id) -

Per prima cosa viene effettuato un controllo se il DOM (Document Object Model) è supportato o meno dal browser; in caso affermativo si continua; diversamente si ferma il processo.

Viene istanziata la variabile che assolve il compito di evidenziare la label; essa si chiama selDiv; è contraddistinta in maniera univoca nella pagina, attraverso un ID. Quando tale variabile è invocata, il colore del testo che si trova al suo interno diventerà del colore assegnato: #ff8000. Allo stesso modo, viene anche creata l'azione inversa: quando il campo di testo perde il focus, il testo diventerà di un altro colore.

Per completezza, riporto parte del codice html per mostrare come deve essere scritto:

<div class="testo" id="n">Nome:</div>

viene scritto prima del campo di testo; accanto scriveremo:

<input name="nome" type="text" id="nome" onfocus="seleziona('n')" onblur="deseleziona('n')" />

Nel codice appena scritto è possibile vedere il richiamo all'ID affinchè esso possa essere messo in evidenza.

La porzione di codice JavaScript che attiva l' etichetta del campo di testo è la seguente:

onfocus="seleziona('n')"

la parte, invece, che la disattiva è la seguente:

onblur="deseleziona('n')"

Cambiare il colore di testo dell'etichetta diventa molto molto semplice. Per fare riferimento allo script in azione, visualizzare la pagina di esempio in vista codice.

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