PROGRAMMIAMO
Html - Form e tabelle
Form e tabelle

I form e le tabelle sono due elementi completamente distinti in HTML e hanno scopi diversi. Il form serve per permettere all'utente di inviare dati al sito, mentre le tabelle servono per strutturare il contenuto della pagina.

Tuttavia è possibile usare form e tabelle insieme. Dal momento che si tratta in entrambi i casi di elementi contenitori, è possibile inserire un form all'interno di una tabella o una tabella in un form.

Il primo caso (form in una tabella) è di scarso interesse pratico, poiché l'intero form deve essere contenuto all'interno di un'unica cella (elemento TD) della tabella. Il secondo caso (tabella in un form) è invece di uso frequente, poiché viene utilizzato per strutturare il contenuto del form, migliorandone l'aspetto visivo e la leggibilità.

Tabella all'interno di un form

Vediamo rapidamente un esempio pratico di strutturazione di un form mediante una tabella annidata. Consideriamo nuovamente il form visto nella precedente lezione:

<form action="mailto:pinco.pallino@libero.it" method="post" name = "utente" enctype="text/plain">

<p>
<strong>Nome:</strong><br>
<input type="text" name="nome">
</p>
<p>
<strong>Mail:</strong><br>
<input type="text" name="mail">
</p>
<p>
<strong>Commento:</strong><br>
<input type="text" name="commento">
</p>
<p>
<input type="submit" value="Invia">
<input type="reset" value="Annulla">
</p>

</form>

L'aspetto di questo form è un po' disordinato. Usando una tabella possiamo strutturarlo meglio, per esempio in questo modo:

<form action="mailto:pinco.pallino@libero.it" method="post" name = "utente" enctype="text/plain">

<table style="width:300px">

<tr>
<td style="width: 50%"><strong>Nome:</strong></td>
<td><input type="text" name="nome"></td>
</tr>

<tr>
<td><strong>Mail:</strong></td>
<td><input type="text" name="mail"></td>
</tr>

<tr>
<td><strong>Commento:</strong></td>
<td><input type="text" name="commento"></td>
</tr>

<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Invia">
<input type="reset" value="Annulla">
</td>
</tr>

</table>

</form> 

L'aspetto finale è questo:

Nome:
Mail:
Commento:

Si noti che abbiamo usato una tabella nascosta (senza bordi) per dividere il form in due colonne (ciascuna delle quali occupa il 50% della tabella). Sulla prima colonna abbiamo messo le intestazioni di ciascun campo del form (Nome, Mail, Commento), mentre sulla seconda colonna abbiamo messo le caselle di inserimento testo. I due pulsanti, infine, sono stati allineati al centro.

Naturalmente si tratta solo di un esempio, ma dovrebbe bastare per far capire al lettore l'uso delle tabelle per strutturare il contenuto di un form. 

 

precedente -successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it