I Moduli o Forms.

Abbiamo visto nella lezione precedente come impaginare i dati facendo uso delle tabelle. Vediamo ora come poter interagire col visitatore ricevendo dati ed informazione tramite un modulo che è possibile compilare e spedire al nostro indirizzo e-mail direttamente dalla pagina web.

Un modulo (form) può essere costituito da diversi elementi quali: caselle per l'introduzione dei dati, menù a tendina dove effettuare scelte preimpostate, caselle di selezione multipla tipo spunta, radio caselle per singole o multiple selezioni, aree di testo più o meno ampie per raccogliere commenti e descrizioni, caselle nascoste per password, pulsanti di invio, pulsanti di annullamento o reset.

Tutti questi elementi sono raccolti e visibili sulla guida html, in questa lezione ci limiteremo all'essenziale per poter creare un piccolo modulo e sarete voi stessi, una volta appresa la tecnica, ad arricchirlo di tutti quegli elementi che  riterrete utili al vostro fabbisogno.

I forms possono essere utilizzati per svariate forme di comunicazione, il solo codice html ha però delle limitazioni, nel senso che non è possibile effettuare controlli sui dati introdotti e meno ancora interagire con le scelte dell'utente che li compila. Queste limitazione sono però superabili adoperando in abbinamento un qualsiasi linguaggio di programmazione (scripting) come: php, asp, javascript, con i quali è possibile ricevere o inviare dati a/da pagine diverse, eseguire operazioni matematiche, effettuare controlli sui dati introdotti, anche di tipo piuttosto complesso come verificare se un campo destinato a ricevere un indirizzo e-mail è stato compilato correttamente, se ad esempio al suo interno si è dimenticata la @ che sappiamo essere fondamentale per un indirizzo di posta elettronica e molto altro ancora.

Vediamo come si creano e quali siano gli elementi indispensabili al suo funzionamento: Un modulo ha come elemento base <form> tutto quello che sarà inserito al suo interno e fino alla chiusura </form> farà parte del modulo e come tale seguirà le azioni previste nel modulo stesso.

L'elemento (tag) form che dichiara il modulo da solo dice poco e niente, necessita di alcuni attributi, almeno due per essere spedito:action e method ed un terzo opzionale id che servono rispettivamente:

action per indirizzare il modulo al server, all' URL, al CGI o all'indirizzo di posta elettronica.

method per dichiarare con quale dei due possibili metodi: post o get si devono trasmettere i dati. (get è disapprovato)

id Il nome che preferite assegnare al modulo, diventa indispensabile facendo uso di JavaScript o altro linguaggio di programmazione che diversamente non saprebbe a quale modulo fare riferimento nella pagina web. Per ragioni di compatibilità con html precedenti si fa uso anche di name che deve avere lo stesso dato di id.

Così come abbiamo visto con le tabelle dove il solo <table> serviva per creare la struttura affidando a <tr> e <td> il compito di creare righe e colonne, nel form è indispensabile almeno un elemento input che a seconda dell'attributo type ad esso associato diventa un campo di testo da compilare (text), un pulsante per spedire (submit) un pulsante per resettare (reset) o altro ancora.

Vediamo con un esempio pratico quanto detto fino a questo momento.

Si tratta di un ipotetico modulo per ricevere un parere e questo sotto il risultato a video:

Il modulo è perfettamente funzionante come è possibile constatare compilandolo, anche se non è ancora in grado di fare nulla di concreto, vediamo di analizzarlo per capire le varie istruzioni.

form definisce il modulo. action (pagina.html) richiama una pagina che in questo caso è in html e come tale impossibilitata ad elaborare dati o prendere decisioni (sarebbe possibile con pagine in ASP o in PHP). method (post) il metodo usato per la spedizione. id (miomodulo) il nome dell'oggetto modulo al quale poter fare riferimento nel caso in cui servisse.

label for l'etichetta che identifica il campo (parere).

input type="text" id="parere" size="20" un campo di tipo testo (text) con id parere (lo sesso specificato in label for) size 20 sono le dimensioni del campo a video che in questo caso occupa 20 caratteri.

input type="submit" value="Invia" un pulsante di spedizione (submit) con scritta (value) invio.

input type="reset" value="Cancella" un pulsante di tipo annulla (reset) con scritta (value) cancella.

Da notare che il campo parere e i due pulsanti invia e cancella sono stati tutti creati dallo stesso elemento input cambiando semplicemente il valore del suo attributo type. Per dovere di informazione questi i valori che è possibile assegnare, sono in ordine alfabetico: Checkbox, Button, File, Hidden, Image, Password, Radio, Reset, Submit, Text.

Soffermiamoci sul metodo di spedizione, nel nostro esempio sopra basterebbe inserire come action mailto:nostro_indirizzo@di_posta, lo stesso attributo visto per i links, ed il modulo sarebbe in grado di farci pervenire i dati inseriti adoperando il programma (client) di posta elettronica di chi lo compila. Questo è sicuramente il metodo più semplice perchè ogni visitatore ha sicuramente un suo programma di posta elettronica installato nel computer, non tutti però sono disposti a divulgare l'indirizzo e-mail, e questo per svariati motivi oltre che per la propria privacy.

Ci sono in rete script gratuiti in CGI ai quali poter inviare il modulo, questi script prendono il nome di sendmail o formmail e non necessitano di dati sensibili come l'indirizzo e-mail di chi lo compila. Purtroppo per ragioni di sicurezza, al fine di contenere anche lo SPAM sempre più dilagante, questa operazione è divenuta ormai possibile soltanto dallo stesso server sul quale si ha il proprio sito. Gli script in cgi provvedono a ricevere i dati, effettuano i controlli previsti e dopo averli formattati passano all'immediata spedizione (send-mail). Questo servizio è di solito compreso con lo spazio web dove si ha il proprio sito, verificatelo negli accessori o nei servizi messi a vostra disposizione.

Altro metodo, sempre più usato ultimamente, è sfruttare il linguaggio PHP o ASP per chi possiede uno spazio web che supporti questi linguaggi.

Mi rendo conto che per un principiante non sia molto semplice capire questo meccanismo, vi garantisco però che non è neppure troppo difficile, vediamo un paio di esempi che certamente chiariranno meglio ogni cosa, vediamo come farci inviare il form sopra adoperando entrambi i sistemi. Visto che ci siamo aggiungiamo un paio di campi e gli diamo un aspetto grafico per renderlo più professionale.

Spedizione tramite posta elettronica:

Abbiamo introdotto un altro attributo per l'elemento form, si tratta di enctype che specifica il tipo di contenuto usato per inoltrare il modulo, questo attributo ci garantisce una corretta interpretazione da parte del programma di posta elettronica che dovrà spedire i dati.

Questo il risultato a video facendo uso di una tabella per impaginare gli elementi del forum e della stessa tabella vista nella lezione precedente abbiamo usato lo style.

Decisamente più elegante... ah, queste tabelle, se non ci fossero andrebbero inventate.

Il modulo funziona, se volete provarlo fate pure ma non sappiamo a chi arriveranno i dati ho infatti dovuto alterare il mio indirizzo e-mail per ragioni di spam, ma questo è un rischio che chiunque abbia un sito web dovrà correre.

Se questo sistema vi soddisfa non resta che creare tutti i moduli che servono pronti per essere compilati e spediti... è possibile aggiungere anche l'oggetto (o subject) alla e-mail che vi consegnerà i dati che altrimenti avrebbe come oggetto un messaggio di questo genere: Modulo inviato da Microsoft Internet Explorer o Invio modulo da Firefox, dipende da quale browser di navigazione state adoperando.

Per aggiungere l'oggetto è sufficiente aggiungere ?subject all'elemento form:

L'altro sistema è invece quello di affidare il tutto ad un server CGI o ad uno script PHP o ASP, la struttura resterebbe la stessa ma al posto di "mailto:vostro_nome@server_di_posta.it" sarebbe inserito URL relativo o assoluto dello script cgi: "/cgi-bin/form-mail.pl" o "http:www.web-link.it/cgi-bin/form-mail.pl"

Ricordatevi che dovremo adoperare un indirizzo di CGI valido, ripeto: informatevi sulla home page del server dove avete il sito, vi assicuro che questo servizio è comune a molti degli spazi web offerti gratuitamente. Spesso non basta conoscere il solo indirizzo CGI, servono anche altri parametri ma sarà lo stesso fornitore del servizio a fornirveli.

Con questa lezione abbiamo imparato come si costruiscono i moduli, una delle cose più difficili per un principiante. Siamo quasi alla fine, non arrendetevi proprio adesso che manca davvero poco. Nella prossima lezione, vedremo i Frames, come gestire più pagine all'interno della stessa.