Form con CSS, secondo me

Pubblicato da Davide, lunedì 12 novembre 2007 16 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

Form con CSS

Form con CSS (e talvolta javascript) ne ho visti di tutti i tipi, ma non ho trovato nessuno che mi soddisfacesse in pieno.
Me ne serviva uno, così l’ho realizzato prendendo spunto qua e là. Il punto di partenza è l’articolo su A List Apart, per la costruzione di form accessibili e semanticamente corretti a livello di codice. Va bene essere pignoli, ma scomodare JQuery e avere qualche bug di visualizzazione su Mozilla mi sembra eccessivo (si veda a tal proposito lo stesso form su html.it). Preferisco la semplicità, pur rimandendo nella sfera del “semanticamente corretto” ed essere pienamente “acessibile”.

Vediamo subito il risultato, per poi analizzarlo in dettaglio.

Ci sono effetti sulle caselle di input che aiutano l’utente nella compilazione, rendendo verdi i bordi dei box, in caso di dati corretti, oppure rossi al contrario. Appaiono inoltre le istruzioni sulla destra che diventano visibili semplicemente sfruttando l’effetto “hover” sugli elementi della lista (cambiando il colore del testo da bianco a scuro). Tale tecnica è molto semplice, ma non è supportata da IE6: poco male, se pensiamo che comunque sono dati aggiuntivi e non fondamentali. Mentre chi non ha CSS e javascript attivi riesce in ogni caso a vederle.

Form effetti

La validazione è stata realizzata utilizzando l’utilissimo script Live Validation.

Form validato

La resa cross-browser è buona, questo screenshot ad esempio rappresenta la pagina caricata sullo schermo di un palmare.

Form palmare

Anche senza CSS e javascript attivi il form risulta pienamente accessibile e di facile lettura. Ecco come appare a quegli utenti che non hanno nulla di attivo.

Form senza CSS e javascript

Il codice HTML

Prendendo spunto da A List Apart, il codice HTML non deve avere tabelle, ma la solita lista <ul> dove poi inseriremo i vari box di input.

Gli unici accorgimenti sono l’inserimento delle istruzioni all’interno di una classe “help” e la specifica della classe “option” per le etichette delle caselline da spuntare.


<form action="#">
<fieldset>
<legend>I campi marcati con * sono obbligatori</legend>
<ul>
<li>
<label>Nome*</label>
<span class="help">[Scrivi qui il tuo nome]</span>
<input name="ddnome" id="ddnome" value="" type="text" size="30" />
</li>
<li>
<label>Cognome*</label>
<span class="help">[Scrivi qui il tuo cognome]</span>
<input name="ddcognome" id="ddcognome" value="" type="text" size="30" />
</li>
<li>
<label>Indirizzo</label>
<span class="help">[Scrivi qui il tuo indirizzo]</span>
<input name="ddindirizzo" id="ddindirizzo" value="" type="text" size="30" />
</li>
<li>
<label>Città*</label>
<span class="help">[Scrivi qui la tua città]</span>
<input name="ddcitta" id="ddcitta" value="" type="text" size="30" />
</li>
<li>
<label>Provincia*</label>
<span class="help">[Scrivi qui la sigla della tua provincia]</span>
<input name="ddprovincia" id="ddprovincia" class="small-text" value="" type="text" size="2" />
</li>
<li>
<label>Email*</label>
<span class="help">[Scrivi qui la tua e-mail]</span>
<input name="ddemail" id="ddemail" value="" type="text" size="30" />
</li>
<li>
<label>Data di Nascita</label>
<span class="help">[Seleziona la tua data di nascita]</span>
<select id="dob-d"><option value="1">1</option><option value="2">2</option></select>
<select id="dob-m"><option value="1">Jan</option><option value="2">Feb</option></select>
<select id="dob-y"><option value="1980">1984</option><option value="1985">1985</option></select>
</li>
<li>
<label>Tuo commento</label>
<span class="help">[Scrivi qui un tuo commento]</span>
<textarea name="ddcommento" rows="5" cols="10"></textarea>
</li>
<li>
<label>Il tuo sesso?</label>
<span class="help">[Indica il tuo sesso]</span>
<label class="option"><input type="radio" name="ddsesso[key]" value="si" checked="checked" class="form-radio" />uomo</label>
<label class="option"><input type="radio" name="ddsesso[key]" value="no" class="form-radio" />donna</label>
</li>
<li>
<label class="option"><input name="ddcontratto" value="ok" type="checkbox" /> Ho letto tutti i contratti di questa terra</label>
</li>
</ul>
</fieldset>
<p><input class="button" type="submit" value="Invia Form"/></p>
</form>

