Partiamo con il pulsante di invio. Attualmente lo stato CSS dovrebbe apparire come segue:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}Questa sintassi porta al seguente risultato:
Si tratta di un normale pulsante. Attualmente non ha uno stile particolarmente accattivante, ma svolge comunque la sua funzione. Tuttavia, vogliamo renderlo un po' più interessante. Il risultato finale sarà il seguente:
Inoltre, verrà aggiunto un effetto Hover. Pertanto, il pulsante cambierà colore quando ci si posiziona sopra con il cursore.
Analizzando il pulsante più attentamente, noterete gli angoli arrotondati. Questa è sicuramente una delle innovazioni CSS che i web designer aspettavano da tempo. Infatti, "in passato" non era possibile farlo. (L'eccezione, naturalmente, erano gli elementi button, in cui si poteva lavorare con le immagini.)
Ora è possibile applicare gli angoli arrotondati non solo agli elementi di una normale pagina, ma anche ai pulsanti.
Nel bozzetto di lavoro CSS3, c'è la proprietà border-radius. I browser Mozilla e WebKit offrono alternative sintassi per un supporto sperimentale di questa proprietà.
• -moz-border-radius
• -webkit-border-radius
Attualmente, tutti i moderni browser supportano gli angoli arrotondati.
Sulla base di queste informazioni, una definizione di border-radius potrebbe apparire come segue:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Tuttavia, analizzando più attentamente, noterete che al pulsante è stato assegnato un gradiente di colore.
Anche questo ora può essere realizzato utilizzando gli strumenti CSS. Si utilizzano le varie proprietà di gradient, assegnandole come valore alla proprietà background. Attualmente esistono numerosi strumenti che consentono di generare gradienti di colore.
Uno di questi si trova, ad esempio, sulla pagina http://www.css3factory.com/linear-gradients/. Nella seguente sintassi sono stati definiti un gradiente di colore e gli angoli arrotondati noti.
Nell'esempio attuale, la sintassi per il pulsante appare come segue:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
Come accennato in precedenza, i pulsanti devono reagire al passaggio del cursore sopra di essi. Per questo si utilizza il noto :hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Anche il pulsante reagirà a un altro evento. In questo caso, si utilizza la pseudo-classe :active. Con questa si può reagire al click sul pulsante.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
Nell'esempio attuale, cliccando sul pulsante si cambierà il colore del bordo superiore e il colore di sfondo del pulsante.
Angoli arrotondati per i campi di input
È possibile applicare gli angoli arrotondati non solo ai pulsanti, ma anche ai campi di input. Il risultato potrebbe apparire come segue:
Ecco la sintassi corrispondente:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Le proprietà necessarie per definire angoli arrotondati simili le conoscete già.
Validazione del modulo tramite CSS3
Attualmente i visitatori possono inserire ciò che desiderano nei campi di input. Non viene effettuato alcun controllo sui valori inseriti. Questo dovrà cambiare. I campi verranno verificati secondo i seguenti criteri:
• Il campo Nome deve essere compilato.
• Il campo Email deve contenere un indirizzo email sintatticamente corretto.
• Anche il campo di input multiriga deve essere compilato.
È possibile inviare il modulo solo quando tali criteri sono soddisfatti.
Per segnalare un campo come obbligatorio, è necessario assegnargli l'attributo richiesto. Un campo contrassegnato in questo modo deve essere compilato e non può essere vuoto.
Un'applicazione corrispondente apparirebbe come segue:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Qui il browser verificherebbe se il campo è stato compilato. Se il campo è vuoto e si tenta comunque di inviare il modulo, il browser dovrebbe emettere un messaggio di errore.
Un passo avanti si fa con i campi email. A questi si assegna il valore type="email" e l'attributo required. Ora nel campo non solo deve essere inserito un valore, ma effettivamente un indirizzo email corretto, altrimenti verrà emesso un messaggio di errore quando il modulo viene inviato.
In generale, il modulo potrebbe avere l'aspetto seguente:
<ol>
<li>
<label for="name">Nome:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">Indirizzo Email:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Commento:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Invia" />
</li>
</ol>
In moduli più complessi, può essere necessario avere campi obbligatori e campi che non devono necessariamente essere compilati. In tali casi è possibile identificare separatamente i campi obbligatori. L'accesso ai campi obbligatori può essere gestito in CSS tramite :required.
:required {
background-color: #ff0000;
}Con questa sintassi, i campi obbligatori sono dotati di un colore di sfondo rosso.
Un'altra opzione per evidenziare i campi obbligatori è la seguente sintassi:
input:required:focus {
border: 1px solid red;
outline: none;
}
Se si tenta di inviare il modulo, il primo campo riceverà una cornice rossa e il focus se non è stato compilato o non soddisfa i requisiti di validità.
Se un utente compila correttamente questo campo, ma c'è un altro campo non compilato dopo il successivo tentativo di invio, anch'esso verrà evidenziato con una cornice rossa dopo la visita successiva all'invio.
