Web Design  »  Articoli  »  Web design 

Esempio completo: un modulo di registrazione

Arriviamo all'esempio conclusivo sul layout dei form. Si tratta di un form di medie dimensioni per la registrazione utenti. Il codice HTML è piuttosto corposo, ma comunque quasi minimale. Si sono solo attribuite classi e id ai fieldset, ed usati estensivamente i br per dare un minimo di struttura alla pagina anche nella versione senza stile. Tutte le label contengono il relativo campo di input. Per brevità riporto una versione accorciate del codice HTML, che comunque potrete visualizzare per intero dalla pagina ed è anche a disposizione per il download:

<fieldset class="in">
    <legend>dati generali</legend>
    <label for="nome" class="req"><strong>* </strong>nome: <input id="nome" name="nome"></label>
    <label for="cognome" class="req"><strong>* </strong>cognome: <input id="cognome" name="cognome"></label><br>
    <!--ecc --><br>
</fieldset>
<fieldset class="in">
    <legend>contatti</legend>
    <label for="tel">telefono: <input id="tel" name="tel"></label>
    <label for="fax">cellulare: <input id="fax" name="fax"></label><br>
    <label for="email" class="req"><strong>* </strong>email: <input id="email" name="email" size=42 class="large"></label><br>
</fieldset>
<fieldset id="check">
    <legend>interessi personali</legend>
    <label for="musica1"><input id="musica1" name="pers" type="checkbox">musica pop</label>
    <label for="musica2"><input id="musica2" name="pers" type="checkbox">musica classica</label>
    <!--ecc.. --><br>
</fieldset>
<fieldset id="account" class="in">
    <legend>il tuo nuovo account</legend>
    <p>il <strong>nome utente</strong> ecc...</p>
    <label for="user" class="req"><strong>* </strong>nome utente:<input id="user" name="user"></label><br>
    <label for="pass" class="req"><strong>* </strong>password:<input id="pass" name="pass"></label><br>
    <!--ecc --><br>
</fieldset>
<fieldset id="agree">
    <legend>condizioni di utilizzo</legend>
    <div id="cond">
        <p>Qui le condizioni di utilizzo..</p>
    <div>
    <label for="accetto"><input id="accetto" name="accetto" type="checkbox">ho letto e accetto le condizioni di utilizzo</label><br>
</fieldset>

Come si può notare, il form è costituito da quattro fieldset. A quelli contenenti campi di input testuale è stato attribuita una class="in", mentre a quello contenente il checkbox una class="check". Ai campi di input lunghi è stata attribuita una class="large". E poi si sono usati i br sia per mandare a capo che per contenere il float.

Il css non risulta particolarmente complicato o pesante, e fa un uso abbondante del selettore discendente. Vediamolo per intero:

fieldset{padding: 8px;border: 1px solid #B02F2F;margin-bottom: 20px}
legend{padding: 0 5px;text-transform: uppercase;color: #B02F2F}
label.req strong, strong.asterisco{font-weight: bold;
    font-family: verdana,sans-serif;color: red}
input:focus{background-color: #ffc}
br{clear:left}
fieldset.in label{float: left;text-align: center;margin: 0px 10px 5px 0}
fieldset.in input,select{display: block;width: 170px}
fieldset.in input.large{width: 355px}
input#cap,input#provincia{width: auto}
fieldset#check label{float: left;width: 120px}
fieldset#account p{float: right;width: 190px;color: #185DA1;margin-top: 10px}
fieldset#agree div#cond{width: 355px;height: 150px;overflow: auto;
    border:1px solid #666;margin: 10px 0;background-color: #f7f7f7}
fieldset#agree div#cond p{margin:0 5px 6px}
div#bottone{text-align:center}
input#go{border: 1px solid #666;
    background: #ACCDF6 url(sfondobottone.jpg) repeat-x}

Il risultato è ben presentato e ha un markup quasi minimale, a parte i br.

Nello zip allegato codice ed esempi.

Altri articoli

Altre guide

Altre newsletter