FORM IN HTML

I Moduli o Forms permettono di interagire con i visitatori del proprio sito offrendo loro la possibilità di immettere, o richiedere, informazioni tramite semplici caselle di testo, in alcuni casi menù a scorrimento, radiocomandi, caselle di tipo "spunta" ed altro ancora. Utilissimi, per non dire indispensabili, nella raccolta di dati sotto forma di questionari. 

Il modulo per funzionare al meglio ha bisogno di un'ulteriore elaborazione da parte di un linguaggio di programmazione, il solo HTML infatti si limita ad inviare il tutto in modo spartano richiamando il programma di posta elettronica (client) installato sul PC dell'utente: Outlook express o Thunderbird, tanto per citare due dei più famosi e gratuiti client di posta. 

Non tutti però hanno installato e configurato nel proprio PC un client di posta, o non sempre è possibile usarlo, immaginiamo per esempio chi si collega dall'ufficio, da casa di un amico o da un internet point dove non è possibile adoperare il proprio programma installato sul proprio PC.

Per questo ed altri motivi conviene, laddove sia fattibile, affidarsi ad uno script installato e configurato nel proprio spazio web.

Uno dei più famosi è FormMail di Andrea Matta, reperibile gratuitamente su questo link.

http://www.scriptarchive.com/formmail.html

In Alternativa ci si può affidare ad uno dei linguaggi lato server: PHP o ASP oppure ad uno dei servizi di sendmail che di solito lo stesso fornitore di spazio web offre ai propri clienti.

Qualcuno si starà chiedendo perchè mai sia tutto così complicato, perchè lo spam, spazzatura, che ogni giorno raggiunge milioni di utenti è talmente frequente e fastidioso che tutti i vari server free che offrivano un sendmail gratuito hanno sospeso questo servizio o lo hanno limitato ai soli clienti.

In ogni caso, che si decida di usare il proprio client di posta, un linguaggio lato server o un servizio già pronto in rete, quanto descritto sotto a proposito dei moduli resta valido sempre.

Elemento Form

L'elemento <form> serve per creare un modulo input per l'inserimento dati. In un documento html possono esserci più moduli ma questi dovranno essere tutti indipendenti fra di loro, nel senso che il tag <form> non può essere annidato (un modulo all'interno di un altro modulo) come per le tabelle o per altri tags di html. L'elemento form necessita di alcuni attributi per funzionare: action, method edenctype e necessita del suo elemento di chiusura </form>

Elemento action

L'attributo action è l'azione da compiere nel momento dell'invio, di solito un URL che specifica la locazione del file o dello script al quale vengono inviati i dati del modulo, può essere anche un indirizzo di posta elettronica nel caso in cui i dati debbano essere inviati tramite il client di posta di chi lo compila. Se manca l'attributo action viene assunto per default lo stesso URL in cui si trova il modulo.

 

Se l'attributo di azione è omesso, l'azione viene impostata sulla pagina corrente.

Elemento method

Quando utilizzare GET?

Il metodo predefinito per la trasmissione dei dati del modulo è GET.

Tuttavia, quando viene utilizzato GET, i dati del modulo inviati saranno visibili nel campo dell'indirizzo della pagina :

/action_page.php?nome=Mickey&cognome=Mouse

Nota: GET non deve essere utilizzato quando si inviano informazioni sensibili! GET è più adatto per dati brevi e non sensibili, in quanto ha anche limitazioni di dimensioni.

Quando utilizzare POST?

Utilizza sempre POST se i dati del modulo contengono dati sensibili o personali. Il metodo POST non visualizza i dati del modulo inviato nel campo dell'indirizzo della pagina.

POST non ha limitazioni di dimensioni e può essere utilizzato per inviare grandi quantità di dati.

Dopo aver scritto il codice precedente vedremo il seguente FORM con l'attributo action:

Elemento INPUT

L'attributo method specifica il metodo per accedere all'URL dichiarato in action, due le possibilità:post o get. Il metodo get viene preferito per quei moduli che non necessitano di elaborazioni esterne. Per tutti gli altri casi si adopera post

L' elemento <input> è l'elemento più importante dell'elemento. L'elemento <input> può essere visualizzato in diversi modi, a seconda dell'attributo di tipo .

Ecco alcuni esempi:

 ESCAPE='HTML'

Elemento TEXT

Esempio:

Elemento INPUT dei pulsanti di tipo radio

Esempio:

Da notare che l’opzione maschio è già selezionata per default in quanto abbiamo inserito l’attributo checked all’interno del tag INPUT.

Il pulsante INVIO

Questo è il modo in cui il codice HTML sopra visualizzato verrà visualizzato in un browser:

Raggruppare i dati di forma con fieldset

Il Form precedente può essere anche racchiuso dentro il tag table, in questo modo:

Ed avere il seguente oggetto:

Form action con mailto

In questo esempio vediamo come il tasto invio ha un'azione che apre la posta elettronica con l'istruzione seguente inserita nel form:

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

l'attributo action="mailto:[email protected]" aprirà la posta elettronica installata nel nostro computer

l'attributo enctype="text/plain" vuol dire che stiamo inviando sol un testo 

metdhod="post" vuol dire che stiamo utilizzando il metodo visibile all'utente.

vediamo l'esempio completo;ediamo l'esempio completo

Se apriamo il file sul browser google avremo la seguente videata.

Se clicchiamo sul tasto invio, dopo aver riempito il campi di testo Nome con Mario, il campo di testo Cognome con Rossi e il campo di testo data con 2/12/99, avremo l'apertura della posta elettronica, come nella seguente immagine.

Se aggiungiamo dopo l'ndirizzo e-mail il punto interrogativo ? con la scritta subject=messaggio, e riempiamo gli spazi vuoti con%20, possiamo inviare una email con i nostri dati con l'oggetto del messaggio già precompilato. L'istruzione racchiusa tra i due tag è:

form action="mailto:[email protected]?subject=Ti %20invio%20 questo%20 messaggio%20per%20 accettare%20il%20lavoro%20proposto"  enctype="text/plain" method="post"