ELEMENTI DEL LINGUAGGIO HTML

I forms (moduli)

I forms costituiscono probabilmente il metodo di interazione con l'utente più usato dai siti presenti su Internet. Con essi è possibile creare dei questionari, dei moduli per l'interrogazione dei motori di ricerca, dei moduli d'invio posta, dei carrelli della spesa virtuali, e quant'altro in genere possa venire in mente all'amministratore del server (sito).

Il server dispone di programmi (chiamati uscite, o gateways) che possono essere invocati per elaborare le informazioni inviate dall'utente. Queste informazioni devono essere formattate secondo un certo protocollo, il quale stabilisce anche il formato dei dati eventualmente restituiti all'inviante. Il protocollo di cui si parla è il CGI (Common Gateway Interface), I programmi residenti sul server sono in genere scritti in Perl, un duttile e potente linguaggio batch che nasce dal mondo Unix, ma che è disponibile per tutte le principali piattaforme odierne. Tuttavia, è bene ricordarlo, un'applicazione CGI può essere scritta in qualsiasi linguaggio compilato. I programmi risiedono in genere nella directory cgi-bin ed hano di solito estensione .cgi.

Ovviamente, i form non esauriscono le possibilità di interazione tra un utente ed un server che ospita determinate pagine HTML. Qualunque programma di servizio può essere invocato tramite un opportuno collegamento con l'URL corretto. Ad esempio, è possibile chiedere la visualizzazione sulla propria homepage di un contatore degli accessi.
Come di consueto, iniziamo con la presentazione del tag che definisce un form: <FORM>...</FORM>. I parametri immediatamente utilizzabili (da inserire dunque all'interno del tag d'inizio), sono i seguenti:

ACTION Indica generalmente una URL alla quale si desidera inviare il contenuto del form. Solitamente, la URL indica un programma che segue lo standard CGI e che è stato creato appositamente per far fronte a quelle specifiche richieste da parte degli utenti. Un tipico esempio d'utilizzo è il seguente:
<FORM ACTION="http://indirizzo_sito/cgi-bin/programma.cgi">.
METHOD Può assumere uno solo dei valori POST e GET: METHOD=post oppure METHOD=get. Le differenze fra i due metodi riguardano il modo in cui i dati vengono inviati al programma CGI preposto alla loro analisi. Col metodo GET i dati inseriti nel modulo vengono inviati come parte dell'URL richiesto, ovvero vengono attaccati all'URL originale e comunicati al server attraverso una richiesta (di qui il nome GET). Col metodo POST il contenuto del modulo viene semplicemente spedito a un indirizzo specificato, ovvero tutti i campi vengono riuniti ed elaborati per formare uno o più messaggi di e-mail.
ENCTYPE Se il protocollo non prevede un formato per i dati inviati al server, con l'attributo ENCTYPE è possibile specificarlo,
Se viene utilizzato il metodo POST il formato è quello della posta elettronica: MIME (Multipurpose Internet Mail Extension), che permette di inviare non solo testo ma anche programmi, immagini, filmati, suono, ecc, opportunamente codificati (e decodificati in arrivo).
In caso contratio, il default è: application/x-www-form-urlencoded.



Dopo questa necessaria introduzione, passiamo in rassegna i vari oggetti che possiamo inserire in un form, precisando che tali tags devono essere contenuti fra quelli di definizione form: <FORM>...</FORM>

Il tag INPUT

Il tag <INPUT> definisce un campo nel quale è possibile inserire dei dati. I suoi parametri possibili sono elencati nella tabella seguente:

TYPE Rappresenta il parametro più importante, in quanto consente di specificare quale tipo di campo si desidera creare. I valori possibili sono elencati di seguito:
CHECKBOX, crea delle caselline che possono assumere valore yes oppure no, a seconda che siano o meno selezionate.
HIDDEN, non viene visualizzato sul video, ma viene comunque elaborato dal server quando il form viene inviato dall'utente.
IMAGE, consente di definire un'immagine come equivalente al pulsante submit. Quando l'utente clicca sopra l'immagine, il form viene regolarmente inviato al server.
PASSWORD, permette d'inserire una password che non apparirà sullo schermo. Generalmente, per ogni carattere immesso dalla tastiera viene visualizzato un asterisco.
RADIO, definisce delle caselline che possono essere selezionate una alla volta. Viene molto utilizzato nei questionari dove è richiesta una sola scelta fra le tante messe a disposizione.
RESET, crea un pulsante che, se premuto, azzera completamente i dati immessi fino a quel momento e visualizza nuovamente il form com'era in origine (situazione di default).
SUBMIT, crea un pulsante che, se premuto, invia al server i dati contenuti nel form, in maniera tale da poter essere elaborati. Per l'utente rappresenta il pulsante su cui cliccare per confermare l'invio del form.
TEXT, crea un campo nel quale è possibile inserire una sola linea di testo.



