Form table-less con i CSS
Articolo scritto da Luca Ruggiero
L'impaginazione dei form (o moduli) HTML viene generalmente fatta con le tabelle HTML onde dar loro una forma gradevole ed ottimale in termini di spazio sulla pagina e di visibilità il più completa possibile sulla pagina.
I nuovi standard e le nuove filosofie di design delle pagine Web sconsigliano l'uso delle tabelle, ragion per cui un modulo non impaginato in una tabella potrebbe essere composto dal seguente codice HTML:
<form name="modulo" method="" action="">
Nome<br>
<input type="text" name="nome"><br>
Cognome<br>
<input type="text" name="cognome"><br>
Email<br>
<input type="text" name="email"><br><br>
<input type="submit" name="invia" value="Invia i dati">
</form>
e produrre il seguente penoso aspetto:
Allo scopo dobbiamo implementare un po di codice HTML aggiuntivo all'interno del modulo appena presentato:
<form name="modulo" method="" action="">
<div class="FrmLabel">Nome</div>
<div class="FrmInput"><input type="text" name="nome"></div>
<div class="FrmLabel">Cognome</div>
<div class="FrmInput"><input type="text" name="cognome"></div>
<div class="FrmLabel">Email</div>
<div class="FrmInput"><input type="text" name="email"></div>
<div class="FrmSubmit">
<input type="submit" name="invia" value="Invia i dati">
</div>
</form>
Possiamo notare che le descrizioni testuali dei campi sono state corredate dalla classe "FrmLabel", i campi dalla classe "FrmInput" ed il pulsante di invio dalla classe "FrmSubmit".
A questo punto non ci resta che implementare il codice CSS, iniziando da una semplice stilizzazione degli elementi "div" ed "input" a cui assegnamo semplicemente lo stile e le dimensioni del testo:
div, input
{
font-size: 12px;
font-family: Verdana;
}
Passiao alla classe "FrmLabel" a cui assegnamo le dimensioni ed impediamo il ritorno a capo:
div.FrmLabel
{
float: Left;
width: 100px;
}
Alla classe "FrmInput", invece, lasciamo il ritorno a capo ma assegnamo le dimensioni e l'allineamento a destra dei campi:
div.FrmInput
{
text-align: Right;
width: 150px;
}
La classe "FrmSubmit" non differisce dalla precedente se non per il fatto che aumentiamo di un minimo il margine superiore, in modo da staccare il pulsante di invio dal resto del modulo:
div.FrmSubmit
{
text-align: Right;
width: 250px;
margin: 10px 0px 0px 0px;
}
Il risultato è il seguente:
