Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

28b. Form Action via mail e CGI

Il layout é sufficiente! Guardiamo alcuni form

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

Nota: Se non possiedi il documento di lavoro dalla precedente lezione, scaricane una copia ora.

Nella nostra precedente elezione abbiamo creato il codice HTML per mettere degli elementi form nella nostra web page. Ora gli facciamo fare qualcosa.

I web form furono progettati per permettere ai surfer di inviare contenuti da una web page ad uno speciale programma su un web server, che avrebbe dovuto farci qualcosa e poi tornare un messaggio alla persona che l'aveva mandato. Quest'intera transazione ha luogo in una manciata di secondi o anche meno! se vuoi fornire questo tipo di interazione in una web page, questa deve comunicare con questi particolari programmi, tipicamente chiamati CGI, che sta per Common Gateway Interface. Per maggiori informazioni, vedi la panoramica di CGI di NSCA.

Per usare questi programmi, devi per forza scriverli in un linguaggio di programmazione, o, almeno, avere accesso ad un web server che li fornisca gia' attivi. Piu' avanti in questa lezione, ti mostreremo come far funzionare i form con questo tipo di programmi, ma prima ti dobbiamo mostrare un modo alternativo per acquisire informazioni da un form di una web page... attraverso le antiquate e-mail.

Puoi aggiungere del codice al form della tua web page in modo che questo spedisca per e-mail i dati che normalmente spedirebbe attraverso la Rete ad un programma CGI. Per fare questo, modifica in questo modo il tag FORM che hai creato nell'ultima lezione:

  <form method="post" action="mailto:me@myemail.bigu.edu">
Abbiamo ora assegnato l'"action" di un form il compito di prendere tutti i suoi dati e di spedirli ad un qualsiasi email address sia fornito.

Ma cosa ne risulta? Non sembra molto piacevole! Se aggiungiamo questo al form Report che abbiamo creato nell'ultima lezione, otterremo un messaggio email che contiene qualcosa simile a questo:

 

Date: Mon, 21 Dec 1998 15:44:18 -0700
From: alan levine <levine@maricopa.edu>
Subject: Form posted from Mozilla
To: me@myemail.bigu.edu
MIME-version: 1.0
X-Accept-Language: English, en

name=Alan+Levine&email=levine%40maricopa.edu&pass=ilovehtml&vname=Big+Volcano
&vlat=142+N&vlong=28+S&vtype=Phreato-Plinian&active=active&vdate=April+1%2C+1999
¬e1=danger+risk¬e3=observed&info=Big+Volcano+is+located+on+the+edge+of+a+
huge+mountain+range.+It+is+the+part+of+the+local+legends+of+the+original+inhabitants
+of+this+region.&ref1=http%3A%2F%2Fwww.abc.com&ref2=http%3A%2F%2F&ref3=http%3A%2F%2F

Questo esempio dovrebbe darti un'idea di cosa fa un web form con tutto il testo che ci inserisci e quando fai click sul bottone-- li attacca tutti in un unica, lunghissima stringa di testo. Se osservi piu' attentamente, puoi vedere che la formattazione e':
element1_name=element1_value&element2_name=element2_value... &elementN_name=elementN_value
in modo che ogni elemento del form (campi,radio button, text area) manda il suo nome uguale ed il suo valore, e questi sono stretti insieme e connessi da un simbolo di "&" . Inoltre, tutti gli spazi vuoti all'interno dell'input sono tradotti con simboli "+" ("Alan Levine" digitato nel campo di testo diventa "Alan+Levine"), ed altri simboli come ":", "/", sono convertiti in cose tipo "%3A" e "%2F".

Questo e' voluto perche' fornisce al programma CGI del computer un formato utile nell'estrazione, nella valutazione del contenuto, e nell'attivita' di risposta.

Anche se e' possibile usare questa tecnica nel tuo web form personale, i risultati non sono molto utili per lavorarci sopra. C'e' un'altra opzione che si puo' usare, in ogni caso, per migliorare la formattazione con cui i dati del form vengono spediti via email, modificando ancora in questo modo il tag FORM:

  <form method="post" action="mailto:me@myemail.bigu.edu"  enctype="text/plain" >
Il tag enctype= che sta per encoding typeimpartisce al web browser l'ordine di inviare dati del form non come abbiamo visto prima, ma come un semplice elenco di testo. Per esempio, aggiungendo questo al nostro report form per il Volcano Web site, il messaggio email ricevuto ora assomiglia a:

 
Date: Mon, 21 Dec 1998 15:44:18 -0700
From: alan levine <levine@maricopa.edu>
Subject: Form posted from Mozilla
To: me@myemail.bigu.edu
MIME-version: 1.0
X-Accept-Language: English, en

name=Alan Levine
email=levine@maricopa.edu
pass=ilovehtml
vname=Big Volcano
vlat=142 N
vlong=28 S
vtype=Phreato-Plinian
active=active
vdate=April 1, 1999
note1=danger risk
note2=historic eruptions
note3=observed
info=Big Volcano is dangerous! It has killed many people. 
ref1=http://www.bigu.edu/volcanoes
ref2=http://www.usgs.gov/
ref3=http://www.volcano.nodak.edu/

che ora e' un form molto piu' leggibile.

Mandare dati di un form attraverso le email puo' essere utile se non si ha accesso a script CGI o ad un web server, ma esso fornisce solo interazioni limitate; i dati del form possono essere spediti a te, ma la persona che li invia non riceve nessun feedback, nessuna conferma dell'avvenuto invio.

Ora modificheremo il report form in modo che sia processato da uno script CGI. Dal momento che non tutti hanno la possibilita' di far girare questi script, noi l'abbiamo scritto per te e tu lo puoi far girare direttamente dal nostro web server.

Questo script eseguira' due funzioni per il nostro Volcano Web Report Form. Esso da' alla persona che sta usando il form la facolta' di scegliere se spedire il suo report al suo istruttore via e-mail o se visualizzare il report come una web page (che puo' essere stampata).

Il form avra' una nuova caratteristica che ci permettera' di implementare nel codice HTML un altro elemento per il web form (che non sara' visibile a video) dove noi potremo mandare anche l'email address per l'istruttore, permettendo ad esso di essere diverso su web page diverse.

Elementi di Input Nascosti (type="hidden")

sono usati per mandare form data dal codice HTML senza che appaiano nel layout della web page.

sample web page
Un elementi di input nascosto chiamato "snack" col valore di "cheese puffs"
<input type="hidden" name="snack" value="cheese puffs">

Come [non] puoi vedere, l'elemento scritto qui (fidati di noi, e' veramente scritto qui) non viene visualizzato, ma contiene dati che e' possibile mandare col form.

  1. Apri il file proj_report.html nel tuo text editor.
  2. Modifica cosi' il tag <form> all'inizio del documento:
    <form method="post" action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/report.pl">
    Il tag action contiene l'URL per lo script CGI sul MCLI web server che eseguira' i compiti per cui l'abbiamo programmato.

    Lo script e' programmato in un linguaggio chiamato Perl (Practial Extraction and Report Language), descritto dal suo creatore Larry Wall come "un linguaggio interpretato ottimizzato per la scansione di file di testo arbitrari, l'estrazione d'informazione da questi file di testo, e la stampa di rapporti basati su queste informazioni. E' un linguaggio valido anche per molti altri compiti di management del sistema. Il linguaggio ha come obbiettivo la praticita' (facile da usare, efficiente, completo) piuttosto che bello (contenuto, elegante, minimalista)." Perl e' uno degli strumenti di punta, ma assolutamente non l'unico modo con cui programmare interazioni da web form.

    Per lo scopo di questo corso, e spesso per molti strumenti di sviluppo web, non hai bisogno di capire come funziona per usarlo! Se ti interessa noi forniamo il codice sorgente perl, ma non ne hai bisogno per portare avanti questa lezione.

  3. In seguito modificheremo la parte inferiore del nostro web form per fornire l'opzione l'invio attraverso e-mail o per la stampa del rapporto. Sotto la riga della tabella che contiene l'etichetta per invia rapporto e sopra la riga della tabella che contiene i bottoni Invia e Cancella, aggiungi questa nuova riga:
    <tr>
    <td valign=top align=right><tt><b>format</b></td>
    <td valign=top>
    <input type="checkbox" name="rep_email" value="y"> spedisci via e-mail<br>
    <input type="checkbox" name="rep_web" value="y" checked>
    genera una web page per anteprima/stampa<br>
    <font size=2 color=#000099>
    seleziona opzione per l'inoltro</font>
    
    <!-- cambia il valore per far spedire il rapporto ad un indirizzo reale-->
    <input type="hidden" name="instructor" value="lava@pele.bigu.edu">
    </td>
    </tr>
    Abbiamo aggiunto 2 nuovi checkboxe; la prima dice che e' lo script per mandare il rapporto via e-mail e la seconda (di default) visualizzera' il rapporto come web page. L'ultimo tag del form e' un elemento nascosto chiamato "instructor". Il valore di questo tag e' l'indirizzo e-mail a cui il rapporto verra' inviato. Se vuoi vedere come funziona, dovresti inserire il tuo indirizzo e-mail personale in questo tag.
  4. Salva ed Aggiorna la pagina proj.html nel tuo web browser. Prova ora il form e vedi cosa succede quando scegli le diverse opzioni. (Cosa succede se non se ne seleziona nessuna?)

