Applicare stili a campi di input e textarea

29 marzo 2011

Una delle peculiarità di un form efficace dovrebbe essere la sua semplicità, una semplcità che dovrebbe facilitare la compilazione da parte degli utenti.

In questa lezione vedremo come sia possibile modificare l’aspetto dei campi di input e delle textarea al fine rendere i moduli più gradevoli e, allo stesso tempo, chiari agli occhi dell’utente.

Personalizzare un campo di input o una textarea

Le possibili combinazioni di stile che possiamo assegnare ai campi di input e alle textarea sono infinite. Possiamo ad esempio modificare dimensione e colore del bordo, i margini e il padding, lo sfondo, il tipo e la dimensione dei font, etc.

Ora realizzeremo un semplice form di contatto contenente due campi di tipo input e una textarea. Possiamo vedere il risultato finale che otterremo nella immagine in figura 1:

Figura 1 – Risultato finale

Risultato finale

Il codice HTML

Il codice HTML che utilizzeremo per il nostro form di contatto è molto semplice:

<form action="#">
  <div id="form">
    <h1>Compila il form sottostante per inviarmi un messaggio</h1>
    <label for="nome">Cognome Nome</label><input type="text" name="nome" id="nome" />
    <label for="email">Email</label><input type="text" name="email" id="email" />

    <label for="messaggio">Messaggio</label>
    <textarea name="messaggio" id="messaggio" cols="30" rows="10"></textarea>

    <input type="submit" id="submit" name="submit" value="Invia" />
  </div>
</form>

Il codice CSS

Per prima cosa diamo dello stile alla pagina e al div che conterrà gli elementi del form. Per fare ciò utilizziamo il seguente codice:

body {
    background-color: #000;
    color: #fff;
    font-family: Verdana, sans-serif;
    font-size: 14px;
}

#form {
    width: 500px;
    margin: 50px auto;
    background: #222;
    padding: 25px;
    overflow: hidden;

    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

h1 {
    font-size: 16px;
    color: #FCCC69;
    margin-bottom: 20px;
}

A questo punto possiamo procedere con il codice CSS per gli elementi del form:

label, input, textarea { /* Stili comuni agli elementi del form */
    color: #dedede; /* Colore del testo */
    float: left; /* Float a sinistra */
    font-family: Verdana, sans-serif; /* Tipo di carattere per il testo */
    margin: 10px 0; /* Margini */
}
label { /* Stili per la label */
    display: block; /* Impostiamo la label come elemento blocco */
    line-height: 30px; /* Altezza di riga */
    width: 150px; /* Larghezza */
}

input, textarea { /* Stili per il campo di testo e per la textarea */
    background: #1C1C1C; /* Colore di sfondo */
    border: 1px solid #323232; /* Bordo */
    color: #fff; /* Colore del testo */
    height: 30px; /* Altezza */
    line-height: 30px; /* Altezza di riga */
    width: 300px; /* Larghezza */
    padding: 0 10px; /* Padding */
}

input { padding-left: 30px;

textarea { /* Stili specifici per la teaxtarea */
    background: #1C1C1C url('images/social_balloon.png') no-repeat 235px 95px; /* Sfondo con immagine */
    font-size: 12px;
    height: 200px;
    width: 320px;
    overflow: hidden; /* disabilitare la scrollbar in IE */
}

Nel codice appena visto, per prima cosa abbiamo assegnato uno stile generico a tutti gli elementi; colore, float a sinistra, font e margine. Successivamente abbiamo impostato la label come elemento di tipo block e non più inline, e abbiamo impostato dimensioni, colore del testo e colore di sfondo degli input e della textarea.

Nell’ultima regola abbiamo assegnato un fumetto di background alla textarea e nascosto l’overflow per nascondere la barra di scorrimento verticale di Internet Explorer.

L’ultima operazione che andremo ad eseguire sarà quella di assegnare un’icona di background ai due campi di tipo input e a ridurre la dimensione del pulsante di submit:

#nome  { background: #1C1C1C url('images/user_red.png') no-repeat 7px; }
#email { background: #1C1C1C url('images/email.png') no-repeat 7px; }
#submit {
	padding: 0;
    width: 100px;
}

Il risultato finale è visibile nell’esempio.

Tutte le lezioni

1 ... 36 37 38 ... 49

Se vuoi aggiornamenti su Applicare stili a campi di input e textarea inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Applicare stili a campi di input e textarea

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