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.

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.