Form e transizioni CSS3, migliorare l'esperienza utente

In questo articolo vedremo come migliorare i nostri form utilizzando le transizioni del CSS3. Battere su questo tema è tanto più utile quanto più si pensa al numero di form che popolano il Web. Moduli per login, contatti, chat, bacheche, etc. sono indispensabili in un momento in cui i siti sono sempre più fornitori di servizi oltre che di contenuti.

Fondamentale diventa una buona usabilità, sempre più valorizzata da caratteristiche come semplicità e chiarezza nell'interazione, a questo aggiungiamo una giusta dose di aspetto grafico e otteniamo gli obiettivi da centrare durante la progettazione del form. Non ci resta che passare alla pratica.

La struttura HTML

Supponiamo di voler realizzare un form di registrazione ad un certo servizio dove inserire i dati, l'orario di arrivo, i servizi che vogliamo ed un breve messaggio.

Ecco i campi che comporranno il nostro form:

Campo	Descrizione
Nome	campo di input
Email	campo di input
Password	input testuale con caratteri nascosti
Scelta dei servizi	serie di checkbox
Orario di arrivo	serie di radiobox
Orario personalizzato	campo di input
Messaggio	textarea
Submit	bottone

Il codice HTML è il seguente:

<form action="" id="register">
  <div id="form">
    <h1>Registrati</h1>
    <label for="name">Nome</label>
    <input type="text" name="name" id="name" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" />
    <label for="messaggio">Messaggio</label>
    <textarea name="messaggio" id="messaggio" cols="30" rows="10"></textarea>
    <label>Servizi</label>
    <div class="fieldset">
        <input type="checkbox" name="" value="sport" /> Coffee break<br />
        <input type="checkbox" name="" value="sport" /> Pranzo<br />
        <input type="checkbox" name="" value="sport" /> Gadget<br />
        </div>
    <label>Orario preferito</label>
    <div class="fieldset">
        <input type="radio" name="orario" value="9" /> 09.00<br />
        <input type="radio" name="orario" value="10" /> 10.00<br />
        <input type="radio" name="orario" value="11" /> 11.00<br />
        <input type="radio" name="orario" value="other" /> Altro orario: <input type="text" name="orario_custom" disabled="disabled" />
    </div>
    <input type="submit" id="submit" value="Registra" />
  </div>
</form>

Stile del form

Diamo un pò di stile al nostro form utilizzando anche i nuovi selettori per attributi introdotti dal CSS3:

body {
    background-color: #000;
    color: #fff;
    font-family: Verdana, sans-serif;
    font-size: 14px;
}
#form {
    width: 600px;
    margin: 50px auto;
    background: #222;
    padding: 25px;
    overflow: hidden;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
