HTML and CSS Reference
In-Depth Information
ce client-side non devono assolutamente sostituire un controllo server side, perché l'unico
modo certo di garantire che i dati siano conformi è quello di controllarli in un ambiente
dove l'utente non possa alterarli.
Fermo restando che stiamo parlando di convalida lato client e solo a fini di usabilità, le
novità in tal senso sono interessanti. Partiamo ad analizzarle una per volta.
La casistica più diffusa resta quella relativa all'obbligatorietà di un campo. In tal senso,
è sufficiente specificare l'attributo
required
su uno dei tag all'interno della form.
Nell'esempio 3.12
viene mostrato come rendere obbligatori due campi.
Esempio 3.12
<p><label>La tua e-mail:
<input type="email"
required="required"
/></label></p>
<p><label>Il tuo telefono:
<input type="tel"
required
/></label></p>
Grazie al fatto che le specifiche di HTML5 non obbligano più a utilizzare una sintassi
XML, entrambe le varianti sono funzionanti.
L'effetto prodotto varia da browser a browser, ma possiamo intervenire facilmente gra-
zie ai CSS (introdotti con maggior dettaglio nel capitolo che segue), che nella nuova ver-
sione hanno un selettore ad hoc, mostrato
nell'esempio 3.13
.
Esempio 3.13
<style type="text/css"><!--
:focus:invalid
{ background-color:red; color:white;}
:valid
{ background-color:green; }
:required
{border: 2px solid red;}
:optional
{border: 2px solid green;}
--></style>
Attraverso i selettori riportati nell'esempio precedente, possiamo fornire uno sfondo colo-
rato che aiuti l'utente a capire quando un campo è valido (
:valid
), quando è obbligato-
rio (
:required
), opzionale (
:optional
) e non valido con il focus dell'utente (
:fo-