Una volta definito il tipo di campo che si desidera inserire nel form tramite il parametro TYPE, è possibile specificarne le caratteristiche. Per raggiungere questo scopo sono previsti numerosi parametri aggiuntivi, molti dei quali non utilizzabili da tutti i tipi di campo. Eccoli di seguito:

ALIGN Viene utilizzato con le immagini cliccabili (TYPE=image), e assume lo stesso significato e gli stessi valori dell'omonimo parametro utilizzato nelle immagini convenzionali per allinearle rispetto al testo circostante. I valori possibili sono dunque:
ALIGN=top|middle|bottom|left|right
CHECKED Viene utilizzato con i campi logici TYPE=checkbox oppure TYPE=radio, e specifica che, al momento della visualizzazione del form (oppure dopo un click sul pulsante RESET), tali campi devono risultare attivi (posizione yes).
MAXLENGTH Specifica il numero massimo di caratteri che possono essere inseriti in un campo. Non va confuso con il parametro SIZE che, invece, specifica le dimensioni fisiche che il campo avrà sul video.
NAME Specifica il nome del campo. E' molto importante che venga definito, in quanto consente al server di accedere direttamente al campo. Non è necessario con TYPE=submit e TYPE=reset.
SIZE Specifica la dimensione massima che il campo avrà a disposizione sul video. Non va confuso con il parametro MAXLENGHT che, invece, specifica le dimensioni logiche del campo.
SRC Specifica la URL dove è possibile trovare l'immagine cliccabile. Viene utilizzato con TYPE=image.
VALUE Definisce il valore iniziale che un campo deve avere al momento della visualizzazione del form, o dopo un click sul tasto RESET. Deve contenere un valore in sintonia con il tipo di campo cui si riferisce. E' richiesto con TYPE=radio e TYPE=checkbox.




Vediamo ora un esempio pratico relativo alle nozioni fin qui apprese.

Codice HTML Risultato a video
<INPUT TYPE=checkbox NAME="Italia" VALUE="Y">Italia
<BR><INPUT TYPE=checkbox NAME="USA" VALUE="Y" CHECKED>Stati Uniti
<BR><INPUT TYPE=checkbox NAME="Canada" VALUE="Y">Canada
<BR><INPUT TYPE=checkbox NAME="Giappone" VALUE="Y">Giappone
<BR><INPUT TYPE=checkbox NAME="Francia" VALUE="Y">Francia
<BR><INPUT TYPE=checkbox NAME="Senegal" VALUE="Y" CHECKED>Senegal
Italia
Stati Uniti
Canada
Giappone
Francia
Senegal
<INPUT TYPE=image NAME="mappa" SRC="logo1.gif" ALIGN=bottom>
Questo è un testo allineato in basso.
Questo è un testo allineato in basso.
<INPUT TYPE=password NAME="pwd">
<INPUT TYPE=radio NAME="nazione" VALUE="Italia">Italia
<BR><INPUT TYPE=radio NAME="nazione" VALUE="Francia">Francia
<BR><INPUT TYPE=radio NAME="nazione" VALUE="Canada">Canada
<BR><INPUT TYPE=radio NAME="nazione" VALUE="Giappone" CHECKED>Giappone
<BR><INPUT TYPE=radio NAME="nazione" VALUE="Senegal">Senegal
Francia
Stati Uniti
Canada
Giappone
Senegal
<INPUT TYPE=reset VALUE="Pulsante di Reset">
<BR><INPUT TYPE=submit VALUE="Invia il Form">

C.A.P. <INPUT TYPE=text NAME="cap" SIZE=5 MAXLENGTH=5>
<BR>
Nome1: <INPUT TYPE=text NAME="nome" SIZE=10 MAXLENGTH=25> <BR>
Nome2: <INPUT TYPE=text NAME="nome" SIZE=40 MAXLENGTH=25>
C.A.P.
Nome1:
Nome2:
Si noti l'utilizzo dei parametri SIZE e MAXLENGTH ed il conseguente scrolling orizzontale.

