Può capitare di dover utilizzare dei form all’interno del nostro sito e, nella filosofia tableless si voglia fare a meno dell’impiego delle tabelle per impostare con precisione i campi. Una semplice soluzione è quello di utilizzare i CSS per controllare gli aspetti di presentazione; infatti con questo sistema si ottiene un lavoro più leggero e semanticamente corretto.
Per semplicità utilizzerò dei form standard che possono essere presenti all’interno di un generico sito; quindi il codice XHTML che utilizzerò sarà questo:
<form> <label for="user">Nome</label> <input type="text" name="user" value="" /><br /> <label for="email">Emails:</label> <input type="text" name="email" value="" /><br /> <label for="commenti">Commenti:</label> <textarea name="commenti"></textarea><br /> <label for="terms">Accetti i termini?</label> <input type="checkbox" name="terms" class="boxes" /><br /> <input type="submit" name="submitbutton" id="submitbutton" value="Invia" /> </form>
con il rispettivo esempio, che dimostra come il layout del form non sia esattamente elegante da presentare, la sua impaginazione può essere facilmente controllata con l’ausilio dei CSS; per iniziare lavoriamo sul <label>, impostando l’allineamento e la grandezza che deve occupare. Il “trucco” della giusta impaginazione del form in fondo consiste tutto in questa regola, che controlla e posiziona a sinistra il tutto; inoltre la grandezza dello spazio del testo occupato controllerà facilmente questo quando aumenterà il suo volume.
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width:1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
Le altre modifiche sono di facile comprensione e controllano fondamentalmente gli spazi fra gli elementi; forse qualche parola in più deve essere spesa per quanto riguarda la class .boxes che controlla la grandezza del checkbox.
L’ultimo tocco di stile si può applicare impostando una pulizia a sinistra all’elemento <br />, così da ottenere un risultato migliore visionabile nell’esempio finale.
2 Commenti su "Imbastire i form con i CSS e senza tabelle"
Trackbacks per questo post