Tableless forms using CSS

This entry was posted on October 9th, 2008 and is filed under CSS, XHTML.

Benvenuto! Se è la prima volta che arrivi sul blog, magari ti interessa iscriverti al mio feed RSS per restare aggiornato.

Le form sono lo strumento più importante per permettere l’interazione degli utenti con il web. La maggior parte dei web designer però, per non perdere tempo, ancora progettano le form utilizzando le ormai datate <table>. Il mio professore di Ingegneria del Web diceva sempre a lezione: “Usate le tabelle solo per quello che sono state create”; effettivamente non ha tutti i torti. Il difetto principale di questo approccio è che ci perdiamo tra gli interminabili <tr> e <td> di cui si ha bisogno; senza contare la scarsa efficienza!

Il modo più corretto, e secondo me più veloce, è quello di scrivere qualche riga di codice CSS.

Il seguente listato di codice CSS ci consente di realizzare una form senza utilizzare le tabelle:


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;
}

mentre questo è il relativo codice XHTML:


<form>

  <label for="user">Name</label>
  <input name="user" type="text" />

  <label for="emailaddress">Email Address:</label>
  <input name="emailaddress" type="text" />

  <label for="comments">Comments:</label>
  <textarea name="comments"></textarea>

  <label for="terms">Agree to Terms?</label>
  <input class="boxes" name="terms" type="checkbox" />

  <input id="submitbutton" name="submitbutton" type="submit" value="Submit" />
</form>

Il risultato finale di tale esempio sarà: