Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
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à.
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).
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
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
Un form è racchiuso tra i tag <form> e </form> ed è strutturato
come segue:
<form>
Contenuto del modulo
</form>
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
Esso produce la seguente visualizzazione:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
4.4. checkbox: crea delle caselle di controllo, utilizzate per
selezionare uno o più dati che non si escludono a vicenda; esempio:
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:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
<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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
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:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
<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).
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
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:
<input name="nomecont" type="text" maxlength="40“
size="33" value="Il tuo nome">
produce la seguente visualizzazione:
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
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.
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
Quindi, riassumendo,
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag textarea
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
Ecco un esempio di listato contenente il 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:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag select
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag select
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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag select
La realizzazione di un box di selezione con i tag <select> e
<option> è esemplificata dal seguente listato:
<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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag select
che produce la seguente visualizzazione:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – submit, reset
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 (moduli)
si può eseguire il seguente listato:
<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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
È anche possibile definire un pulsante semplice, tramite l’attributo
button, come indica il seguente esempio:
<html>
<body>
<form>
<input type="button" value=“Ciao a tutti!">
</form>
</body>
</html>
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
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:
<form action=
"http://www.tuosito.com/cgi-bin/nome_script.cgi“>
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
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
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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
Quindi, ricapitolando,
<form>
Tag
Attributi
Valori
action
enctype
indirizzo text/plain
method
get
post
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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
Analogamente, per inviare il modulo contenente le caselle di controllo si
può riscrivere così il relativo listato: CaselleControllo4.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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form – tag input
Mentre il listato completo per i pulsanti radio è: PulsantiRadio5.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>
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:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
Essa si ottiene con il seguente listato: InvioBusta6.html
<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>
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=Angelo
coord.x=21
coord.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.
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
Per ottenere la seguente visualizzazione: Email7.html
si può eseguire il seguente listato:
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
<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>
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
La pressione del pulsante Invio invia effettivamente al programma
di posta elettronica preimpostato le seguenti coppie nome/valore:
nome=tuonome
mail=tuamail
commento=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
Laboratorio di Applicazioni Informatiche II mod. A
HTML – I Form (moduli)
<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>