HTML – I Form (moduli)

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

2. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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).

3. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

4. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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

5. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli)

6. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli) 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.

7. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

8. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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 sizeemaxlenght. 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.

9. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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>

10. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form – tag input Esso produce la seguente visualizzazione:

11. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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:

12. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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>

13. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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:

14. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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).

15. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

16. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form – tag input 5. value: ogni controllo ha un valore iniziale e uno corrente, costituiti entrambi da stringhe di caratteri. L’attributo valuespecifica il valore iniziale e lo visualizza all’interno del campo. Ad esempio, il tag: 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.

17. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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,

18. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

19. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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:

20. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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>

21. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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.

22. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form – tag select Nell’esempio che segue simuliamo la richiesta di un giudizio su un sito Web. <selectsize=“1” cols=“4” name="giudizio"><option selected value=“nessuna”><option value=“1”> Buono<option value=“2”> Sufficiente<option value=“3”> Ottimo</select>

23. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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>

24. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form – tag select che produce la seguente visualizzazione:

25. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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

26. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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>

27. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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>

28. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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’attributoactiondetermina 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.

29. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli) Per esempio, si potrebbe scrivere: <form action=“mailto:angallip@tiscali.it”> Quando, come in questo caso, i dati vengono inviati a un indirizzo di posta elettronica, è bene formattarli come solo testo, impostando l’attributoenctypeal valore text/plain: <form enctype=“text/plain”> In caso contrario, i dati verrebbero inviati come allegato.

30. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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: In questo esempio l’attributoactionha come valore l’URL dello script CGI. L’attributoactionnon è obbligatorio, e in sua assenza viene utilizzato l‘URL della pagina contenente il form.

31. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli) L’attributomethodspecifica la modalità di gestione dei dati raccolti dal programma gateway. Sono possibili i due valori: getpost. 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 valoregetvengono 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 ageti dati vengono spediti al server e separati in due variabili. Per questo metodo il numero massimo di caratteri contenuti nel form è 255.

32. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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 Semethodè 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.

33. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli) Quindi, ricapitolando, 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

34. <html> <head></head> <body> <form method=“post” action=“mailto:angallip@tiscali.it” 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>

35. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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:angallip@tiscali.it” 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>

36. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form – tag input Mentre il listato completo per i pulsanti radio è: PulsantiRadio5.html <html> <head></head> <body> <form method="post“ action=“mailto:angallip@tiscali.it” 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>

37. Al pulsante submit si può conferire un aspetto personalizzato, utilizzando una qualsiasi immagine. A tale fine si assegna all’attributo type il valoreimage, e all’attributosrcil valore della immagine voluta. Ad esempio, si potrebbe volere la seguente visualizzazione:

38. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli) Essa si ottiene con il seguente listato: InvioBusta6.html <html> <head></head> <body> <form action="mailto:angallip@tiscali.it" 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>

39. 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.

40. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli) Per ottenere la seguente visualizzazione: Email7.html si può eseguire il seguente listato:

41. Laboratorio di Applicazioni Informatiche II mod. AHTML – I Form (moduli) <html> <body> <form action="mailto:angallip@tiscali.it" 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>

42. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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

43. Laboratorio di Applicazioni Informatiche II mod. AHTML – 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@isp.com" 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>