Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Allineare campi e label dei form senza tabelle

Settembre 5th, 2008 by Giovanni Caputo

Molte volte per allineare le eticchette dei campi dei form si è costretti ad utilizzare una tabella, oppure, come già vi ho presentato in altri post precedenti, si possono utilizzare dei servizi per crearli online; alcune volte però sono difficili da modificare.

Se vogliamo un form personalizzato con i campi e le label allineate è possibile, invece, utilizzare dei semplici css  [tableless].

Per esempio

CODICE FORM

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”/><br />
<label for=”address”>Address</label>
<input id=”address” name=”address”/><br />
<label for=”city”>City</label>
<input id=”city” name=”city”/><br />
</form>

CSS

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

Questo post è stato postato venerdì, Settembre 5th, 2008 at 09:32 nella categoria Siti Web, Tecnologia, tutorial. Tags:, , , , .
Puoi seguire tutti i commenti di questo articolo attraverso RSS 2.0 feed. Puoi lasciare un commento, o trackback dal nostro sito.

2 responses about “Allineare campi e label dei form senza tabelle”

  1. Allineare campi e label dei form senza tabelle | Plim! Blog said:

    […] Articolo di Giovanni Caputo. Leggi l’articolo intero. […]

  2. salvatore said:

    grazie, era proprio quello che mi serviva 🙂

Lascia un commento

You must be loggati to post a comment.