Form Tutor- Lezione 3

Prima di continuare vorrei menzionare un'altra cosa. E' anche possibile utilizzare immagini nei moduli. Di fatto è possibile utilizzare qualsiasi cosa nei moduli e mettere un modulo in qualsiasi cosa. Basta stare attenti alla sintassi HTML che viene usata e a non sovrapporre i tags.

A Presidential Quiz

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem
 

RepDem

RepDem

RepDem

RepDem

RepDem

RepDem
Il codice di questo form    lo puoi trovare  qui se sei interessato.
...e le risposte sono qui... se non sei sicuro.

I tags sovrapposti, per quelli che si chiedono cosa siano, sono ...hum ...tags che si sovrappongono. Fatemi spiegare.

   <TABLE><FORM></TABLE></FORM>    Tags sovrapposti ...no buono!
   <TABLE><FORM></FORM></TABLE>    Tags incasellati ...buono!


Il prossimo tipo di input è la Lista a Scorrimento. Con questo tipo di input bisogna usare <SELECT> invece di <INPUT> e c'è anche un tag di chiusura. Costruiamone una.

<SELECT>
</SELECT>


Non dimentichiamo di assegnargli un nome.

<SELECT NAME="BEST FRIEND">
</SELECT>


Ora aggiungiamo qualche opzione.

<SELECT NAME="BEST FRIEND">
<OPTION>Ed
<OPTION>Rick
<OPTION>Tom
<OPTION>Guido
</SELECT>


E assegnamo a ciascuna opzione [<OPTION>] un valore [VALUE].

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
</SELECT>

L'opzione di default è quella che sta per prima.


E' comunque possibile specificare un altro default.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom" SELECTED>Tom
<OPTION VALUE="Guido">Guido
</SELECT>


Una Lista Scorrevole viene costruita in maniera molto simile. Innanzitutto aggiungiamo qualche alro nome.

<SELECT NAME="BEST FRIEND">
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</SELECT>


Tutto quello che dobbiamo fare per trasformarlo in una lista scorrevole è aggiungere l'attributo SIZE al tag <SELECT>.

<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom">Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</SELECT>

L'attributo SIZE specifica semplicemente quante opzioni vengono visualizzate assieme nella finestra. Non è meraviglioso?


Anche questa volta il valore di default è la prima opzione [<OPTION>] specificata, e di nuovo possiamo modificarlo scegliendone uno.

<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="Ed">Ed
<OPTION VALUE="Rick">Rick
<OPTION VALUE="Tom" SELECTED>Tom
<OPTION VALUE="Guido">Guido
<OPTION VALUE="Horace">Horace
<OPTION VALUE="Reggie">Reggie
<OPTION VALUE="Myron">Myron
</SELECT>

Non ho la minima idea del perchè qualcuno possa essere interessato a utilizzare il tag SELECTION per fare una lista scorrevole. Tuttavia la possibilità esiste e non ho retto alla tentazione di mostrarvi come si fa.


Un tipo di input estremamente utile è il <TEXTAREA>.

<TEXTAREA NAME="COMMENTS">
</TEXTAREA>


Puoi determinare la dimensione del riquadro in questo modo...

<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>

ROWS è l'altezza, COLS la larghezza.



Ecco qui il codice HTML di quest'area di testo.

Un attributo che è spesso bene includere in <TEXTAREA> è WRAP. Alcuni browsers non lo interpretano, ma in questo caso si limitano ad ignorarlo.

Andiamo avanti e scriviamo nel riquadro

<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>

WRAP=VIRTUAL significa che il testo nel riquadro va a capo, ma viene spedito come una sola riga.


<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>

WRAP=PHYSICAL significa che il testo nel riquadro va a capo, e viene spedito allo stesso modo.


<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>

Questo è il valore di default.
WRAP=OFF significa che il testo nel riquadro non va a capo, ma viene spedito esattamente nello stesso modo in cui è stato scritto (come l'omino che c'era in un textarea precedente).

<--BACK        NEXT-->

Introduzione Lezione 1 Lezione 2 Lezione 3 Lezione 4 Lezione 5 Indice