HTML: Form

Form

Muovendosi nella rete, si scopre che la maggior parte delle pagine che si incontrano hanno tutte la stessa caratteristica: sono pagine STATICHE.
Una pagina si definisce STATICA quando non permette un rapporto biunivoco con l'interlocutore: l'ospite può esclusivamente visionare la pagina contenente testo, suoni, immagini e video.
Una pagina, invece, viene detta DINAMICA allorquando rende possibile un intervento diretto da parte di chi la stia visionando. Vi sono diversi modi per rendere dinamica una pagina come, ad esempio, utilizzare applet java, VBasic, Asp, etc. Anche l'Html permette di sfruttare la dinamicità di una pagina, anche se in piccola parte: è questo il caso dei FORM.
La dinamicità dei form è dovuta alla possibilità che essi danno di inserire parte di testo, selezionare delle caselle e, infine, inviare notizie al titolare della pagina.

<FORM>

Un form è delimitato dai tags <FORM></FORM>.

Una volta compilato un form, esso sarà spedito alla casella di posta elettronica del titolare della pagina; ciò è possibile tramite l'inserimento della destinazione all'interno del tag di apertura.

Esistono due possibili destinazioni:

Indirizzo e-mail.
Indirizzo del server.

In entrambi i casi viene utilizzato il comando ACTION che permette di inserire la destinazione scelta. Tramite il comando METHOD, invece, si sceglie il metodo che si vuole utilizzare per il trasferimento dei dati. A tale comando può essere associato uno dei due valori: "get" oppure "post". In questo corso verrà utilizzato esclusivamente il valore "post" e, di conseguenza, il tag di apertura diventerà:

<FORM ACTION="destinazione" METHOD="post">.

DESTINAZIONE DEL FORM

Come abbiamo già accennato, esistono due tipi di destinazione per il proprio form. La prima destinazione possibile è tramite E-MAIL, associando direttamente al comando ACTION il proprio indirizzo di posta elettronica nella forma:

<FORM ACTION="mailto:roby_kirk@usa.net" METHOD="post">.

L'unico vantaggio, il più visibile, consta del fatto di avere la possibilità di far pervenire direttamente, senza passaggi intermedi, il risultato dei propri forms al proprio indirizzo di posta elettronica. In contrapposizione alla semplicità di tale sistema, si ha la complessità nel decifrare tali risultati. Quando si riceve tale e-mail, infatti, si ha un problema di lettura dovuto alla mancanza di formattazione del testo (ad esempio al posto delle lettere accentate, compaiono dei caratteri alternativi). Per ovviare a tale situazione, esistono degli SCRIPT CGI che permettono l'interpretazione di queste stringhe. Il problema degli SCRIPT CGI è dato dal fatto che devono trovarsi nel server. Per quanto riguarda coloro che hanno un sito a pagamento del tipo www.mionome.it, .com od altro, essi hanno la possibilità di utilizzare questo tipo di programmi sia che si trovino già inseriti all'interno del server o che vengano inseriti da loro stessi. Il problema nasce per coloro che sono ospiti di quei providers che effettuano un servizio gratuito di spazio web (come Tripod o Geocities); alcuni di questi providers permettono l'utilizzo dei propri script anche agli utenti di pagine gratuite (Tripod fornisce tale possibilità) tramite richiesta telematica: sarà lo stesso provider a far pervenire via e-mail i risultati dei form con una formattazione tale da poterli leggere con più facilità. Se ci si trova in questa situazione, sarà lo stesso gestore a fornire l'indirizzo internet dove si trova lo script cgi. Il tag <FORM> in tal caso diventerà:

<FORM ACTION="http://indirizzo_fornito_dal gestore" METHOD="post">.

FUNZIONI AGGIUNTIVE

Ulteriori elementi di utilità sono forniti dal tag <INPUT> che non necessita di tag di chiusura. Poichè i risultati del form vengono inviati via posta elettronica, è possibile attribuire al form il soggetto (subject) da attribuire all'e-mail; ciò è possibile scrivendo, per esempio:

<INPUT TYPE="hidden" NAME="Subject:" VALUE="soggetto che si vuole attribuire a tali e-mail">.

Una volta compilato il form, si può desiderare che all'atto in cui si clicca sul tasto di invio form, si possa restituire all'utente una nuova pagina (pagina principale, messaggio di avvenuto invio del form oppure pagina di ringraziamento); per fare ciò si può scrivere, per esempio:

<INPUT TYPE="hidden" NAME="Thankyou" VALUE="http://members.it.tripod.de/roby_kirk/grazie.html">.

Di seguito vengono elencati degli elementi che permetteranno di comporre il proprio form.

CASELLA DI TESTO A RIGA SINGOLA

Questo elemento è uno dei più utilizzati e permette l'inserimento di un testo all'interno della casella che viene prodotta; è utilizzato, normalmente, per l'inserimento di dati personali.

esempio:

<INPUT TYPE="text" SIZE="30" MAXLENGTH="30" NAME="Nome: ">

dove SIZE definisce la larghezza della casella di testo, MAXLENGTH il numero massimo dei caratteri inseribili (può anche essere superiore a size: in questo caso, superato il numero di caratteri che entrano nella dimensione della casella, il testo incomincia a scorrere) e NAME permette di attribuire un nome alla casella, in modo da avere sulla e-mail come risultato:
"Nome: nome inserito nella casella"; si ottiene questo risultato:

Se si desidera che la casella abbia già in partenza una parola o frase inserita, si può utilizzare il comando VALUE in questo modo:

esempio:

<INPUT TYPE="text" SIZE="30" MAXLENGTH="30" NAME="Nome: " VALUE="inserisci il tuo nome">

con questo risultato:

CASELLA DI TESTO A SCORRIMENTO

Questo elemento è molto utile nel caso si abbia la necessità di permettere l'inserimento di una quantità elevata di caratteri. Tale casella, infatti, oltre ad avere una area più grande della precedente, permette lo scorrimento del testo grazie alla possibilità d'inserimento di cursori di scorrimento.

esempio:

<TEXTAREA NAME="Commento: " ROWS="3" COLS="40"></TEXTAREA>

che fornisce questo risultato:

Come si nota in quest'ultimo esempio, in questo caso si ha la necessità di inserire il tag di chiusura </TEXTAREA>. Tramite il comando ROWS si stabilisce il numero di righe visibili nella casella, mentre con COLS si decide il numero di caratteri che devono entrare in una riga prima di andare automaticamente a capo. Anche in questo caso è possibile inserire un testo di partenza ma, questa volta, verrà inserito tra il tag di apertura e quello di chiusura:

esempio:

<TEXTAREA NAME="Commento: " ROWS="3" COLS="40">inserisci in questa casella i tuoi commenti</TEXTAREA>

che fornisce questo risultato:

Per ottenere anche la barra di scorrimento orizzontale, si modificherà il codice aggiungendo il comando WRAP in questo modo:

<TEXTAREA NAME="Commento: " ROWS="3" COLS="40" WRAP="off"></TEXTAREA>

CASELLA DI CONTROLLO

Nella situazione in cui si voglia porre delle scelte all'utente della propria pagina, subentra questo nuovo elemento che ha la caratteristica di visualizzare delle caselle che, con l'ausilio del mouse possono essere spuntate fornendo come risultato, nel form, l'affermazione alla loro selezione:

esempio:

<INPUT TYPE="checkbox" NAME="Casella controllo: " VALUE="Yes">

con questo risultato:

PULSANTE DI OPZIONE

Tramite questo elemento si dà la possibilità all'utente di sceglire fra diverse opzioni. Se, inoltre, al comando NAME si attribuisce lo stesso valore, si obbliga l'utente alla scelta di un'unica opzione:

esempio:

Si No

NOTA: se si attribuisce un valore diverso ai due comandi NAME, oltre a non sussistere una vera e propria scelta, una volta selezionato un pulsante, cliccando successivamente sull'altro, non viene diselezionato il precedente:

esempio:

Si No

Come per la casella di controllo, anche per i pulsanti di opzione è possibile fare in modo che un pulsante sia selezionato in partenza:

esempio:

Si No

MENU A DISCESA

Come si capisce facilmente dal nome, questo elemento permette la scelta delle sue opzioni con la discesa a locandina del menu stesso. Anche in questo caso è necessario aggiungere il tag di chiusura:

esempio:

<P>
<SELECT NAME="come mi hai trovato? " SIZE="1">
<OPTION selected VALUE="nessuna"></OPTION>
<OPTION VALUE="amici">Amici</OPTION>
<OPTION VALUE="motori">Motori di ricerca</OPTION>
<OPTION VALUE="tripod">Tripod</OPTION>
</SELECT>
</P>

dove la parola "selected" fa in modo che tale voce sia selezionata in partenza (in questo caso tale voce è vuota). Come risultato si avrà:

Tramite il comando SIZE, si decide di quante righe deve essere composta la casella; cosi, ad esempio, se si volesse una casella di 3 righe si scriverebbe:

esempio:

<P>
<SELECT NAME="come mi hai trovato? " SIZE="3">
<OPTION selected VALUE="nessuna"></OPTION>
<OPTION VALUE="amici">Amici</OPTION>
<OPTION VALUE="motori">Motori di ricerca</OPTION>
<OPTION VALUE="tripod">Tripod</OPTION>
</SELECT>
</P>

come risultato si avrà:

Se si desidera permettere una selezione multipla basterà aggiungere il comando MULTIPLE in questo modo:

esempio:

<P>
<SELECT NAME="come mi hai trovato? " MULTIPLE SIZE="3">
<OPTION VALUE="amici">Amici</OPTION>
<OPTION VALUE="motori">Motori di ricerca</OPTION>
<OPTION VALUE="tripod">Tripod</OPTION>
</SELECT>
</P>

come risultato si avrà:

Per la selezione multipla si dovrà tenere premuto il tasto control della tastiera (CTRL) mentre si selezionano con il mouse le voci d'interesse del menu.

PULSANTE DI COMANDO

Una volta costruito il nostro form, non rimane altro che inserirvi un bottone di invio e, in caso, uno di resettaggio che permetta di ripulire tutti i campi del form.

esempio di PULSANTE DI INVIO :

<INPUT TYPE="submit" VALUE="Invia">

Per quanto riguarda il pulsante di invio, si può utilizzare un altro comando che permette di utilizzare un bottone immagine al posto di quello standard:

esempio di PULSANTE IMMAGINE :

<INPUT TYPE="image" SRC="bottone.jpg">