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

28a. Impostare Form

Questa sarebbe tanto meglio peggio uguale se solo noi fossimo in grado di usare i form per aggiungere interattivita' per farmi sembrare figo per rendere piu' accattivante ogni pagina, in piu' tutti la smetteranno di li' al quando poi e

Obiettivi

Dopo questa lezione sarai in grado di:

Lezione

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

In questa lezione introdurremo gli elemnti basilari del web form che potresi usare nelle tue pagine. In pratica non faremo niente fino alla prossima lezione.

Un web page form e' definito con un set di tags <form>....</form> dove tutto cio' che sta dentro include l'HTML per codificare i diversi campi di testo, bottoni, e menu' a tendina che vengono usati per contenere possibilita' di scelta per l'utente. Puoi avere anche altri codici HTML all'interno del form che servono come etichette per i tuoi elementi form.

Come esempio, guarda al layout usato per la for pagina Writing HTML Alumni. Il form questa pagina include diversi elementi di input mentre i tag della tabella definiscono il loro layout.

La struttura base per la scrittura di un form e': 

  <form action="[url programma server]" method="GET/POST">
    :
    :
    (elementi form)
     :
 </form>
Parleremo ancore nella prossima lezione del significato delle opzioni nel tag <FORM>. Per ora pensa al valore per ACTION=... come a qualcosa che dice al browser l'allocazione di uno script o programma che processera' i dati inviati dal browser attraverso le selezioni nel form. I due valori per METHOD=..., POST o GET definiscono uno dei due modi con cui i dati dal form verranno mandati al programma che li processera'.

Pra rivedremo i diversi elementi che si possono usare. Tutti quelli contenuti all'interno dei tag <FORM> invieranno alcune informazioni sul loro contenuto oppure se sono stati o meno attivati del visitatore della pagina web. Ogni elemento include un "tipo" definito, un nome unico che tu gli fornisci, e quando i dati del form vengono inviati, ogni elemento manda il suo nome ed il suo stato corrente od il suo valore.

Elementi di Input Testuali (type="text")

... sono usati per creare un campo ad una sola riga in cui il visitatore puo' inserire del testo. La lunghezza di default e' 20 caratteri, e si possono creare campi a lunghezza diversa con l'opzione size. Puoi limitare il numero di caratteri col valore dell'opzione MAXLENGTH. I campi di testo saranno vuoti al momento del caricamento, se non si fornisce una stringa di testo iniziale per la sua opzione VALUE.

sample web page
Un campo di testo chiamato "text1" lungo 30 caratteri.
<input type="text" name="text1" size="30">

Un campo di testo chiamato "text2" lungo 30 caratteri ma che ne accetta solo 20.
<input type="text" name="text2" size="30" maxlength="20">

Un campo di testo chiamato "text3" lungo 40 caratteri con valore di default.
<input type="text" name="text3" size="40" value="Non siamo soli">

Elementi Inserimento Password (type="password")

... sono esattamenti gli stessi che per i testi, eccetto che quando il visitatore digita, si vedono gli asterischi al posto delle vere e proprie lettere. Il testo delle password viene scomposto durante la trasmissione e ricomposto quando i dati del form sono ricevuti dal server. Vedi la differenza tra lo scrivere nei campi che seguono e quelli nella precedente sezione.

sample web page
Un campo di testo chiamato "text1" lungo 30 caratteri.
<input type="password" name="pass1" size="30">

Un campo di testo chiamato "text2" lungo 30 caratteri ma che ne accetta solo 20.
<input type="password" name="pass2" size="30" maxlength="20">

Un campo di testo chiamato "text3" lungo 40 caratteri con valore di default.
<input type="password" name="pass3" size="40" value="Non siamo soli">

Elementi Inserimento Aree Testo (type="textarea")

.. sono campi di testo che hanno piu' di una riga e possono scorrere mentre il visitatore inseriresce altro testo. Le opzioni del tag definiscono la dimensione del campo in righe e colonne. Aggiungendo l'opzione WRAP=VIRTUAL, il testo digitato verra' automaticamente spezzato a destra. Puoi anche includere un testo predefinito da far apparire nel campo.

sample web page
Un campo textarea chiamato "comments" di 45 caratteri ed alto 6 righe.
<textarea name="comments" rows="6" cols="45" wrap="virtual">
la prima volta in cui vidi una web page, io pensai.... (continua)
</textarea>

Radio buttons (type="radio")

sono sets di bottoni connessi in modo che solo uno per volta possa essere selezionato; se premi un bottone, gli altri sono automaticamente de-selezionati. Un set di radio buttons e' definito fornendo loro lo stesso nome. Il valore mandato nel web form e' quello del radio button selezionato in ultimo. Aggiungendo l'opzione CHECKED, si specifica il bottone sottolineato al momento di caricamento della pagina.

sample web page
4 radio buttons con selezione di default
<input type="radio" name="food" value="hotdogs" checked> gli hotdogs sono il mio cibo preferito<br>
<input type="radio" name="food" value="hamburgers"> mi piacciono gli hamburgers<br>
<input type="radio" name="food" value="steak"> la bistecca e' saporita<br>
<input type="radio" name="food" value="beans"> i fagioli sono per i vegetariani<br>

gli hotdogs sono il mio cibo preferito
mi piacciono gli hamburgers
la bistecca e' saporita
i fagioli sono per i vegetariani

3 radio buttons senza selezione di default
<input type="radio" name="spread" value="ketsup"> ketsup<br>
<input type="radio" name="spread" value="mostarda"> mostarda<br>
<input type="radio" name="spread" value="mayo"> mayonnaise<br>
 ketsup
mostarda
mayonnaise

NOTA: Osserva come i due sets di radio buttons, una chiamata "food" e l'altra "spread" operano indipendentemente una dall'altra.

Check Boxes (type="checkbox")

sono simili ai radio buttons, ma non sono condizionati da altri bottoni, cosi' se ne possono selezionare piu' di uno per gruppo. Nota che ogni checkbox ha un nome univoco. Se il quadratino non e' contrassegnato, premendolo comparira' una X od un segno di spunta. Se era selezionato, premendo ancora, si rimuovera' il segno. Il valore inviato nel web form e' quello del checkbox selezionato, per gli altri il valore sara' vuoto. Aggiungendo l'opzione CHECKED ad uno dei bottoni del set, al caricamento, questo sara' gia' scelto.

sample web page
4 check boxes con selezioni di default
<input type="checkbox" name="food1" value="hotdogs" checked> gli hotdogs sono il mio cibo preferito<br>
<input type="checkbox" name="food2" value="hamburgers"> mi piacciono gli hamburgers<br>
<input type="checkbox" name="food3" value="steak" checked> la bistecca e' saporita<br>
<input type="checkbox" name="food4" value="beans"> i fagioli sono per i vegetariani<br>

gli hotdogs sono il mio cibo preferito
mi piacciono gli hamburgers
la bistecca e' saporita
i fagioli sono per i vegetariani

3 check boxes senza selezione di default
<input type="checkbox" name="spread1" value="ketsup"> ketsup<br>
<input type="checkbox" name="spread2" value="mostarda"> mostarda<br>
<input type="checkbox" name="spread3" value="mayo"> mayonnaise<br>
 ketsup
mostarda
mayonnaise

Menu Select (type="select")

... fornisce menu a tendina che permettono al visitatore di scegliere un elemento da una lista di possibilita'. Il tag <OPTION>...</OPTION> definisce il testo che e' visualizzato nel menu. Il valore dell'opzione selezionata per ultima e' tornata quando i dati del form sono inviati. Aggiungendo l'opzione CHECKED si indicate quale elemento e' selezionato al caricamento della pagina; se queste non viane fornito, il primo elemento e' quello di default.

sample web page
Un menu a tendina di 4 elementi con il terzo come valore iniziale
<select name="formaggi">
<option value="colby"> Colby dall'Ohio</option>
<option value="sharp"> Cheddar Piccante dall'Oregon</option>
<option value="swiss" selected> Formaggio Santo dalla Svizzera</option>
<option value="longhorn" > English Longhorn</option>
</select>


Invia e Cancella (type="submit" e type="reset")

... crea bottoni sul form. Il bottone Invia dice al browser di raccogliere insieme tutte le selezioni, i valori, i testi inseriti negli elementi del form e di spedirli tutti alla posizione indicata dalla parte ACTION del form tag. Il bottone Cancella reimposta il form al suo stato di default, come sembrava quando il visitatore e' arrivato per la prima volta alla pagina. L'opzione VALUE definisce la stringa di testo posizionata su questi bottoni.

sample web page
bottone Invia
<input type="submit" value="Invia ora questi form data!">

bottone Cancella
<input type="reset" value="Pulisci il web form">

NOTA: Per questa lezione abbiamo creato un semplice alert JavaScript che appare quando si prova il bottone Invia. Se hai inserito del testo o cambiato qualche selezione, il bottone Cancella li riportera' tutti al loro stato iniziale.

Ora creeremo un web page form che usi tutti questi elementi. Questa sara' una caratteristica addizionale della nostra parte progetti di Volcano Web. Lo scopo del form e' quello di fornire uno spazio per le persone che stanno realizzando i loro progetti per inviare i loro resoconti. Potremmo usarlo in diversi modi; puo' inviare il resoconto come email all'istruttore, puo' scrivere i dati del resoconto come file per il web server, oppure puo' generare una rapporto formattato come web page per lo studente che puo' essere poi stampato. Ci sono altre cose che si possono fare coi dati inviati da un web form e' questo non e' che un esempio.

Sperando che tu possa vedere i vantaggi dell'uso dei frames che abbiamo creato per quest'area nella lezione 26. Creeremo una nuova web page che visualizzera' il form nell'area principale e modificheremo il frame di sinistra che contiene il menu di scelta per aggiungere un link per la nostra nuova pagina.

  1. Apri il file proj_menu.html.
  2. Dopo il codice che contiene il link per per la pagina "Riferimenti", aggiungi: 
    <A HREF="proj_report.html">
<font size=+2 face="arial,helvetica">R</font>APPORTO...</A><br>
un form per inviarci il tuo resoconto
  3. Salva questo file HTML.
  4. Ora cominceremo a costruire la nuova pagina che conterra' il form. Crea un nuovo file nel tuo text editor e salvalo come proj_report.html, conservato nella stessa directory/folder degli altri tuoi documenti HTML.
  5. Per conoscere meglio le parti di questo documento, presenteremo una sezione alla volta. La prima parte del file contiene la parte "normale" del nostro file. Aggiungi questo al tuo nuovo file: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head></head>
<BODY BGCOLOR=#FFFFCC TEXT=#333333 LINK="#0000CC" VLINK=#FF6666>
<h2 align=center>Form di Resoconto</h2>
  6. Digita ora il codice per identificare l'inizio del form. Fino a quando, nella prossima lezione, non impareremo a fargli fare veramente qualcosa, non scriveremo la parte ACTION=.... 
    <form method="post">
  7. Il form verra' visualizzato usando le tabelle HTML, che sono utili per i web form in generale perche' ci permettono di allineare le etichette di testo e gli elementi del form. Creeremo una tabella che ha 4 quattro elementi principali del nostro form:
    1. informazioni dello studente: informazioni su chi completa il form
    2. resoconto sul vulcano: un riassunto sulle informazioni che si vanno a presentare
    3. Fonti: un posto per gli studenti in cui inserire le fonti Internet a cui hanno attinto
    4. Invia e Cancella: i bottoni da premere o per inviare il form o per cancellarlo
    Ognuna di queste sezioni verra' marcata da un'ampia cella che definisce lo spazio all'interno del nostro form.

    Aggiungi questo contenuto per cominciare la tabella e scrivere la prima sezione per "informazioni dello studente": 

    <table border=0 cellpadding=4 cellspacing=1>
<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>informazioni dello studente</b></font></td>
</tr>
<tr>
<td valign=top align=right><tt><b>nome</b></td>
<td valign=top><input type="text" name="name" size="40"><br>
<font size=2 color=#000099>inserisci il tuo nome completo</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>e-mail</b></td>
<td valign=top><input type="text" name="email" size="40"><br>
<font size=2 color=#000099>inserisci un indirizzo e-mail </font> 
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>password</b></td>
<td valign=top><input type="password" name="pass" size="20"><br>
<font size=2 color=#000099>inserisci un codice identificativo</font> 
</td>
</tr>
    NOTA: Abbiamo creato due colonne per il testo "informazioni dello studente" seguite da tre righe che contengono campi d'inserimento testo. Abbiamo messo le etichette dei campi nella prima colonna di ogni riga, allineata a destra. Abbiamo anche fornito brevi istruzioni in piccoli testi color blu sotto ogni elemento del form.

    Nota come ogni elemento abbia un nome univoco. Il terzo campo del form e' in realta' di tipo password per proteggere il nome che l'utente ci inserira'.

  8. Ora scriveremo la seconda sezione dove la persona che usa questo web form fornira' il suo rapporto sul vulcano-- questa usa text input, menu selections, radio buttons, e checkboxes: 
    <tr>
<td valign=top align=right><tt><b>volcano name</b></td>
<td valign=top><input type="text" name="vname" size="40"><br>
<font size=2 color=#000099>inserisci il nome del vulcano</font>
</td>
</tr>
<tr>
<td valign=top align=right><tt><b>posizione</b></td>
<td valign=top><input type="text" name="vlat" size="10"> latitudine<br>
<input type="text" name="vlong" size="10"> longitudine<br>
<font size=2 color=#000099>inserisci le coordinate del vulcano</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>tipo</b></td>
<td valign=top>
<select name="vtype">
<option value="select" selected>Seleziona il tipo...</option>
<option value="Hawaiian">Hawaiiano</option>
<option value="Surtseyan">Surtseyano</option>
<option value="Strombolian">Stromboliano</option>
<option value="Phreato-Plinian">Phreato-Pliniano</option>
<option value="Plinian">Pliniano</option>
</select><br>
<font size=2 color=#000099>
seleziona il tipo di vulcano (vedi   
<a href="term.html" target="_top">glossario</a>)</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>attivita'</b></td>
<td valign=top>
<input type="radio" name="active" value="attivo" checked> attivo
<input type="radio" name="active" value="inattivo"> inattivo<br>
<input type="text" name="vdate" size="40"><br>
<font size=2 color=#000099>inserisci la data dell'ultima eruzione conosciuta, se conosciuta</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>particolarita'</b></td>
<td valign=top>
<input type="checkbox" name="note1" value="danger risk">pericoloso per le popolazioni vicine<br>
<input type="checkbox" name="note2" value="historic eruptions">ha eruttato nel tempo storico<br>
<input type="checkbox" name="note3" value="observed">e' stato osservato nel dettaglio<br>
<input type="checkbox" name="note4" value="explosive eruptions">eruzioni esplosive<br>
<input type="checkbox" name="note5" value="mild eruptions">eruzioni lievi<br>
<font size=2 color=#000099>
segna cio' che va bene</font>
</td>
</tr>

<tr>
<td valign=top align=right><tt><b>altre informazioni</b></td>
<td valign=top><textarea name="info" rows="12" cols="40" wrap=virtual>
</textarea><br>
<font size=2 color=#000099>informazioni 
scrivi ogni altra informazione riguardo questo vulcano</font>
</td>
</tr>
    NOTA: assicurati di confrontare "formattazione radio buttons" versus "formattazione check boxes"; ogni radio button in un set ha lo stesso nome mentre tutti i check boxes hanno nomi diversi.
  9. La terza sezione della web page e' usata per fornire le risorse utilizzate nel rapporto attraverso i tre campi di testo dati. Dal momento che i dati che verranno inseriti saranno web site addresses, possiamo fornire un VALUE iniziale di "http://" per i tag di input testuale: 
    
<tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>fonti</b></font></td>
</tr>

<tr>
<td valign=top align=right><tt><b>riferimenti</b></td>
<td valign=top><input type="text" name="ref1" size="40" value="http://"><br>
<input type="text" name="ref2" size="40" value="http://"><br>
<input type="text" name="ref3" size="40" value="http://"><br>
<font size=2 color=#000099>inserisci tre URL di siti web che hai utilizzato nella tua ricerca</font>
</td>
</tr>
  10. La sezione finale della nostra tabella/form contiene il bottone che inviera' i contenuti del rapporto ed un altro che puo' essere usato per resettare il form ai suoi valori di partenza. Essa conclude anche la tabella, il form, ed il resto del documento. 
    <tr>
<td colspan=2 bgcolor="#003333"><font size=+3 color=#CCCCCC>
<tt><b>manda il rapporto</b></font></td>
</tr>

<tr>
<td valign=top align=right> </td>
<td valign=top>
<input type="submit" value="Spedisci il Resoconto">  
<input type="reset" value="Cancella il Form">
</td>
</table>
</form>

</body>
</html>
  11. Salva ed Aggiorna il documento proj.html. La parte sinistra di questa framed web page dovrebbe ora avere il link aggiunto al precedente passo 2, che carica il web page form creato nei passi successivi. Il form non fa ancora nulla, ma i bottoni. i menu, ed i campi dovrebbero essere tutti utilizzabili.

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. Questa lezione ha presentato un mucchio di JavaScript da tagliare e da incollare, ed e' molto facile aver commesso qualche errore ortografico in questo processo.

Verifica

Argomenti di verifica per questa lezione:
  1. Qual'e' la struttura di un web page form?
  2. Quali sono le differenze tra radio button e check boxe per quanto riguarda il funzionamento ed il codice HTML?
  3. Come si crea un menu a tendina?
  4. Differenze tra i bottoni Invia e Cancella.

Pratica Indipendente

Fai esperienza con la scrittura di elementi per web page form nelle tue web page personali. Come si fa a creare una pagina che abbia piu' di un form?

Prossimamente....

Facciamo fare qualcosa a questa pagina!
VAI A.... | Indice Delle Lezioni | indietro: "Form: Intro" | avanti: "Form Action con mail e CGI" |
Writing HTML: Lezione 28a: 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