Form tableless
10/01/2012Attraverso un uso intelligente dei CSS abbiamo innumerevoli soluzioni per abbandonare l'utilizzo delle tabelle come strumenti di impaginazione.
Uno degli elementi che solitamente appare più ostico da impaginare senza far uso di tabelle è il modulo (form). Non vi è dubbio che la tabella faciliti immensamente la soluzione dei problemi di allineamento e incolonnamento rispetto all'utilizzo di div e relative regole CSS.
Una delle soluzioni più attuali, estremamente semplice da impostare ed utilizzare, per impaginare un modulo tableless, prevede invece la possibilità di utilizzare le liste, metodo oramai già diffusissimo per la creazione di menù di navigazione.
Una volta costruito il fieldset che agirà da elemento grafico 'gabbia' del modulo, ogni blocco etichetta - campo sarà racchiuso in un elemento della lista (sostituire le parentesi quadre con le parentesi angolari):
[fieldset]
[legend]Modulo[/legend]
[form name="" action="#" method="post"]
[ul]
[li] [label for="nome"]Campo testo[/label]
[input type="text" name="nome" id="nome" /]
[/li]
[li] [label for="radio"]Radio[/label]
[input type="radio" name="radio" id="on" class="opz" /]
[input type="radio" name="radio" id="off" class="opz" /]
[/li]
[li]
[label for="checkbox"]Checkbox[/label]
[input type="checkbox" name="checkbox" id="checkbox" class="opz" /]
[/li]
[li][label for="submit"][/label]
[button type="submit" id="submit"]Invia[/button] [/li]
[ul]
[/form]
[/fieldset]
Il CSS di riferimento sarà questo (si può ulteriormente personalizzare):
fieldset {
width: 400px;
}
fieldset ul, fieldset li {
border: 0;
margin: 0;
padding: 0;
list-style: none;
}
fieldset li {
clear: both;
list-style: none;
padding-bottom: 30px;
}
fieldset input {
float: left;
border: 0;
background: #eee;
width: 150px;
}
fieldset label{
width: 150px;
float: left;
}
.opz {
width: auto;
background: transparent;
}
