I form

Previsti fin dalla versione di HTML 2.0, il form (o modulo) resta l'unica possibilita' di interazione con un computer remoto tramite l'immissione di dati nella pagina HTML.

Il tag <FORM>, in realta', funziona da contenitore per una serie di altri elementi:
<INPUT ...>
<OPTION>
<SELECT>
<TEXTAREA ...>
<LABEL ...>
Incontreremo piu' avanti questi tag, cercando di aggiungere una breve descrizione del loro operato.

Ecco un semplice esempio di form:

Il tuo nome: La tua e-mail:

Se vuoi aggiungere qualche commento, scrivi nel campo qui' sotto:

Questo form permette di inserire il proprio nome, l'indirizzo e-mail, un commento e di spedire il tutto, tramite un clic sul bottone "Invia query", ad un computer dotato di un apposito programma che tratti i dati in modo prestabilito. In alternativa, il bottone "Reimposta" cancellera' tutti i dati inseriti.

Ora esaminiamo il codice sorgente: 


<FORM METHOD=post ACTION="http://www.unsito.com/formscript.cgi">
<CENTER>

Il tuo nome: <INPUT TYPE=text NAME=name SIZE=20>

La tua e-mail: <INPUT TYPE=text NAME=email SIZE=20>

<P>Se vuoi aggiungere qualche commento, scrivi nel campo qui' sotto:

<TEXTAREA NAME=Comments ROWS=10 COLS=40>

</TEXTAREA>

<P><INPUT TYPE=submit> <INPUT TYPE=reset>

</CENTER>
</FORM>

<FORM METHOD=post ACTION="http://www.unsito.com/formscript.cgi">

L' attributo METHOD=post lascia spazio a pochi dubbi, significa che il contenuto del form deve essere spedito.
Ecco che ACTION="http://www.unsito.com/formscript.cgi" ci indica con chiarezza l'indirizzo web del computer e l'indirizzo del destinatario finale, formscript.cgi, che altro non e' che il programma deputato alla elaborazione dei dati. Da qui' una importante premessa: i form danno risultati acettabili solamente in abbinamento ad un programma cgi (di solito residente sul server che ospita il sito).

<INPUT TYPE=text NAME=name SIZE=20>

Questo campo di imput permette di inserire il nome, al massimo 20 caratteri. (SIZE=20)

<INPUT TYPE=text NAME=email SIZE=20>

L' unica differenza dal tag precedente e' il tipo di imput da inserire, in questo caso l'indirizzo di posta elettronica.

<TEXTAREA NAME=Comments ROWS=10 COLS=40>

TEXTAREA e' il campo per immettere il commento (ROWS indica il numero di righe, COLS il numero di caratteri per ogni riga)

<INPUT TYPE=submit>     <INPUT TYPE=reset>

Ed eccoci finalmente ai tag che generano i due bottoni, la loro azione e' facilmente intuibile.

  Gli altri elementi  

Il form puo' disporre di altri elementi per far fronte a svariate esigenze. Di seguito verranno illustrati i tag per generarli e la descrizione della loro azione.

INPUT TYPE=text 


<INPUT TYPE=text NAME=nome MAXLENGTH=30 SIZE=30 VALUE="Inserisci il tuo nome">

Questo elemento merita un po' di attenzione supplementare, se non altro per fornire informazioni utili riguardo agli attributi che contiene.

  • MAXLENGTH=30 indica che si potranno inserire al massimo 30 caratteri
  • SIZE=30 secondo le specifiche di HTML 4.0 questo attributo dovrebbe definire la larghezza del campo utile in caratteri..., condizione non sempre rispettata dai browser.
  • VALUE="Inserisci il tuo nome" imposta del testo di default, in questo caso Inserisci il tuo nome

INPUT TYPE=password 


<INPUT TYPE=password MAXLENGTH=30 SIZE=30>

L'unica differenza rispetto al tag precedente riguarda il fatto che il testo inserito viene visualizzato sotto forma di asterischi. Questo farebbe pensare ad esigenze di sicurezza, in realta' i dati non vengono affatto codificati.

INPUT TYPE=checkbox 


<INPUT TYPE=checkbox NAME=qualunque VALUE=yes checked>

L'attributo checkbox visualizza una casellina quadrata usata solitamente per input del tipo si/no. Se l'attributo VALUE presenta il valore yes la casella si presenta gia' spuntata. Checked viene usato dal browser per controllarne lo stato all'apertura della pagina, nel caso che VALUE sia impostato su yes i dati vengono inoltrati al programma cgi.

INPUT TYPE=radio

discreto buono ottimo 

         <INPUT TYPE=radio NAME=vota VALUE=discreto> <B>discreto</B>
         <INPUT TYPE=radio NAME=vota VALUE=buono> <B>buono</B>
         <INPUT TYPE=radio NAME=vota VALUE=ottimo> <B>ottimo</B>

Questo attributo permette di operare piu' scelte in merito ad un dato argomento.
Se l'attributo NAME presenta lo stesso valore (in questo caso vota) in comune a piu' caselle RADIO, solo una di esse potra' essere spuntata.

SELECT 


                         <SELECT NAME=giudizio>
                         <OPTION VALUE=vota selected> VOTA
                         <OPTION VALUE=discreto> Discreto
                         <OPTION VALUE=buono> Buono
                         <OPTION VALUE=ottimo> Ottimo
                         </SELECT>

La funzione dell'elemento SELECT e' molto simile a RADIO permettendo, tramite un menu a discesa, la spunta di una sola scelta per volta. La voce selected permette la spunta automatica di una voce (in questo caso VOTA).

Quella sotto e' una variante di SELECT, l'unica differenza consiste nel fatto che non presenta un menu a discesa, ma le voci sono esposte direttamente.


                          <SELECT NAME=giudizio multiple>
                          <OPTION VALUE=vota selected> VOTA
                          <OPTION VALUE=discreto> Discreto
                          <OPTION VALUE=buono> Buono
                          <OPTION VALUE=ottimo> Ottimo
                          </SELECT>
L'unica differenza che possiamo notare nel codice e' la presenza della parola multiple.

INPUT TYPE=image 


                          <INPUT TYPE=image SRC=img/invia.gif>

IMAGE ha la stessa funzione del bottone SUBMIT, la differenza sta nella possibilita' visualizzare un'immagine al posto del solito pulsante.

Prossimo capitolo

© 2002 Poletti Stefano