La resa grafica dell'interazione fra l'utente di un sito ed un form è stata quasi sempre appannaggio di Javascript, grazie alla sua capacità di alterare in tempo reale (essendo un linguaggio di scripting lato client) le proprietà di un elemento. Grazie al quasi completo supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, in aggiunta al miglioramento sul supporto dei CSS3 Selectors, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera più sicura e leggera.

Nell'esempio a seguire vedremo come evidenziare il campo di testo selezionato dall'utente, in modo da aiutarlo a non perdere di vista il punto di lettura della pagina, e vedremo come diversificare lo stile di due textarea senza ricorrere alle classi (risparmiando in termini di peso della pagina e mantenendo più pulito il codice).

Inseriamo un campo di testo (ma l'esempio funziona con qualsiasi altro campo), dopodichè utilizzeremo 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 --><br />    <input type="text" name="nome" id="nome" />

<!-- inserire nel CSS --><br />    input:focus {border:1px solid #3C3; background:#99FF99;}


Con le nuove pseudo-classi :enabled e :disabled invece possiamo gestire il comportamento di elementi che sono, come dice il termine stesso, abilitati al riempimento o meno. L'esempio non funzionerà su IE8 e precedenti.

Poniamo il caso di avere nel form 2 campi textarea, uno per l'invio del messaggio ed uno che contiene il testo della policy: per differenziarli utilizzeremo le nuove pseudo-classi invece di attribuire ad esse 2 distinte classi:

<!-- inserire nell'HTML --><br />    <label for="messaggio">Lascia un messaggio</label><br />    <textarea id="messaggio" name="messaggio" rows="5" cols="30"></textarea><br />    <label for="policy">Privacy policy</label><br />    <textarea id="policy" name="policy" rows="5" cols="30" disabled="disabled">Testo della privacy.....</textarea>

<!-- inserire nel CSS --><br />    textarea:enabled {border:1px solid red;}<br />    textarea:disabled, input:disabled {background:#D9FFFF; color:#666; border:1px solid #999;}




Tramite un controllo javascript possiamo infine abilitare o meno un campo a seconda delle nostre esigenze e, di conseguenza, modificarne l'apparenza. Se inserissimo una casella di accettazione della privacy, potremmo abilitare il campo "Lascia un messaggio" solo se la casella venisse spuntata:

<!-- inserire nell'HTML --><br />    <label for="commento">Accetta la clausola sulla privacy e commenta</label><br />    <textarea id="commento" name="commento" rows="5" cols="30" disabled="disabled"></textarea><br />    <input type="checkbox" id="controllo" onclick="document.getElementById('commento').removeAttribute('disabled');" />Accetta la privacy policy



Accetta la privacy policy