Form senza le tabelle
Realizzare un form ben strutturato senza l’utilizzo di tabelle può sembrare veramente difficile se non impossibile (per chi ha iniziato da poco con gli standard).Vediamo in pratica come si può strutturare il markup del nostro form.
<form action="azione.php" method="post">A questo punto abbiamo tutti gli elementi del form ben posizionati, ma adesso vanno sistemati in modo da renderlo più leggibile e più carino.
<p>
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" />
</p>
<p>
<label for="cognome">Nome:</label>
<input type="text" name="cognome" id="cognome" />
</p>
<p>
<label for="email">E-Mail:</label>
<input type="text" name="email" id="email" />
</p>
<p>
<label for="msg">Messaggio:</label>
<textarea rows="10" cols="10" name="msg" id="msg"></textarea>
</p>
<p><input class="button" type="submit" value="Invia" /></p>
</form>
Andiamo quindi a sistmare il CSS.
<style type="text/css" media="screen">Et-Voilà. Il nostro form è ben posizionato.
label {
display: block;
width: 150px;
float: left;
}
p { clear: left; }
input,
textarea {
width: 200px;
}
.button { width: auto; }
</style>
Il funzionamento è semplice, andiamo a rendere division block gli elementi label e gli diamo una dimensione fissa, poi, per far sì che gli elementi input gli vadano accanto invece che sotto, li facciamo floattare. Poi ad ogni elemento p gli facciamo cancellare il float per tornare nel flusso del markup. Il resto è molto semplice da capire.
Buon sviluppo a tutti!
