Manie Grafiche fa ora parte di Ueppy S.r.l. - Per preventivi ed informazioni: 800 97 44 69

 

Esempio di creazione di un form

Categoria: Css

Con 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:

Torna all'indice di: guida css

Lascia un commento

Devi fare il login per lasciare un commento.

Manie Grafiche è stata rilevata da Ueppy S.r.l. - via Farnese, 16 - Pico | P.iva: 02682300609