Il tag SELECT

Il tag <SELECT>...<SELECT> definisce un campo dotato di piu' valori possibili, comodamente selezionabili tramite menu. Questo tag viene utilizzato in associazione al tag <OPTION>.
Un tipico esempio è il seguente:

Codice HTML Risultato a video
<SELECT NAME="stati">
<OPTION VALUE="it">Italia
<OPTION VALUE="us">Stati Uniti
<OPTION VALUE="ca">Canada
<OPTION VALUE="jp">Giappone
</SELECT>
<SELECT NAME="nazioni" SIZE=4 MULTIPLE>
<OPTION VALUE="it">Italia
<OPTION VALUE="us" SELECTED>Stati Uniti
<OPTION VALUE="ca" SELECTED>Canada
<OPTION VALUE="jp">Giappone
<OPTION VALUE="fr" SELECTED>Francia
<OPTION VALUE="sn">Senegal
</SELECT>


Dopo aver visto l'esempio, possiamo spiegare nel dettaglio i possibili parametri:

Parametri del tag SELECT Descrizione
MULTIPLE Consente la selezioni di più voci del menu. Per selezionare più voci, è sufficiente cliccare sopra ognuna tenendo premuto il tasto CTRL
NAME Specifica il nome del campo che verrà inviato al server all'invio del form.
SIZE Specifica il numero di voci visibili del menu.


Parametri del tag OPTION Descrizione
SELECTED La voce di menu cui si riferisce verrà identificata come preselezionata alla prima visualizzazione del form, oppure dopo un click sul tasto RESET
VALUE Specifica il valore che verrà inviato al server nel caso che la voce venga selezionata dall'utente.



Il tag TEXTAREA

Se il form necessita di un campo libero (p.es. per inviare dei commenti o delle richieste d'informazioni), è necessario ricorrere al tag <TEXTAREA>...</TEXTAREA>.
Vediamo come di consueto i parametri disponibili ed un esempio.

NAME Specifica il nome del campo che verrà inviato al server.
ROWS Indica il numero di righe che costituiranno l'area d'immissione dati.
COLS Indica il numero di colonne (caratteri per riga) che costituiranno l'area d'immissione dati.


Codice HTML Risultato a video
<TEXTAREA NAME="note" ROWS=10 COLS=40> Inserite in questo spazio i vostri commenti </TEXTAREA>


Esempio

Per concludere l'argomento dei forms, ecco un esempio reale che racchiude i concetti fin qui appresi.

Nome:
Indirizzo:
Città:
Età: 0-13 14-17 18-29 30+
Commenti: 



&ltFORM METHOD=post ACTION="http://mio.sito.com/cgi-bin/prova.pl">

&ltTABLE BORDER=0 CELLSPACING=5 CELLPADDING=5>

&ltTR>

&ltTD>Nome:

&ltTD>

</TR>

&ltTR>

&ltTD>Indirizzo:

&ltTD>

</TR>

&ltTR>

&ltTD>Città:

&ltTD>

&ltSELECT NAME="citta">

&ltOPTION VALUE="or">Oristano

&ltOPTION VALUE="ca" SELECTED>Cagliari

&ltOPTION VALUE="nu">Nuoro

&ltOPTION VALUE="ss">Sassari

</SELECT>

</TD>

</TR>

&ltTR>

&ltTD>Età:

&ltTD>

0-13&ltINPUT TYPE=radio NAME="eta" VALUE="0-13">

14-17&ltINPUT TYPE=radio NAME="eta" VALUE="14-17">

18-29&ltINPUT TYPE=radio NAME="eta" VALUE="18-29" CHECKED>

30+&ltINPUT TYPE=radio NAME="eta" VALUE="30+">

</TD>

</TR>

&ltTR>

&ltTD VALIGN=top>Commenti:

&ltTD>

&ltTEXTAREA NAME="note" ROWS=10 COLS=50>

Inserite in questo spazio i vostri commenti

</TEXTAREA>

</TD>

</TR>

&ltTR>

&ltTD>

</TD>

&ltTD>

&ltINPUT TYPE=submit VALUE="Invia il Modulo">

&ltINPUT TYPE=reset VALUE="Annulla">

</TD>

</TR>

&ltTR>

&ltTD>

</TD>

&ltTD>

</TD>

</TR>

</TABLE>

&ltBR>

&ltBR>



</FORM>