Ancora su Form e CGI

Sebbene funzionale, il form che abbiamo creato e' un esempio veramente basilare di quello che si puo' fare con gli script CGI. Avremmo potuto aggiungere caratteristiche che permettessero ai rapporti inviati di essere scritti come file presso il web server, in modo che anche altre persone potessero vederli,avremmo potuto scegliere i diversi input da un database di informazioni note sui vulcani, o molti altri compiti.

Scrivere CGI script non e' esageratamente complesso, ma abbastanza da essere al di la' dello scopo di questo tutorial. Generalmente questi script possono essere personalizzati in modo tale da eseguire almeno qualsiasi cosa ti venga in mente! Ma devi avere alcune conoscenze di un linguaggio discripting/programmazione. Puoi trovare molte fonti presso la nostra pagina dei riferimenti.

Ma per adesso, creeremo un'altra pagina che usa uno script CGI per eseguire dei calcoli. Aggiungendo ancora alla nostra pagina Volcano Web Project, creeremo una web page che abbia uno strumento per la stima della velocita' di diverse colate vulcaniche.

  1. Per prima cosa dobbiamo modificare il frame di sinistra della nostra pagina Progetti per fornire un nuovo link. Apri il file proj_menu.html nel text editor.
  2. Prima del link informazioni creato per il the Report Form, aggiungi questo codice:
    <A HREF="proj_calc.html">
    <font size=+2 face="arial,helvetica">C</font>ALCOLATORE...</A><br>
    strumento per la stima della velocita' colate vulcaniche
    <p>
  3. Salva questo documento
  4. Per la nostra nuova page, avremo bisogno di un'immagine che mostri un diagramma per presentare il concetto per questa pagina di calcolo. Puoi prendere l'immagine dal Centro Per Il Download delle Immagini Lezione 28b e dovresti salvarla nella folder/directory pictures.

  5. Crea un nuovo file HTML nel tuo text editor e salvalo come proj_calc.html
  6. Scrivi questo codice nel nuovo documento:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <html>
    <head></head>
    <BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
    <h2 align=center>Calcoli Semplici</h2>
    <h3>Equazione Cinetica ed Energie Potenziali</h3>
    Per meglio comprendere i vari tipi di vulcani, possiamo usare un po' di matematica e le leggi della fisica. In un'eruzione, puoi portare un "blocco" di materiale vulcanico da un punto in cui ha un'energia potenziale massima ed eguagliarlo ad un altro punto dove e' massima l'energia cinetica: 
    <p>
    <center>
    <img src="../pictures/hb_graph.gif" alt="energy diagram" width="342" height="199">
    </center>
    <p>
    dove <font color="red"><b>m</b></font> e' la massa del "blocco", <font color="red"><b>g</b></font>  e' la costante di accelerazione gravitazionale, <font color="red"><b>h</b></font> e' l'altezza dove tutta l'energia e' di tipo potenziale, e <font
    color="red"><b>v</b></font> e' la velocita' il cui l'energia cinetica e' al massimo. 
    
    <p>
    Assumendo la conservazione dell'energia, con un po' di algebra possiamo scrivere questa relazione come: 
    <P>
    <center>
    <font size=+3><tt> 2 g h = v<sup>2</sup></tt></font>
    </center>
    <p>
    Questo significa che se sappiamo l'altezza a cui il flusso vulcanico incontra un ostacolo, possiamo stimare la sua massima velocita' allo stesso punto prima o dopo l'ostacolo. Questa tecnica fu usata per stimare il flusso massimo frana in Iran che interesso 600 metri di collina come un'eruzione vulcanica in Giappone che avanzo per 500 metri oltre un passo montano. Le stime sono supportate dall'osservazione degli eventi. 
    
    <h3>Equazione Cinetica ed Energie Potenziali</h3>
    Usa il form sottostante per calcolare la stima delle massime velocita' delle eruzioni vulcaniche di cui puoi fornire l'estensione del flusso. (per grandi eruzioni <a href="term.html" target="_top">Pliniane</a>,
    alcuni ricercatori usano l'altezza massima delle nubi eruttive) 
    <p>
    <center>
    <form method=post action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/energy.pl">
    <table border=0 cellpadding=6 cellspacing=2>
    <tr>
    <td valign=top align=right><tt><b>altezza massima</b></td>
    <td valign=top><input type="text" name="height" size="10"> 
    </td>
    </tr>
    
    <tr>
    <td valign=top align=right><tt><b>unita'</b></td>
    <td valign=top>
    <input type="radio" name="units" value="meters" checked> metri
    <input type="radio" name="units" value="feet"> piedi
    </td>
    </tr>
    
    <tr>
    <td colspan=2 align=center><input type="submit" value="calcola velocita'">
    </td>
    </table>
    
    </form>
    </center>
    Nota che questo e' un modo molto generale per considerare le eruzioni vulcaniche; per esempio, non tiene conto delle perdite di energia dovute all'attrito e neppure la diversa meccanica dello scorrimento dei fluidi. In ogni caso, e' risultato effettivamente utile nel confronto tra vulcani diversi.
    </body>
    </html>
    NOTA: La maggior parte di questo documento e' HTML a cui dovresti essere familiare, preso dalla lezione precedente, usato per descrivere il form di calcolo in fondo alla pagina. Il tag <form> fa riferimento ad un altro perl script che abbiamo scritto per te. Gli input del form sono il numero del campo di testo che rappresenta l'altezza (H) e le opzioni per il radio button per le sue unita' di lunghezza.

    Lo script CGI controlla l'input (assicurandosi che sia un numero positivo) e torna una risposta in un'unita' appropriata. (vedi il codice sorgente CGI)

  7. Salva ed Aggiorna la pagina proj.html nel tuo web browser. Prova il nuovo form di calcolo.

Controlla il Tuo Lavoro

Confronta la tua pagina web con un esempio di come il documento dovrebbe apparire. Se la tua pagina web fosse diversa dall'esempio, o se i link non dovessero funzionare correttamente, controlla il testo che hai digitato nell'editor di testo

Verifica

Argomenti di verifica per questa lezione:
  1. Come puoi fare si che un form ti invii i suoi dati per e-mail?
  2. Come sono i dati del form?
  3. Come si fa a farsi spedire i dati del form in un formato comprensibile?
  4. Come si scrive il tag per mandare i dati ad un CGI script?
  5. Qual'e' il codice HTML per un elemento del form nascosto? Come potresti usarlo?

Pratica Indipendente

Vedi se riesci a scrivere un web form che abbia gli stessi elementi del nostro ma progettato un una pagina dall'aspetto diverso-- riesci a far andare il form?

Prossimamente....

Interazioni web page /form con JavaScript.
VAI A.... | Indice Delle Lezioni | indietro: "Form: Intro" | avanti: "Form Action con JavaScript" |

Writing HTML: Lezione 28b: Impostare Form
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The Internet Connection at MCLI is Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing HTML