Esempio di creazione di un form
giovedì, 11 gennaio, 2007Con questo tutorial illustreremo come creare un form in html+css da utilizzare successivamente come base per un modulo contatti senza l’uso di tabelle.
Il primo passo sarà quello di costruire il codice html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Form di esempio</title>
</head>
<body>
<form method=”post” action=”” onsubmit=”alert(‘Disabilitato’); return false;” id=”form1″>
<fieldset>
<legend>Anagrafica:</legend>
<label for=”nome”>Nome: </label>
<input type=”text” id=”nome” name=”nome” tabindex=”1″ value=”” title=”Nome” /><br />
<label for=”cognome”>Cognome: </label>
<input type=”text” id=”cognome” name=”cognome” tabindex=”2″ title=”Cognome” /><br />
<label for=”email” class=”required” >Email: </label>
<input type=”text” id=”email” name=”email” tabindex=”3″ title=”Email” />
</fieldset>
<fieldset>
<legend>Altri campi:</legend>
<label for=”chb_1″ tabindex=”4″ >Seleziona:</label>
<input type=”checkbox” id=”chb_1″ name=”chb_1″ /><br />
<label for=”indirizzo”>Indirizzo: </label>
<textarea name=”commenti” rows=”3″ cols=”16″ id=”indirizzo” tabindex=”5″ title=”indirizzo”></textarea><br />
<button type=”submit” id=”submit” tabindex=”u”>Invia</button>
</fieldset>
<p class=”info”><em>* Campo obbligatorio.</em></p>
</form>
</body>
</html>
Noterete come abbia utilizzato button type=”submit” al posto di input type=”submit” per la maggior flessibilità data da quest’ultimo, la presenza dei tabindex per guidare il visitatore nel percorso attraverso il tasto di tabulazione e i tag fieldset, per raggruppare i campi simili, legend per “marcarli” e label per definire il contenuto dei campi.
Senza css il risultato ottenuto finora è presente in questa pagina.
Applichiamo lo stile, iniziando a definire le regole base per il body, a cui daremo sfondo bianco, font verdana e grandezza base di 12pixel e per il form che ci supponiamo debba avere una larghezza di 400 pixel.
body {background:#FFF; font-family:Verdana, sans-serif; font-size:12px;}
form {width:400px;}
Definiamo successivamente lo stile di fieldset e di legend.
fieldset {background:#FAEAAB url(“bg_form1.jpg”) repeat-y right; margin:2em 0; padding:1.5em 0 0.5em 0; border-width:0.2em 0 0.2em 1em; border-style:solid; border-color:#FC0; position:relative;}
legend {position:absolute; top: -11px; margin-left:10px; font-size:0.9em; font-weight:bold; text-align:center; background:#EFE8FC; padding:0.1em 1em; color:#666; border-width:0.2em 0.5em; border-style:solid; border-color:#AAA;}
Fieldset avrà un colore di sfondo arancio pastello e dei bordi arancio sottili in alto e spessi ai lati, con quello sinistro definito da un’immagine che avremo definito come sfondo, allineata a destra e ripetuta in verticale. Gli assegniamo una posizione esplicita relativa per avere un punto di riferimento con il tag legend che si posizionerà da esso e terminiamo aggiungendo opportuni margini e padding. Legend avrà ovviamente positione assoluta a partire da fieldset, gli daremo un margine sinistro per *staccarlo* dai bordi arancio, ed un top negativo per *allinearlo* al margine superiore. Il resto credo sia abbastanza chiaro a questo punto: allineamento centrale, grassettato, margini e padding per staccare il testo dal box e bordi grigi.
Definiamo le etichette:
label {width:140px; display: -moz-inline-box; display: inline-block; padding:2px 6px;}
label:first-letter {font-size:1.3em;}
che abbiamo supposto larghe 140px. Notate la proprietà display: inline-block che firefox interpreta con -moz-inline-box. Serve a definire un blocco come inline: una via di mezzo tra un blocco vero e proprio senza che il campo successivo torni a capo.
Prossimo passo sarà quello di definire i vari campi:
input {background:none; border-width:0 0 1px 0; border-style:dotted; border-color:#AAA;}
textarea {border:1px solid #AAA;}
#chb_1 {background:#FC0; margin-left:-4px; border:0;}
#submit {margin:1em 0 0 152px; text-align:center;}
con proprietà abbastanza intuitive da capire. Notate che ho preferito assegnare valori attraverso id specifici. In teoria i browser dovrebbero tutti supportare il comando input[type=”checkbox”] ma si sa come la teoria e la pratica siano due mondi abbastanzi distanti.
Il risultato finale sarà :
body {background:#FFF; font-family:Verdana, sans-serif; font-size:12px;}
form {width:400px;}
fieldset {background:#FAEAAB url(“bg_form1.jpg”) repeat-y right; margin:2em 0; padding:1.5em 0 0.5em 0; border-width:0.2em 0 0.2em 1em; border-style:solid; border-color:#FC0; position:relative;}
legend {position:absolute; top: -10px; margin-left:10px; font-size:0.9em; font-weight:bold; text-align:center; background:#EFE8FC; padding:0.1em 1em; color:#666; border-width:0.2em 0.5em; border-style:solid; border-color:#AAA;}
label {width:140px; display: -moz-inline-box; display: inline-block; padding:2px 6px;}
label:first-letter {font-size:1.3em;}
input {background:none; border-width:0 0 1px 0; border-style:dotted; border-color:#AAA;}
textarea {border:1px solid #AAA;}
#chb_1 {background:#FC0; margin-left:-4px; border:0;}
#submit {margin:1em 0 0 152px; text-align:center;}
label.required {font-weight:bold;}
p.info {font-size:0.8em; font-weight:bold;}
Qui troverete la pagina completa.
Approfondimenti: