Interazione con i campi di un form con CSS

Creiamo una nuova pagina HTML e inseriamo un

per contenere alcuni campi all’interno di un <div>, poi utilizzeremo nel foglio di stile la pseudo-classe :focus, presente nelle specifiche CSS 2.1, per determinare la resa visiva nel momento in cui il campo viene selezionato:

<!-- inserire nell'HTML -->
<form>
  <div id="contenitore">
    <h5>Semplice esempio di blocco. </h5>
    <label for="nome">Esempio di Text Box: </label><br />
    <input type="text" name="nome" id="nome" /> <br />
    <label for="messaggio">Esempio di Text AREA : </label> <br />
    <textarea id="messaggio" name="messaggio" rows="5" cols="30"></textarea>
  </div>
</form>

L’identificativo del contenitore si rende utile se si vuole l’effetto grafico su un particolare form anziché gli eventuali altri form presenti nella pagina come in questo caso; se anteponiamo l’ID al selettore specificheremo solo questo.

/* inserire nel CSS */
#contenitore label {width: 175px;}
#contenitore textarea, #contenitore input {
   background:#e0eee0; 
   color:#666; 
   border:1px solid #999;
   width: 175px;
}
#contenitore input:focus, #contenitore textarea:focus {
   border:1px solid #3C3; 
   background:#D9FFFF;
}

Semplice esempio di blocco.

Esempio di Text Box:

Esempio di Text AREA :

Con le pseudo-classi :enabled e :disabled invece si può , come accennato prima, gestire il comportamento degli elementi abilitati al riempimento o meno. L’esempio non funzionerà su IE8 e precedenti.

Come esempio, poniamo il caso di avere un form con due campi textarea, uno per l’invio del messaggio ed un’altro che contiene il testo della policy. Per differenziarli utilizzeremo le pseudo-classi invece di attribuire ad esse due classi distinte:

Nel foglio di stile possiamo tenere le regole di prima e aggiungere una nuova.

Semplice esempio di blocco.

Esempio di Text AREA :

Esempio di Text AREA :
<br /> Testo Privacy …<br />

La resa grafica dell’interazione fra l’utente di un sito ed un form è stata quasi sempre ad appannaggio dello Javascript, grazie alla sua capacità di alterare in tempo reale le proprietà di un elemento. Un modo semplice, per chi non ha tanta dimestichezza nell’uso dei selettori con questo linguaggio, possiamo implementare, con poche righe di codice, questo evento con jQuery per abilitare o meno un campo a seconda delle nostre esigenze e, di conseguenza, modificarne l’apparenza.
Se prendiamo il primo esempio e inseriamo una casella di accettazione della privacy, potremmo abilitare un campo tutti i campi input (come nel seguente esempio live) solo se la casella venisse spuntata[vedere il tab HTML], aggiungeremo anche il pulsante per l’invio di dati.
Il foglio di stile rimane come quello di sopra, cambiando solo il nome dell’ID [vedere il tab CSS].
Invece, per quanto riguarda il codice javascript creeremo una funzione chiamandola toggleStatus che si occuperà di controllare se la casella è stata spuntata per abilitare i nostri campi. Questa funzione s’invocherà la prima volta quando il DOM è caricato attraverso la funzione $(document).ready(function() {}); e successivamente quando cambia lo stato della casella per l’intervento dell’utente.
”Live”Per

Se non c’è quest’ultima essigenza, che con jQuery ci assicura il suo funzionamento con tutti i tipi di browser, e vogliamo solo evidenziare i campi quando sono selezionati e cambiare il suo aspetto a seconda se sono abilitati o meno ci basta inserire nel file CSS le tre regole dell’ultimo codice.