I formulari HTML

Vantaggi di un formulario

I formulari interattivi permettono agli autori di pagine web di dotare le proprie pagine web con degli elementi interattivi che danno la possibilità ad esempio di avere un dialogo con gli internauti, sulla falsa riga dei coupon-risposta presenti in alcuni negozi.

Il lettore inserisce delle informazioni riempiendo i campi o cliccando su dei bottoni, poi sul bottone di invio (submit) verso un URL, cioè in maniera generale ad un indirizzo e-mail o a uno script di pagina web dinamica come PHP, ASP o uno script CGI.

Il tag FORM

I formulari sono delimitati dal tag <FORM> ... </FORM>, un tag che permette di raggruppare più elementi del formulario (bottoni, campi di digitazione,…) e che possiede gli attributi obbligatori seguenti :

METHOD indica sotto quale forma saranno inviate le risposte
« POST » è il valore che corrisponde ad un invio di dati stoccati nel corpo della richiesta, mentre « GET » corrisponde ad un invio dei dati codificati nell'URL, e separati dall'indirizzo dello script da un punto interrogativo (per ulteriori informazioni sui metodi POST e GET, consultate l'articolo sul protocollo HTTP)
ACTION indica l'indirizzo di invio (script CGI o indirizzo mail (mailto:indirizzo.email@terminale))

Il tag FORM ha come attributo facoltativo ENCTYPE che specifica la codifica dei dani nell'URL, tuttavia non è necessario precisarlo dato che il valore attribuito da default (application/x-www-form-urlencoded) è l'unico valido. L'attributo facoltativo ACCEPT permette di definire i tipi MIME di dati che possono essere inviati tramite formulario.

Ecco la sintassi del tag FORM :

<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>

E qualche esempio di tag FORM :

<FORM METHOD=POST ACTION="mailto:webmaster@kioskea.net">

<FORM METHOD=GET ACTION="http://it.kioskea.net/cgi-bin/script.cgi">

All'interno del tag FORM…

Il tag FORM costituisce in qualche modo un contenitore che permette di raggruppare degli elementi che permetteranno all'utente di scegliere o di inserire dei dati, gruppo di dati che saranno inviati all'URL indicato nell'attributo ACTION del tag FORM attraverso il metodo indicato dall'attributo METHOD.

E' possibile inserire qualsiasi elemento HTML di base in un tag FORM (testo, bottoni, tabelle, link,…) ma è soprattutto interessante interessante inserire degli elementi interattivi. Questi elementi interattivi sono :

Il tag INPUT : un insieme di bottoni e di campi di inserimento
Il tag TEXTAREA : una zona di inserimento
Il tag SELECT : una lista a scelta multipla

Invio dei dati

Una volta che il formulario è inviato (con il bottone submit), i dati presentati nel formulario sono inviati allo script CGI sotto forma di coppia nome/valore, cioè un insieme di dati rappresentati dal nome dell'elemento del formulario, il carattere "=", poi il valore associato. L'insieme di queste coppie nome/valore sono separate fra loro da degli spazi (carattere &). I dati inviati assomigliano quindi a questo :

champ1=valeur1&champ2=valeur2&champ3=valeur3

Nel caso del metodo GET (invio di dati attraverso l'URL), l'URL assomiglierà a una stringa del tipo :

http://it.kioskea.net/cgi-bin/script.cgi?champ1=val1&champ2=val2

Il tag INPUT

Il tag INPUT è il tag essenziale dei formulari, dato che permette di creare un buon numero di elementi "interattivi". La sintassi di questo tag è la seguente :

<INPUT type="Nome del campo" value="Valore di default" name="Nome dell'elemento">

L'attributo name è essenziale dato che permetterà allo script CGI di conoscere il campo associato alla coppia nome/valore, cioè il nome del campo sarà seguito dal carattere "=" poi dal valore inserito dall'utente, o in caso contrario dal valore di default indicato dall'attributo valore.
L'attributo tipo permette di precisare il tipo di elemento che rappresenta il tag INPUT, qui di seguito i valori che questo campo può prendere :

checkbox : si tratta di caselle da selezionare con due stati :checked (selezionato) e unchecked (non selezionato). Quando la casella è selezionata la coppia nome/valore è inviata al CGI
hidden : si tratta di campo nascosto. Questo campo non visibile sul formulario permette di precisare un parametro fisso che sarà inviato al CGI sotto forma di coppia nome/valore.
file : si tratta di un campo che permette all'utente di precisare la posizione di un file che sarà inviato con il formulario. In questo caso bisogna precisare il tipo di dati che possono essere inviati grazie all'attributo ACCEPT del tag FORM
image : si tratta di un bottone di invio personalizzato, la cui anteprima è l'immagine posta nella posizione precisata dal suo attributo SRC
password : si tratta di un campo di inserimento, nei quali i caratteri inseriti appaiono sotto forma di asterischi per camuffare l'inserimento dell'utente
radio : si tratta di un bottone che permette una scelta fra più proposte (l'insieme dei bottoni radio devono avere lo stesso attributo name. La coppia nome/valore del bottone radio selezionato sarà inviato al CGI. Un attributo checked per uno dei bottoni permette di precisare il bottone selezionato per default
reset : si tratta di un bottone di azzeramento che permette unicamente di ristabilire l'insieme degli elementi del formulario ai loro valori di default
submit : si tratta del bottone di invio che permette di inviare il formulario. Il testo del bottone può essere precisato grazie all'attributo valore
text : si tratta di un campo di inserimento che permette l'inserimento di una linee di testo. La dimensione del campo può essere definita attraverso l'attributo size e la dimensione massima del testo inserito grazie all'attributo maxlength

Il tag TEXTAREA

Il tag TEXTAREA permette di definire una zona di inserimento più vasta paragonata alla semplice linea di inserimento che propone il tag INPUT. Questo tag ha i seguenti attributi :

cols : rappresenta il numero di caratteri che possono essere contenuti in una linea
rows : rappresenta il numero di linee
name : rappresenta il nome associato al campo, è il nome che permetterà d'identificare il campo nella coppia nome/valore
readonly : permette di impedire all'utente di modificare il testo inserito per default nel campo
value : rappresenta il valore che sarà inviato per default allo script si il campo di inserimento non è modificato da una digitazione dell'utente

Il tag SELECT

Il tag SELECT permette di creare una lista scorrevole di elementi (precisti dai tag OPTION all'interno della lista). Gli attributi di questo tag sono :

name : rappresenta il nome associato al campo, è il nome che permetterà d'identificare il campo nella coppia nome/valore
disabled : permette di creare una lista disattivata, cioè visualizzata in grigio
size : rappresenta il numero di linee nella lista (questo valore può essere più grande del numero di elementi effettivi nella lista stessa)
multiple : indica la possibilità per l'utente di scegliere più campi nella lista

Un esempio di formulario

I formulari possono essere impaginati attraverso delle tabelle (cosa consigliata per avere un'impaginazione più accurata). Ecco un esempio che riassume i punti descritti finora e che mostra come impaginare un formulario con l'aiuto di una tabella :

<FORM method=post action="cgi-bin/script.pl">
Registrazione di un utente
<TABLE BORDER=0>
<TR>
	<TD>Cognome</TD>
	<TD>
	<INPUT type=text name="cognome">
	</TD>
</TR>

<TR>
	<TD>Nome</TD>
	<TD>
	<INPUT type=text name="nome">
	</TD>
</TR>

<TR>
	<TD>Sesso</TD>
	<TD>
	Uomo : <INPUT type=radio name="sesso" value="M">
	<br>Donna : <INPUT type=radio name="sesso" value="F">
	</TD>
</TR>

<TR>
	<TD>Funzione</TD>
	<TD>
	<SELECT name="funzione">
		<OPTION VALUE="insegnante">Insegnante</OPTION>
		<OPTION VALUE="studente">Etudiant</OPTION>
		<OPTION VALUE="ingegnere">Ingénieur</OPTION>
		<OPTION VALUE="pensionato">Retraité</OPTION>
		<OPTION VALUE="altro">Autre</OPTION>
	</SELECT>
	</TD>
</TR>
<TR>
	<TD>Commenti</TD>
	<TD>
	<TEXTAREA rows="3" name="commenti">
	Inserite qui i vostri commenti</TEXTAREA>
	</TD>
</TR>

<TR>
	<TD COLSPAN=2>
	<INPUT type="submit" value="Inviare">
	</TD>
</TR>
</TABLE>
</FORM>

Ecco il risultato di questo codice HTML

Attributi del tag FORM e tipi di inserimenti

Tag	Attributo	Valore	Risultato
<FORM> ... </FORM>	METHOD	POST GET
	ACTION		invio all'indirizzo indicato
	ENCTYPE		specifica il tipo di codifica utilizzato
<INPUT>	TYPE	submit	effettua l'ACTION nel tag <FORM>
		text	semplice linea di testo la cui lunghezza è data dall'attributo size
		reset	cancella il contenuto del formulario
		radio	bottone radio
		checkbox	casella da selezionare
	NAME		Nome
	SIZE		Dimensione del testo
<TEXTAREA> ... </TEXTAREA>	NAME		Zona di testo
	ROWS
	COLS
<SELECT> <OPTION> ... </OPTION> </SELECT>	NAME
<SELECT> <OPTION> ... </OPTION> </SELECT>	MULTIPLE		Più scelte possibili
<OPTION> ... </OPTION>	SELECTED	Opzione di default
<OPTION> ... </OPTION>	VALUE	Valore forzato