Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

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



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

I Moduli o Forms.

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

Un modulo (form) può essere costituito da diversi elementi quali: caselle per l'introduzione dei dati, menù a tendina per effettuare scelte preimpostate, caselle di selezione multipla del tipo spunta, radio caselle per selezioni singole o multiple, aree di testo più o meno ampie per raccogliere commenti e descrizioni, caselle nascoste per password, pulsanti di invio, pulsanti di annullamento e di 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 gli elementi che riterrete utili al vostro fabbisogno.

I forms possono essere utilizzati per svariate forme di comunicazione, il solo codice html ha però molte 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 come: php, asp, javascript, grazie ai 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 sono 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 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.

<body>
        <form action="pagina.html" method="post" id="miomodulo">
        <label for="parere">Inserisci il tuo parere:</label>
        <input type="text" id="parere" size="20" />
        <input type="submit" value="Invia" /><input type="reset" value="Cancella" />
        </form>
</body>

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 invio (value).

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

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 ad input sono, in ordine alfabetico: checkbox, button, file, hidden, image, password, radio, reset, submit, text.

Soffermiamoci sul metodo di spedizione, nel nostro esempio riportato 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 di posta elettronica (client) 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 il proprio indirizzo e-mail, e questo per svariati motivi oltre che per tutelare la propria privacy.

Ci sono allora 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ò, per ragioni di sicurezza, al fine di contenere anche lo SPAM sempre più dilagante, questa possibilità è divenuta possibile soltanto dallo stesso server sul quale si ha il proprio sito.

Gli script in cgi provvedono a ricevere i dati, effettuano su di essi 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 dallo stesso fornitore di spazio web.

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

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

Spedizione tramite posta elettronica:

<body>
<form action="mailto:vostro_nome@server_di_posta.it" method="post" id="miomodulo" enctype="text/plain">

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" size="20" />

<label for="cognome">Cognome:</label>
<input type="text" id="cognome" name="cognome" size="20" />

<label for="parere">Inserisci il tuo parere:</label>
<input type="text" id="parere" name="parere" size="20" />

<input type="submit" value="Invia" />
<input type="reset" value="Cancella" />
</form>
</body>

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 sotto il risultato a video facendo uso di una tabella per impaginare gli elementi del forum, si tratta della stessa tabella vista nella lezione precedente della quale abbiamo usato lo style.

Modulo per ricevere dati e parere
Il modulo sarà inviato tramite posta elettronica

 

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 prima o poi.

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

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

<form action="mailto:vostro_nome@server_di_posta.it?subject=Quello che volete" enctype="text/plain" name="mio_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" viene 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 anche gratuitamente. Spesso non basta conoscere il solo indirizzo CGI, servono anche altri parametri ma sarà lo stesso fornitore del servizio a fornirveli insieme ad altre indicazioni per il loro buon funzionamento. Su questo link è possibile vedere il mio modulo dati che fa uso del server CGI ed un controllo inserimento dati affidato a javascript.

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.

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



Andrea Bianchi