Il sito per imparare gratuitamente a fare pagine Web

Form o Moduli in HTML














Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Primi Passi in HTML 4.01 - Ver. 2.7.0 - Settembre 2011
 

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 però vorremo anche qualcosa di leggermente più complesso, più professionale, del tipo: come interagire con i nostri visitatori per conoscerli o per sapere cosa ne pensano del nostro lavoro?. Per fare questo ci si deve costruire un Modulo o Form

I forms, possono essere utilizzati per svariate forme di comunicazione, adoperati da soli, cioè con i soli elementi offerti da html hanno forse delle limitazioni. Se associati ad un qualsiasi linguaggio di scripting (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 più o meno grandi per raccogliere commenti e descrizioni, 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 poi arricchirlo di tutti gli elementi che si renderanno necessari.

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 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:

<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
</form>

e questo il risultato a video:

Inserisci il tuo nome:

Potete anche inserire il vostro nome, di fatto non servirà a nulla in quanto per funzionare correttamente al modulo mancano due cose: il pulsante per l'invio e le specifiche relative a dove 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.

Adesso il nostro listato è questo:

<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
<input type="Submit" value="invia">
</form>

 Questo il risultato a video:

Inserisci il tuo nome:   


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 appena raccolti 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 qualche tempo per ragioni di sicurezza e al fine di contenere lo SPAM questa operazione è divenuta ormai possibile soltanto col proprio server sul quale si ha il sito.

Gli script in cgi provvedono a ricevere i dati, effettuare dei controlli e dopo averli formattati passano all'immediata spedizione (send-mail), cioè si fa uso di un servizio semplicemente richiamandolo e questo è, come ho appena detto, di solito compreso con lo spazio web dove si ha il proprio sito web. Verificatelo negli accessori o nei servizi offerti dal vostro gestore, è probabile trovarlo sotto la voce di formmail o sendmail.

Questo Formail offre la possibilità di ricevere i dati provenienti dal vostro form e li inoltra sulla casella postale da voi specificata, con il vantaggio di inviarvi tutti i dati opportunamente ordinati e senza obbligare chi compila il modulo a dover inserire la propria 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 non sia molto semplice capire questo meccanismo ma vi garantisco che non è neppure troppo difficile :)

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

I metodi per ricevere un form sono almeno due:

1) inoltrando il tutto al server CGI (quando questo è conosciuto) o ad uno script in php, asp ecc.ecc..

2) inoltrando il tutto usando la propria casella postale.

Vantaggi e svantaggi dei due metodi:

1) Il server CGI o script in php asp è di sicuro il sistema migliore, abbiamo detto che 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 e alla formattazione dei dati prima di recapitarli all'indirizzo e-mail. Gli script offrono controlli sui dati introdotti ed inviano anche diverse informazioni quali: l'ora, il giorno, l'URL del mittente.

2) La propria casella postale che è possibile utilizzare immediatamente non dovendo infatti conoscere altri dati oltre a quello, di contro c'è che si possono ricevere i moduli soltanto se chi li invia è disposto ad adoperare il proprio indirizzo di posta elettronica, è infatti 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 sopra composto da un solo campo adoperando entrambi i sistemi. Dovremo fare uso dei due attributi spiegati all'inizio di questa lezione e cioè: Method ed Action

Per spedirlo tramite posta elettronica:

<form method="post" action="mailto:[email protected]" enctype="text/plain">

Tuo nome: <input type="Text" name="tuo nome">

giudizio: <input type="Text" name="giudizio">

<input type="Submit" value="invia">

</form>

Questo il risultato a video:

Il tuo giudizio su questa rubrica:

Tuo nome:
giudizio:
 

Facendo uso di una tabella con border=0, l'abbiamo imparato nella lezione precedente, è stato possibile dare al form un aspetto molto più ordinato, oserei dire quasi professionale :-)

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

Se inserite il vostro indirizzo email vi sarà recapitato in mail-box, in questo formato:

tuo nome=dati inseriti
giudizio=dati inseriti

Se questo sistema vi soddisfa non vi resta che crearvi tutti i moduli che volete e farveli spedire... è possibile aggiungere anche il titolo o subject alla mail che vi consegnerà i dati del modulo, notate l'aggiunta di ?subject all'elemento form:

<form method="post" action="mailto:[email protected]?subject=dalla lezione 8 di primi passi" enctype="text/plain" name="mio_form">

Tuo nome: <input type="Text" name="tuo nome">

giudizio: <input type="Text" name="giudizio">

<input type="Submit" value="invia">

</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. Vi assicuro che 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.



Andrea Bianchi