I form HTML sono uno strumento fondamentale per raccogliere informazioni sugli utenti o gestire funzionalità avanzate di una web app sofisticata. Grazie al codice CSS possiamo personalizzare lo stile dei nostri form dandogli un aspetto professionale e graficamente accattivante.
Indice
Come Gestire lo Stile di un Form
Quando creiamo da zero un form contatti, lo stile di quest’ultimo viene gestito direttamente dal browser che stiamo utilizzando.
Vediamo subito un esempio. Creiamo una pagina html vuota e inserieamo un campo input text, un campo select e un campo input checkbox.
<form action="" method="post">
<!-- Creo il campo text -->
<label for="test">test text</label>
<input type="text" name="test-text">
<!-- Creo il campo select -->
<label for="test-select">test select</label>
<select name="test-select">
<option value="option-1">option 1</option>
<option value="option-2">option 2</option>
</select>
<!-- Creo il campo checkbox -->
<input type="checkbox" name="checkbox-test" value="test">
<label for="checkbox-test">Test Checkbox</label>
</form>il risultato su Browser Chrome è il seguente:
il risultato su Browser Firefox:
il risultato su Browser Edge:
Come vedi lo stile, oltre ad essere inguardabile, è diverso per ognuno dei 3 browser analizzati, e sarà diverso anche per gli altri: Safari, Opera, ecc.
Personalizzare lo Stile di un Form
I campi di un form sono elementi HTML e come tali possiamo dargli delle regole di stile con i CSS. Esistono diversi selettori CSS che possono essere utilizzati per lavorare con i form HTML, come i selettori di tag, gli ID, le classi, i selettori di attributo e le pseudo-classi. Utilizzando questi selettori si possono creare dei form molto accattivanti dal punto di vista grafico.
A titolo di esempio prendiamo un form di registrazione con i campi nome, sesso, email, password, una checkbox per il consenso della privacy e il pulsante per l’invio dei dati.
<form action="form.html" method="post">
<!-- Nome -->
<label for="test">Nome</label>
<input type="text" name="nome">
<!-- Select sesso -->
<label for="sesso">Sesso</label>
<select name="sesso">
<option value="maschile">M</option>
<option value="femminile">F</option>
</select>
<!-- Email -->
<label for="email">Email</label>
<input type="email" name="email">
<!-- Password -->
<label for="password">Password</label>
<input type="password" name="password">
<!-- Checkbox -->
<input type="checkbox" name="consenso" value="consenso">
<label for="consenso">Acconsento al trattamento dei dati personali</label>
<!-- Pulsante Submit del form -->
<input type="submit" value="Registrati">
</form>Senza nessuna regola CSS il risultato sarà una cosa del genere:
Sicuramente non è il massimo dal punto di vista grafico…vediamo insieme come dare un po’ di stile.
Usare gli ID e le Classi CSS
Per prima cosa possiamo assegnare ID e classi agli elementi HTML in modo tale da poterli selezionare facilmente quando andiamo a scrivere il codice CSS.
Assegnamo l’id form-group al form, in modo tale da avere un riferimento a quello specifico form e non andare ad influenzare altri form. Inoltre ci sarà utile per assegnare le proprietà generali come ad esempio i font e le proprietà del contenitore come padding, margin, ecc.
#form-group{
font-family: 'Montserrat', sans-serif;
padding: 20px;
background-color: #dbdbdb;
}Per ottimizzare il codice possiamo assegnare la classe form-field agli elementi che avranno un aspetto standard, ad esempio i campi Nome, Sesso, Email e Password.
#form-group .form-field{
/* facciamo occupare l'intera riga al campo */
display: block;
width: 100%;
/* modifichiamo l'aspetto */
background-color: transparent;
color: black;
border: none;
border-bottom: 2px solid black;
padding: 10px 5px;
margin-bottom: 20px;
}Usare i selettori di Tag
Gli elementi label non avranno bisogno di id o classi perchè potremo stilizzarli richiamando direttamente il tag label.
#form-group label{
/* testo più piccolo e in grassetto */
font-size: 12px;
font-weight: bold;
}Usare i selettori di Attributo
I selettori di attributo consentono di selezionare gli elementi HTML in base agli attributi e ai loro valori.
In questo esempio andremo a stilizzare il pulsante “Registrati” selezionando l’input che ha l’attributo type di tipo submit.
#form-group input[type="submit"]{
/* modifichiamo l'aspetto */
background-color: black;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 40px;
display:block;
/* modifichiamo il cursore del mouse */
cursor: pointer;
}Inoltre potremo gestire lo stile del campo checkbox e il relativo label.
#form-group input[type="checkbox"]{
/* ingrandiamo il campo */
width: 18px;
height: 18px;
/* stacchiamo il campo dagli altri input */
margin-top: 30px;
}
#form-group label[for="consenso"]{
/* ingrandiamo il testo */
font-size: 18px;
}Usare le pseudo classi
Le pseudo classi consentono di selezionare gli elementi HTML in base allo stato o alla posizione dell’elemento.
Alcune pseudo classi comuni per i form sono:
:focus– seleziona l’elemento che ha il focus (ovvero quando un utente clicca su un campo di input o su un pulsante).:hover– seleziona l’elemento quando l’utente passa sopra con il mouse.:active– seleziona l’elemento quando l’utente clicca su di esso.:disabled– seleziona l’elemento disabilitato.:checked– seleziona l’elemento del form (ad esempio una checkbox o un’opzione di un select) che è stato selezionato.
Nel nostro caso utilizzeremo la pseudo classe :focus per selezionare l’elemento che stiamo modificando in quel momento.
#form-group .form-field:focus{
/* rimuovo il bordo blu di default */
outline: none;
/* modifico l'aspetto */
border-bottom: 3px solid #07adc4;
}Risultato finale
Il codice html sarà:
<form action="form.html" method="post" id="form-group">
<!-- Nome -->
<label for="test">Nome</label>
<input class="form-field" type="text" name="nome">
<!-- Select sesso -->
<label for="sesso">Sesso</label>
<select class="form-field" name="sesso">
<option value="maschile">M</option>
<option value="femminile">F</option>
</select>
<!-- Email -->
<label for="email">Email</label>
<input class="form-field" type="email" name="email">
<!-- Password -->
<label for="password">Password</label>
<input class="form-field" type="password" name="password">
<!-- Checkbox -->
<input type="checkbox" name="consenso" value="consenso">
<label for="consenso">Acconsento al trattamento dei dati personali</label>
<!-- Pulsante Submit del form -->
<input type="submit" value="Registrati">
</form>Mentre il codice css:
#form-group{
font-family: 'Montserrat', sans-serif;
padding: 20px;
background-color: #dbdbdb;
}
#form-group .form-field{
/* facciamo occupare l'intera riga al campo */
display: block;
width: 100%;
/* modifichiamo l'aspetto */
background-color: transparent;
color: black;
border: none;
border-bottom: 2px solid black;
padding: 10px 5px;
margin-bottom: 20px;
}
#form-group label{
/* testo più piccolo e in grassetto */
font-size: 12px;
font-weight: bold;
}
#form-group input[type="submit"]{
/* modifichiamo l'aspetto */
background-color: black;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 40px;
display:block;
/* modifichiamo il cursore del mouse */
cursor: pointer;
}
#form-group input[type="checkbox"]{
/* ingrandiamo il campo */
width: 18px;
height: 18px;
/* stacchiamo il campo dagli altri input */
margin-top: 30px;
}
#form-group label[for="consenso"]{
/* ingrandiamo il testo */
font-size: 18px;
}
#form-group .form-field:focus{
/* rimuovo il bordo blu di default */
outline: none;
/* modifico l'aspetto */
border-bottom: 3px solid #07adc4;
}…e il risultato finale:
Conslusioni
Il risultato è di tutt’altro livello se lo confrontiamo con il precedente, non trovi? Ovviamente le possibilità offerte dal codice CSS sono infinite.
Ora dipende solo dalla tua creatività!
Se vuoi approfondire l’argomento ti invito a visitare questi link:
Lascia un commento