I Moduli o Forms

Nelle lezioni precedenti abbiamo imparato molto, almeno questo voglio credere e sperare 🙂

Dovremo essere in grado di creare e gestire un sito, magari semplice ma comunque un sito tutto nostro e al quale non manca assolutamente nulla.

Adesso vorremo anche qualcosa di leggermente più complesso, più professionale, tipo come interagire con i nostri visitatori per conoscerli o per sapere cosa ne pensano del nostro lavoro. Per fare questo si deve costruire un Modulo o Form per la raccolta dati.

I forms, possono essere utilizzati per svariate forme di comunicazione. Adoperati col solo html hanno forse delle limitazioni. Se associati ad un qualsiasi linguaggio di programmazione (javascript per esempio), acquisiscono una potenza incredibile, sono in grado di ricevere ed inviare dati a/da pagine diverse, eseguire operazioni matematiche, effettuare controlli, anche di tipo piuttosto complesso, e molto altro ancora.

Un modulo (form) può essere costituito da diversi elementi quali: caselle per introduzione testo, menù a tendina dai quali poter effettuare delle scelte, caselle di tipo spunta, caselle per selezioni singole o multiple, aree testo più o meno grandi per raccogliere commenti, caselle nascoste per password, pulsanti di invio, pulsanti di annullamento.

Potete vedere tutti questi elementi sulla mia guida html, in questa lezione ci limiteremo all’essenziale per poter creare e gestire un modulo. Una volta capita la tecnica potrete arricchirlo di tutti gli altri elementi che vi necessiteranno.

Vediamo come creare il più semplice:

<form>

Questo è l’elemento che dichiara il modulo, da solo dice poco o niente, necessita di alcuni attributi, almeno due: action e metod e volendo anche di un terzo opzionale: name che servono rispettivamente:

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

method per dichiarare con quale dei due possibili metodi: POST e GET si devono trasmettere i dati.

name Il nome che preferite assegnare al modulo, diventa opzionale in HTML ma indispensabile se si dovesse far uso di JavaScript o altro linguaggio di programmazione ad oggetti.

I campi che compongono un modulo si ottengono con l’elemento <input> al quale vanno assegnati alcuni parametri quali:

type e sono molti i tipi associabili, noi adopereremo Text
name Il nome del campo che raccoglie il dato introdotto.

Questo il listato:

e questo il risultato a video:

Provate ad inserire il vostro nome, di fatto non servirà a nulla perchè per funzionare correttamente al modulo mancano due cose: il pulsante per l’invio e le specifiche della destinazione alla quale inviarlo.

Per il pulsante di invio si procede creando un altro elemento <input> questa volta però metteremo come Type l’attributo Submit che serve per creare il pulsante di invio, aggiungeremo anche Value per la scritta che dovrà comparire sul pulsante, in questo caso “invia”.

Adesso il nostro listato è questo:

 Questo il risultato a video:

Se provate ad introdurre il vostro nome e a premere il pulsante “invia” vi accorgerete che non succederà ancora nulla, o quasi…
Il modulo infatti pur essendo funzionante non sa ancora a chi inviare i dati e neppure in quale formato.

Di solito un form lo si invia ad uno script CGI, uno dei tanti messi a disposizione dai vari server della rete, il quale raccoglie i dati, li verifica e li spedisce all’indirizzo di posta specificato. Da molto tempo però, per ragioni di sicurezza o al fine di contenere lo SPAM, questa operazione è divenuta possibile soltanto col server sul quale si ha il proprio sito.

Gli script in cgi provvedono a ricevere i dati dal modulo, effettuano dei controlli e dopo averli formattati passano all’immediata spedizione (send-mail). In pratica si deve solo richiamare l’indirizzo di uno script e questo provvederà a tutto il resto in maniera del tutto automatica, script che di solito è compreso con lo spazio web dove si ha il proprio sito. Verificate nei servizi offerti dal vostro gestore, è probabile trovarlo sotto la voce di formmail o sendmail.

Questo Formail riceve i dati provenienti dal form e li inoltra sulla vostra casella di posta con il vantaggio di inviarvi i dati ben ordinati e senza obbligare chi compila il modulo a dover inserire il proprio indirizzo e-mail. Se da una parte favorisce i messaggi anonimi dall’altra incentiva i commenti anche di coloro che non amano lasciare il proprio indirizzo e-mail in giro per la rete.

Mi rendo conto che per un principiante questo argomento non sia molto semplice ma vi garantisco che non è neppure troppo complicato 🙂

Vediamo un paio di esempi che certamente chiariranno meglio ogni cosa:

I metodi per spedire e ricevere un form sono due:

1) inoltrando il tutto al server CGI (quando questo è conosciuto) o ad una pagina che faccia uso di script in php, asp ecc. ecc.

2) inoltrando il tutto al programma di posta del visitatore il quale darà poi conferma per la spedizione usando il proprio indirizzo e-mail.

Vantaggi e svantaggi dei due metodi:

1) Il server CGI o script in php, asp è di sicuro il sistema migliore, permette l’invio del modulo anche da parte di chi non ha una casella postale o da chi molto più semplicemente non vuole farne uso per non renderla pubblica. Questo sistema provvede all’ordinamento dei dati prima di spedirli all’indirizzo e-mail. Gli script offrono anche il controllo sui dati introdotti e volendo possono inviare diverse informazioni quali: l’ora, il giorno, l’URL dal quale è stato spedito.

2) Il proprio indirizzo e-mail utilizzabile immediatamente non dovendo conoscere altri dati, di contro c’è che si possono ricevere i moduli dati soltanto se chi li compila è disposto ad adoperare il proprio programma di posta elettronica, è infatti solo grazie a questo che il modulo potrà essere spedito e di conseguenza recapitato. I dati sono meno ordinati ma comunque comprensibili.

Vediamo come farci inviare il form dell’esempio sopra adoperando il sistema 2). Dovremo fare uso dei due attributi spiegati all’inizio di questa lezione e cioè: Method ed Action

Per spedirlo tramite posta elettronica:

Questo il risultato a video:

Facendo uso di una tabella, l’abbiamo imparato nelle lezioni precedenti, è stato possibile dare al form un aspetto più ordinato e colorato.

Se volete provarlo funziona ma non sappiamo a chi arriveranno i dati, ho dovuto infatti togliere il mio vero indirizzo e-mail per ragioni di spam, ma questo è un rischio che chiunque abbia un sito web prima o poi dovrà correre.

Se deciderete di usare questo sistema vi sarà recapitato in mail-box, in questo formato:

Se va bene non vi resta che crearvi tutti i moduli che volete e farveli spedire… è possibile aggiungere anche il titolo (subject) alla mail che vi consegnerà i dati, notate l’aggiunta di ?subject all’elemento form:

L’altro sistema invece è quello di affidare il tutto al server CGI.

La struttura resta la stessa ma al posto di:

action=”mailto:[email protected]”

Dovremo adoperare un indirizzo di CGI valido, ripeto: informatevi sulla home page del fornitore del vostro spazio web, gratuito o a pagamento che sia, questo servizio è comune a molti degli spazi web offerti anche gratuitamente.

Con questa lezione abbiamo imparato anche a cosa servono a come si costruiscono i moduli, una delle cose più difficili per un principiante. Siamo quasi alla fine, non arrendetevi proprio adesso, ormai non resta molto.

Nella prossima lezione, vedremo come inserire la musica, gli script e le applet.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.