Form e transizioni CSS3, migliorare l’esperienza utente

17 ottobre 2011

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.

Figura 1. Il nostro form
(clic per ingrandire)

Il nostro form

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:

CampoDescrizione
Nomecampo di input
Emailcampo di input
Passwordinput testuale con caratteri nascosti
Scelta dei serviziserie di checkbox
Orario di arrivoserie di radiobox
Orario personalizzatocampo di input
Messaggiotextarea
Submitbottone

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.

Se vuoi aggiornamenti su Form e transizioni CSS3, migliorare l'esperienza utente inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Form e transizioni CSS3, migliorare l'esperienza utente

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing