Form table-less grazie ai tag div e label
Pagina 1 di 2
Nelle nostre applicazioni Web siamo abituati a mostrare i form ai nostri utenti inserendo in una tabella le varie descrizioni dei campi ed i campi stessi.
In genere, incolonniamo a sinistra tutte le descrizioni ed a destra tutti gli elementi di input del form stesso, pressappoco come documentato nella seguente immagine:
In un precedente articolo abbiamo già visto come creare un form senza l'ausilo delle tabelle HTML mediante dei div opportunamente stilizzati. In questo articolo, che può essere considerato un evoluzione del precedente, vedremo come creare un form tableless grazie ad una corretta stlizzazione di due soli tag: <div> e <label>.
Il codice HTML
Passiamo subito alla pratica ed analizziamo il codice HTML del nostro form table-less:
<form method="post" action="script.asp">
<div>
<label>Nome e Cognome</label>
<input type="text" name="nominativo">
</div>
<div>
<label>Sesso</label>
<input type="radio" name="sesso" value="U"> Uomo
<input type="radio" name="sesso" value="D"> Donna
</div>
<div>
<label>Città</label>
<select name="citta">
<option value="RM">Roma</option>
<option value="MI">Milano</option>
<option value="NA">Napoli</option>
<option value="FI">Firenze</option>
<option value="BO">Bologna</option>
</select>
</div>
<div>
<label>Hobby</label>
<input type="checkbox" name="hobby" value="S"> Sport
<input type="checkbox" name="hobby" value="C"> Cinema
<input type="checkbox" name="hobby" value="L"> Lettura
</div>
<div>
<label>Note</label>
<textarea name="note" rows="10" cols="40"></textarea>
</div>
<input type="submit" value="Conferma">
</form>
Il senso è davvero semplice.
All'interno del tag form utilizziamo dei semplici div che conterranno, a loro volta, la descrizione del valore da specificare (all'interno del tag label) ed il relativo campo (input, select o textarea).