.fieldset {
    float: left;
    width: 400px;
    margin: 10px 0 0;
    line-height: 20px;
}
h1 {
    font-size: 16px;
    color: #FCCC69;
    margin-bottom: 20px;
}
label, input, textarea {
    color: #dedede;
    float: left;
    font-family: Verdana, sans-serif;
    margin: 10px 0;
}
label {
    display: block;
    line-height: 30px;
    width: 150px;
}
input, textarea {
    background: #1C1C1C;
    border: 1px solid #323232;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 300px;
    padding: 0 10px;
}
input { padding-left: 30px; }
textarea {
    background: #1C1C1C url('images/social_balloon.png') no-repeat 235px 95px;
    font-size: 12px;
    height: 200px;
    width: 320px;
    overflow: hidden;
}
input[name=name]     { background: #1C1C1C url('images/user_red.png') no-repeat 7px; }
input[name=email]    { background: #1C1C1C url('images/email.png') no-repeat 7px; }
input[name=password] { background: #1C1C1C url('images/key.png') no-repeat 7px; }
input[type=checkbox],input[type=radio] {
    width: 30px;
    float: none;
    margin: 0;
    padding: 0;
    line-height: 12px;
    vertical-align: middle;
}
input[name=orario_custom] {
    width: 120px;
    float: none
}
input[type=submit] {
    background: url('images/submit.png') no-repeat center;
    border: none;
    color: #fff;
    font-weight: bold;
    padding: 0;
    height: 30px;
    width: 80px;
    clear: both;
}

Ecco il risultato ottenuto finora.

Applicare le transizioni CSS3 al form

Per migliorare l'esperienza utente possiamo aggiungere qualche effetto di movimento sui campi, lavorando con le transizioni CSS. Prima di procedere rivediamo brevemente la sintassi che è possibile approfondire sulla Guida CSS3.

La notazione che utilizzeremo in questo esempio è quella abbreviata; in pratica anzichè utilizzare separatamente le proprietà:

• transition-property
• transition-duration
• transition-delay

utilizzeremo la proprietà transition passandogli i tre valori nella medesima riga come nell'esempio seguente:

#elemento { transition: width 1s ease }

Transizione per i campi di input e textarea

Il primo effetto che andiamo a realizzare consiste nell'aumentare la larghezza e l'altezza del campo di input (o della textarea) quando si clicca al loro interno. Per fare ciò abbiamo bisogno di modificare i valori del width e dell'height dei campi di input e della textarea al verificarsi dell'evento focus.

Il codice che utilizziamo è il seguente:

input, textarea {
    -webkit-transition: width 1s ease, height 1s ease;
    -moz-transition: width 1s ease, height 1s ease;
    -o-transition: width 1s ease, height 1s ease;
    -ms-transition: width 1s ease, height 1s ease;
    transition: width 1s ease, height 1s ease;
}
input[type=text]:focus,
input[type=password]:focus { width: 390px; height: 50px; }
textarea:focus { width: 390px; height: 330px; }

Nella prima regola impostiamo la transizioni sulle due proprietà (width ed height) impostandone l'effetto e la durata della transizione. La seconda e la terza regolano impostano i nuovi valori al verificarsi dell'evento focus.

Transizione per checkbox e radiobox

A questo punto possiamo occuparci delle checkbox e degli input di tipo radio. In questo caso vogliamo che gli elementi selezionati si spostino leggermente verso destra in maniera da essere visibili più facilmente rispetto a quelli deselezionati. Stavolta non serve dichiarare la prima regola in cui determiniamo la transizione in quanto eredita quella precedente in cui è già stata settata la proprietà width. Andiamo quindi a modificare il valore del width nel momento in cui la checkbox o la radiobox assume valore checked.

input[type=checkbox]:checked,
input[type=radio]:checked { width: 50px; }

Transizione per abilitare il campo di input

Nell'ultimo campo di tipo radio abbiamo un input disabilitato di default che dobbiamo abilitare solo quando il campo radio viene selezionato. Per fare ciò abbiamo bisogno di alcune righe di codice Javascript. Per comodità ho utilizzato jQuery ma lo stesso effetto può essere realizzato con Javascript puro o un altro framework.

$(function(){
  $('#form :radio').click(function(){
    if( $(this).val() == 'other' ) {
      $('input[name=orario_custom]').removeAttr('disabled');
    } else {
      $('input[name=orario_custom]').attr('disabled', 'disabled');
    }
  });
});

A questo punto vogliamo che il background del campo di input sia leggermente più chiaro quando esso è disabilitato per poi tornare al colore originario quando diviene attivo. Per realizzare l'effetto non è necessario utilizzare del codice Javascript ma, anche in questo caso, è sufficiente utilizzare le transizioni.

input[name="orario_custom"] {
    -webkit-transition: background 1s ease;
    -moz-transition: background 1s ease;
    -o-transition: background 1s ease;
    -ms-transition: background 1s ease;
    transition: background 1s ease;
    width: 120px;
    height: 30px;
}
input:disabled { background: #3f3f3f; }

Con il selettore input[name="orario_custom"] andiamo a raggiungere il campo di input per l'orario personalizzato ed impostiamo una transizione sul background. La seconda regola invece va a modificare il background del campo di input quando esso è disabilitato. In questa maniera quando lo stato del campo cambia, si avrà una piccola animazione che trasformerà il background del campo.

Possiamo vedere l'esempio completo al seguente indirizzo:

Demo

Conclusioni

Abbiamo visto come migliorare l'esperienza utente nei form con pochissime righe di codice, sfruttando selettori e tecniche CSS3. Per approfondire questi argomenti ecco alcuni link:

• Guida CSS3
• Applicare stili ai form
• Moduli con stile: usare i CSS con i form
• Codice più pulito con i CSS3
• Form con i CSS
• Form grafico con i CSS