Il codice CSS

Il CSS pesa in tutto 5Kb, compresa la parte per la struttura. Con una attenta formattazione si può migliorare di qualche Kb. Qui riporto solo la parte relativa al form vero e proprio.


form {
margin: 0 auto;
padding: 10px;
border: 1px solid #f3a251;
font: normal 1em Verdana, sans-serif;
background-color: #fff;
width: 800px;
text-align: left;
}
form ul {
background: transparent;
margin: 0;
padding: 0;
list-style: none;
}
form ul li {
margin: 0;
padding: .4em 0;
background: #fff;
color: #fff;
list-style: none;
font: normal 0.9em Verdana, sans-serif;
border-bottom: 1px solid #dadada;
}
form ul li:hover {
color: #333;
background: #eee;
}
form span.help {
float: right;
width: 29%;
}
fieldset {
margin: 0;
padding: 0;
border-top: 1px solid #dadada;
color: #777;
}
label {
display: block;
font-weight:bold;
margin: 0;
font: normal 1.5em Verdana, sans-serif;
color: #333;
width: auto;
}
label.option {
margin: .2em;
font: normal 1.2em/1.2em Verdana, sans-serif;
width: 60%;
}
input {
padding: .4em;
margin: 0;
border: 1px solid #dadada;
font: normal 1.5em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
input.form-radio {
padding: 0;
margin: 0 .2em 0 0;
border: none;
}
textarea {
width: 66%;
padding: .4em;
font: normal 1.2em/1.2em Verdana, sans-serif;
border: 1px solid #dadada;
height: 10em;
display:block;
color:#333;
background: #fafafa;
}
textarea.small-textarea {
height: 3em;
}
select {
padding: .2em 0;
margin: 0;
border: 1px solid #dadada;
font: normal 1.5em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
option {
display: block;
padding: .1em;
margin: 0;
font: normal 1em Verdana, sans-serif;
color: #333;
background: #fafafa;
}
input:focus, input:active, textarea:focus, textarea:active, select:focus, select:active {
border: 1px solid #f3a251;
background: #ffeddc;
}
input.button {
margin: .3em;
padding: .25em .3em;
border: 1px solid #f3a251;
background: #ffeddc;
font: normal 1.5em Verdana, sans-serif;
cursor: pointer;
}
input.button:hover {
background: #f3a251;
color: #fff;
}

Javascript per la validazione

La parte javascript è molto semplice, per crearla basta seguire la documentazione di LiveValidation. Tutte le validazioni avvengono dopo che l’utente ha abbandonato il box sul quale sta scrivendo. Questo è possibile specificando il parametro “onlyOnBlur: true”.

Per ogni singolo campo che deve essere validato viene costruito un oggetto LiveValidation() richiamandolo in base all’id.


<script type="text/javascript">
var valNome = new LiveValidation( 'ddnome', {onlyOnBlur: true, validMessage: "OK" } );
valNome.add( Validate.Presence, {failureMessage: "Devi inserire il nome"} );
var valCognome = new LiveValidation( 'ddcognome', {onlyOnBlur: true, validMessage: "OK" } );
valCognome.add( Validate.Presence, {failureMessage: "Devi inserire il cognome"} );
var valCitta = new LiveValidation( 'ddcitta', {onlyOnBlur: true, validMessage: "OK" } );
valCitta.add( Validate.Presence, {failureMessage: "Devi inserire una città"} );
var valProvincia = new LiveValidation( 'ddprovincia', {onlyOnBlur: true, validMessage: "OK" } );
valProvincia.add( Validate.Presence, {failureMessage: "Devi inserire la provincia"} );
valProvincia.add( Validate.Length, { minimum: 2, maximum: 4, tooShortMessage: "Almeno due caratteri", tooLongMessage: "Inserisci la sigla della provincia, al massimo 4 caratteri (ROMA)"} );
var valEmail = new LiveValidation( 'ddemail', {onlyOnBlur: true, validMessage: "OK" } );
valEmail.add( Validate.Presence, {failureMessage: "Lascia un indirizzo e-mail"} );
valEmail.add( Validate.Email, {failureMessage: "Indirizzo non valido"} );
</script>

Sia il codice CSS che quello HTML è validato W3C. Se vuoi scaricare l’esempio ecco il file zip, con licenza CC. Fammi sapere se apporti utili migliorie al codice o lo utilizzi per impieghi particolari.

16 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

Vuoi essere il primo a lasciare un commento per questo articolo? Utilizza il modulo sotto..

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi