HTML – I Form (moduli) Laboratorio di Applicazioni Informatiche II mod. A.

HTML – I Form (moduli)

Laboratorio di Applicazioni Informatiche II mod. A

La quasi totalità degli elementi messi a disposizione da HTML permette a un utente di visualizzare i contenuti di un sito, ma non di interagire con esso, il che rende il rapporto utente/pagina unidirezionale e statico.

Con i form (moduli), invece, l'utente può interagire con il sito spedendo un proprio commento, avanzando richieste senza scrivere espressamente una e-mail, firmando guest book, rispondendo a sondaggi e così via.

Ciò rende il rapporto bidirezionale, ed è reso possibile da programmi residenti su server che prendono il nome di CGI (Common Gateway Interface).

Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli)

Questi programmi rendono possibile ciò che altrimenti non lo sarebbe agendo dal lato client. La gestione dei form dipende in misura preponderante dal server, piuttosto che dalla programmazione HTML in sé e per sé.

Perché un form HTML funzioni è quindi necessario disporre di un CGI residente sul proprio server o su altro sito. Il Web non lesina servizi gratuiti indirizzati a questo scopo.

Spesso si tratta di CGI gratuiti messi a disposizione da comunità virtuali (Geocities, Tripod, Xoom, ecc.).

Per i più smaliziati è consigliato rivolgersi alla fonte, e impostare in prima persona sul proprio server uno dei tanti programmi CGI distribuiti gratuitamente dai loro autori e raccolti in siti specifici.


Un form può essere creato anche evitando il passaggio per un CGI, ma con svantaggi e limiti che rendono tale scelta l'estrema ratio, da adottare solo in casi di assoluta necessità.


I form vengono utilizzati per ottenere risposte dagli utenti attraverso l'uso di una interfaccia grafica che consiste in caselle di testo, pulsanti, caselle di controllo e altre caratteristiche simili, come indicato in Figura. Controlli1.html

La creazione di un form di immissione dati consta quindi di due fasi:

• impostazione dei tag necessari per la creazione del form, dei suoi campi e del tasto di spedizione;

• creazione di uno script CGI su server (o richiamo di uno script già impostato).

<form>

Contenuto del modulo

</form>

Un form è racchiuso tra i tag <form> e </form> ed è strutturato come segue:


All’interno dei tag <form> </form> si usano i tag:

<input> <textarea> <select> <option>

che impostano le aree viste in precedenza in modo che accettino i dati introdotti dall'utente.

L’elemento base per la definizione degli elementi di un form è <input>, che consente di creare vari tipi di campi, detti controlli, per la immissione dei dati. <input> possiede numerosi attributi:

1. name: specifica il nome simbolico utilizzato nei trasferimenti e nella identificazione dell’output da parte dell’elemento del form; è necessario per tutti i tipi di controllo tranne i pulsanti reset e submit;

2. maxlength: imposta il numero massimo di caratteri che possono essere digitati dall’utente in un campo di immissione. Il valore preimpostato è illimitato.

3. size: imposta la lunghezza del campo visualizzato sullo schermo. Se è inferiore a maxlength, si ha un campo a scorrimento.

Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag input

4. type: definisce il tipo di campo o controllo da visualizzare, e può assumere 10 valori diversi:

4.1. text: crea una casella di testo di una riga (per righe multiple si usa <textarea>), dove di solito viene immesso un nome o un indirizzo e-mail. È usato soprattutto per informazioni non predefinite che variano di volta in volta. Viene seguito dagli attributi size e maxlenght.

4.2. password: crea una casella di password, nella quale il testo immesso non viene visualizzato in chiaro, ma come punti o asterischi;

4.3. file: crea una casella di file, utilizzata per “sfogliare” i file presenti nel sistema, per selezionarne uno.


Per creare una casella di testo, una casella di password e una casella di file si può usare il seguente codice HTML:

<html> <head></head> <body> <form> Scrivi il tuo nome (Casella di testo) <input name=“cnome” type=“text” size=“20” maxlength=“25”> <br> Scrivi la password (Casella di password) <input name=“cpwd” type=“password” size=“10” maxlength=“10”> <br>Scegli il file (Casella di file) <input name=“cfile” type=“file” size=“25” maxlength=“30”> <br><br> </form> </body></html>


Esso produce la seguente visualizzazione:


Le caselle possono avere lo stesso nome e valori diversi; in tale caso quando l’utente seleziona una determinata casella, cliccandoci sopra, associa al nome quel determinato valore.

L’attributo checked imposta su “attivato” il valore iniziale di una casella (che in sua assenza è “disattivato”).

La creazione delle caselle di controllo dell’esempio precedente si può ottenere con il seguente listato:

4.4. checkbox: crea delle caselle di controllo, utilizzate per selezionare uno o più dati che non si escludono a vicenda; esempio:


<html> <head></head> <body> <h3>Caselle di controllo</h3> <form> <input name="acquisto" type="checkbox" value="cd"> Compact disc <br> <input name="acquisto" type="checkbox" value="fd"> Floppy disc<br> <input name="acquisto" type="checkbox" value="hd"> Hard disc<br><br> </form> </body></html>



4.5. radio: crea dei pulsanti radio, utilizzati per selezionare un dato tra più scelte fornite in alternativa. Anche per i pulsanti radio si può usare l’attributo checked.

Per ottenere la seguente visualizzazione:

si può scrivere il seguente listato:

<html> <head></head> <body> <form> <h3>Pulsanti radio</h3> <input name checked="sesso" type="radio“ value="m"> Maschio<br> <input name="sesso" type="radio" value="f"> Femmina<br><br> </form> </body></html>


Si osservi che, a differenza delle caselle di controllo, tutti i pulsanti radio di un modulo devono avere lo stesso name (altrimenti la scelta non è più esclusiva).


4.6. hidden: crea dei controlli che non vengono visualizzati, ma i cui valori vengono inviati insieme al form; sono usati di solito per memorizzare informazioni durante gli scambi client/server che altrimenti si potrebbero perdere;

4.7. image: inserisce una immagine, cliccando sulla quale il form viene inviato e le coordinate x, y del punto su cui si è cliccato vengono trasmesse attraverso coppie nome/valore.

4.8. reset: riporta il form ai suoi valori iniziali;

4.9. submit: invia il form;

4.10. button: crea un pulsante generico.

5. value: ogni controllo ha un valore iniziale e uno corrente, costituiti entrambi da stringhe di caratteri. L’attributo value specifica il valore iniziale e lo visualizza all’interno del campo. Ad esempio, il tag:

Il tuo nome

produce la seguente visualizzazione:

<input name="nomecont" type="text" maxlength="40“ size="33" value="Il tuo nome">

Il valore corrente è impostato inizialmente al valore iniziale; quindi può essere modificato dall’interazione dell’utente o da uno script.

Il valore iniziale di un form non cambia, e quando il form viene reimpostato il valore corrente di ogni controllo viene reimpostato al suo valore iniziale.


6. src: definisce l’immagine da inserire (se si è usato type=“image”)

7. align: definisce la relazione tra immagine e testo (se si è usato type=“image”), in base ai valori top, middle, bottom

Se un controllo non ha un valore iniziale, l’effetto della sua reimpostazione è indefinito.

Quando un form viene inviato per essere elaborato, in alcuni controlli il nome viene accoppiato con il valore corrente, e tali coppie nome/valore vengono inviate con il form.

Quindi, riassumendo,


Per creare un’area di testo che raccoglie un testo di più righe, di solito un commento immesso dall’utente, si usa il tag <textarea>.

Esso accetta gli attributi:

• name: il nome logico associato al testo di ritorno;

• cols: il numero di colonne visualizzate (ossia la larghezza del riquadro);

• rows: il numero di righe visualizzate (ossia l’altezza del riquadro);

•wrap=“physical”: riporta automaticamente a capo il testo che superi la larghezza del riquadro.Se si scrivono più righe di quelle impostate con rows, <textarea> produce automaticamente la barra di scorrimento verticale che consente di muoversi nel testo.

Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag textarea

<html><head></head> <body> <h2>Area di testo</h2> <form> <textarea name=“areatesto” cols=“20” rows=“4”> </textarea> </form> </body></html>

Esso produce la seguente visualizzazione:

Ecco un esempio di listato contenente il tag <textarea>:

Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag textarea

Il box di selezione, detto anche menu a discesa (o a scorrimento), è un elenco di voci tra le quali selezionare quella desiderata. Esso svolge quindi lo stesso ruolo di un gruppo di pulsanti radio.

Il menu compare quando si clicca sul triangolino posto a destra della prima voce.

Per creare il box si usa la coppa di tag <select>, </select>, all’interno della quale si definisce ciascuna voce dell’elenco con un tag <option>, secondo lo schema:

<select name=“...> <option value=“...> ... <option value=“...></select>

Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag select

Il tag <select> accetta i seguenti attributi:

• name: fornisce al menu un nome che sarà associato alle sue selezioni quando il form sarà elaborato;

•size: specifica l’altezza del menu non aperto, in termini di righe di testo (in sua assenza, il valore preimpostato è 1);

• multiple: consente di selezionare più di una voce (in tal caso il menu svolge lo stesso ruolo di un gruppo di caselle di controllo).Il tag option accetta i seguenti attributi:

• value: assegna un nome esclusivo a ogni voce del menu, e rappresenta il valore restituito da <select> quando l’opzione viene selezionata (in sua assenza il valore restituito è quello impostato da <option>);

• selected: indica che l’opzione è preselezionata.


Nell’esempio che segue simuliamo la richiesta di un giudizio su un sito Web.

<select size=“1” cols=“4” name="giudizio"> <option selected value=“nessuna”> <option value=“1”> Buono <option value=“2”> Sufficiente <option value=“3”> Ottimo</select>


<html> <head></head> <body> <form> Scegli il mese della partenza<br><br> <select name="mese"> <option>giugno <option>luglio <option>agosto </select> <input name=correct size=5 type="hidden" value=3> <br><br> </form> </body></html>

La realizzazione di un box di selezione con i tag <select> e <option> è esemplificata dal seguente listato:


che produce la seguente visualizzazione:


Ogni form deve contenere gli attributi:

• submit: crea un pulsante che invia i dati del modulo all’URL indicato come valore dell’attributo action (server Web o indirizzo di posta elettronica);

• reset: crea un pulsante che reimposta il modulo, riscrivendo in ogni casella i valori iniziali.

All’interno dei pulsanti submit, reset si può scrivere una dicitura diversa da quella preimpostata, assegnandola come valore all’attributo value.

Ad esempio, per ottenere la seguente visualizzazione: InvioReset2.html

Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – submit, reset

<html> <head></head> <body> <h3>Pulsanti di Invio e Reset</h3> <form> <p>Pulsante di invio : <input type=“submit” value=" Invia "> <p>Pulsante di reset : <input type=“reset” value=“Reimposta”> </form> </body></html>


si può eseguire il seguente listato:

<html> <body> <form> <input type="button" value=“Ciao a tutti!"> </form> </body></html>

È anche possibile definire un pulsante semplice, tramite l’attributo button, come indica il seguente esempio:


Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form - Invio

Invio dei form

Ora che disponiamo dei pulsanti submit, reset possiamo completare i listati visti in precedenza in modo che inviino effettivamente i dati contenuti nei relativi moduli.

A tale fine, teniamo presente che il tag <form> accetta i tre attributi

action enctype method

L’attributo action determina il tipo di azione che sarà compiuto sulle informazioni immesse nel modulo, e può avere come valore:• l’indirizzo di posta elettronica che deve ricevere le

informazioni del modulo, oppure:

• l’indirizzo del programma eseguibile o dello script che gestirà i dati contenuti nei campi del form.


Per esempio, si potrebbe scrivere:

<form action=“mailto:[email protected]”>

Quando, come in questo caso, i dati vengono inviati a un indirizzo di posta elettronica, è bene formattarli come solo testo, impostando l’attributo enctype al valore text/plain:

<form enctype=“text/plain”>

In caso contrario, i dati verrebbero inviati come allegato.


In questo esempio l’attributo action ha come valore l’URL dello script CGI.

L’attributo action non è obbligatorio, e in sua assenza viene utilizzato l‘URL della pagina contenente il form.

<form action=

"http://www.tuosito.com/cgi-bin/nome_script.cgi“>

Se invece si vuole che i dati del modulo siano elaborati dallo script

nome_script.cgi

memorizzato nella directory

cgi-bin

del sito di indirizzo

http://www.tuosito.com

si scriverebbe:


L’attributo method specifica la modalità di gestione dei dati raccolti dal programma gateway. Sono possibili i due valori:

get post.

Il valore get va usato nei form che non effettuano cambiamenti di stato nell’ipertesto, ma per esempio si limitano a eseguire una ricerca in una banca dati.

I form che utilizzano il valore get vengono gestiti facendo seguire l’URL da un punto interrogativo (?), seguito a sua volta dai dati dell’applicazione nella forma

application/x-www-form-urlencoded.

Se method è impostato a get i dati vengono spediti al server e separati in due variabili. Per questo metodo il numero massimo di caratteri contenuti nel form è 255.

Se method è impostato a post, i dati vengono ricevuti direttamente dallo script CGI senza un preventivo processo di decodifica. In tal modo lo script può leggere una quantità illimitata di caratteri.

Questi ultimi sono gestiti da variabili che vengono specificate da un insieme di campi e nomi di variabili accoppiati. Il nome della variabile viene fornito nel corpo del form.


Il valore post va usato nei form che effettuano cambiamenti nell’ipertesto o in una banca dati. Il formato del messaggio è

application/x-www-form-urlencoded

Quindi, ricapitolando,


Tag <form>

Attributi action enctype method

Valori indirizzo text/plain getpost

A questo punto, il listato che produceva le tre caselle di testo può essere completato come segue (le aggiunte, rispetto alla prima versione, sono in colore): Caselle3.html

<html> <head></head> <body> <form method=“post” action=“mailto:[email protected]” enctype=“text/plain”> Scrivi il tuo nome (Casella di testo) <input name=“cnome” type=“text” size=“20” maxlength=“25”> <br>Scrivi la password (Casella di password) <input name=“cpwd” type=“password” size=“10” maxlength=“10”> <br>Scegli il file (Casella di file) <input name=“cfile” type=“file” size=“25” maxlength=“30”> <br><br> <input type=“submit” value=" Invia "> <input type=“reset” value=“Reimposta”> </form> </body></html>


<html> <head></head> <body> <h3>Caselle di controllo</h3> <form method=“post” action=“mailto:[email protected]” enctype=“text/plain”> <input name=“acquisto" type="checkbox" value=“cd"> Compact disc<br> <input name=“acquisto " type="checkbox" value=“fd"> Floppy disc<br> <input name=“acquisto " type="checkbox" value=“hd"> Hard disc<br><br> <input type=“submit” value=" Invia "> <input type=“reset” value=“Reimposta”> </form> </body></html>

Analogamente, per inviare il modulo contenente le caselle di controllo si può riscrivere così il relativo listato: CaselleControllo4.html

<html> <head></head> <body> <form method="post“ action=“mailto:[email protected]” enctype="text/plain"> <h3>Pulsanti radio</h3> <input name checked="sesso" type="radio" value="m"> Maschio<br> <input name="sesso" type="radio" value="f"> Femmina<br><br> <input type="submit" value=" Invia "> <input type="reset" value="Reimposta"> </form> </body></html>


Mentre il listato completo per i pulsanti radio è: PulsantiRadio5.html

Al pulsante submit si può conferire un aspetto personalizzato, utilizzando una qualsiasi immagine. A tale fine si assegna all’attributo type il valore image, e all’attributo src il valore della immagine voluta.

Ad esempio, si potrebbe volere la seguente visualizzazione:


<html> <head></head> <body> <form action="mailto:[email protected]" method="post“ enctype="text/plain"> <h3>Questo form invia una e-mail a Angelo Gallippi. </h3>Nome:<br> <input type="text" name="cnome" value="tuonome“ size="20"> <br>Per inviare il modulo clicca sulla busta <input name="coord" type="image" src="busta.gif“ width=10% height=10%><br><br> Per azzerare il modulo clicca sul pulsante <input type="reset" value="Cancella"> </form> </body></html>

Essa si ottiene con il seguente listato: InvioBusta6.html

Se, ad esempio, si scrive Angelo nella casella Nome: e si clicca sulla busta, il programma di posta elettronica predefinito riceve i seguenti dati:

cnome=Angelocoord.x=21coord.y=39

dove 21 e 39 sono, rispettivamente, le coordinate x e y del punto della busta su cui si è cliccato (naturalmente, se si ricompila il modulo cliccando su un punto diverso, cambiano i valori delle coordinate).

Questa possibilità può essere sfruttata, ad esempio, per indicare il nome di una città o di una regione semplicemente cliccando su una carta geografica.


Per ottenere la seguente visualizzazione: Email7.html

si può eseguire il seguente listato:

<html> <body> <form action="mailto:[email protected]" method="post“ enctype="text/plain"> <h3>Questo form invia una e-mail a Angelo Gallippi.</h3> Nome:<br> <input type="text" name="nome" value="tuonome“ size="20"> <br> Mail:<br> <input type="text" name="mail" value="tuamail“ size="20"> <br> Commento: <br> <input type="text" name="commento" value="tuocommento“ size="40"> <br><br> <input type="submit" value="Invia"> <input type="reset" value="Cancella"> </form> </body></html>



La pressione del pulsante Invio invia effettivamente al programma di posta elettronica preimpostato le seguenti coppie nome/valore:

nome=tuonomemail=tuamailcommento=tuocommento

A mo’ di riepilogo, invitiamo a eseguire il seguente listato, controllando le coppie nome/valore che esso invia al programma client di posta elettronica predefinito: Moduli8.html

<html> <head><title>Moduli6</title></head> <body> <center><font color="navy"><h2>Tipi di input (form)</h2></font></center> <form method=post action="mailto:[email protected]" enctype=text/plain> <p>Inserite il vostro nome (Casella di testo): <input name="nome" type="text" size="20" maxlength="25"></p> <p>Vi piace giocare a golf (Pulsante radio)? <input name="gioca" type="radio" value="yes">sì <input name="gioca" type="radio" value="no">no <p>In quali campi vi piace giocare (check box)? <br><input name="ka" type="checkbox" value="sì">Kapalua <br><input name="st" type="checkbox" value="sì">St. Andrews <br><input name="mu" type="checkbox" value="sì">Muirfield <br><input name="la" type="checkbox" value="sì">La Paloma <p>In quale mese preferite giocate a golf (select box)? <select name="mese"> <option>giugno <option>luglio <option>agosto </select> <p>Quali accessori da golf vi serviranno l'anno prossimo (textarea)? <br><textarea name="testo"></textarea><p> <input type="submit" value="invia il modulo (pulsante di invio)"> <input type="reset" value="azzera il modulo (pulsante di reset)"> <p>Grazie per le risposte. </form> </body></html>


HTML – I Form (moduli) Laboratorio di Applicazioni Informatiche II mod. A.

Documents

Transcript of HTML – I Form (moduli) Laboratorio di Applicazioni Informatiche II mod. A.