HTML 6. I moduli a.k.a. form

Transcript

1 HTML 6 I moduli a.k.a. form 1

2 Il modulo Un modulo è un'area della pagina predisposta per accettare dei dati in ingresso dall'utente Gli utenti forniscono dati al WEB server che restituisce una risposta (pagina HTML) dopo averli elaborati Ogni modulo è definito da un'istruzione d'inizio <form> ed una di fine modulo </form>, in mezzo alle quali ci sono tutti gli elementi (controlli) che lo costituiscono. Tecnologie di Sviluppo per il WEB 2

3 Tipi di controlli 1.Bottoni (submit/reset) 2.Caselle di Spunta 3.Radio Button (come caselle di spunta, ma mutex) 4.Immagini (come i bottoni) 5.Caselle di Testo (anche nascoste come pswd) 6.Selezione di File 7.Controlli nascosti Tecnologie di Sviluppo per il WEB 3

4 Esempio di modulo Tecnologie di Sviluppo per il WEB 4

5 Il tag <FORM> I moduli sono definiti come segue <FORM METHOD = POST GET ACTION = URL_Script > - Controlli del modulo - Codice HTML per abbellire la pagina </FORM> L elemento FORM agisce come una sorta di contenitore per i controlli Tecnologie di Sviluppo per il WEB 5

6 Attributi di FORM METHOD Specifica come i dati saranno inviati al server Ci sono delle differenze nell uso di GET e POST, già accennate quando abbiamo analizzato HTTP ACTION Indica il file (programma/script) che andrà ad elaborare i dati passati dal browser al server Può essere un eseguibile, oppure può essere un file scritto in un linguaggio di scripting tipo: PHP, Javascript, Perl, VBScript Tecnologie di Sviluppo per il WEB 6

7 Attributi di FORM ENCTYPE Indica il tipo di contenuto MIME per la codifica dei dati nel modulo quando si usa POST, standard: application/x-www-formurlencoded Si usa invece multipart/form-data in congiunzione dell'attributo TYPE, con valore file (per l'upload di file) Tecnologie di Sviluppo per il WEB 7

8 Attributi di FORM (cont'd) TARGET Indica in quale finestra (frame) dovrà essere inviato l output generato dalla pagina specificata da ACTION NAME Indica il nome della form, inserito per compatibilità con il passato. Bisognerebbe usare l attributo ID ID Nome univoco della form Tecnologie di Sviluppo per il WEB 8

9 Quando usare GET In generale si usa GET quando Il modulo contiene pochi campi e se come alternativa alle form... si vogliono invocare applicazioni serverside (invece di utilizzare un modulo) Basta formattare opportunamente la URL da invocare <A HREF= cerca.php?anno=1999&mese=maggio > Vendite maggio 1999 </A> Tecnologie di Sviluppo per il WEB 9

10 Quando usare POST In generale si usa POST quando Il modulo causa effetti collaterali Aggiungiamo delle informazioni in un database Ci sono problemi di sicurezza, dato che la GET aggiunge i parametri alla URL e questi possono essere catturati da uno sniffer o prelevati da un file di log sebbene questo accade anche con POST usare https Tecnologie di Sviluppo per il WEB 10

11 Controlli del modulo I controlli possono essere raggruppati in sezioni Ad ogni controllo è possibile associargli un etichetta Ogni controllo ha un nome (specificato nel codice HTML attraverso NAME) ed un valore (specificato attraverso VALUE) fornito dall utente Ci sono differenze a seconda del TYPE Il nome ed il valore sono accoppiati e passati al server per elaborarli Tecnologie di Sviluppo per il WEB 11

12 Esempio Tecnologie di Sviluppo per il WEB 12

13 Il tag INPUT Definisce un campo input. Attributi principali TYPE Specifica il tipo di controllo da creare NAME Assegna un nome al controllo VALUE Assegna un valore iniziale al controllo SIZE, CHECKED, MAXLENGTH, SRC Validi solo per alcuni valori di TYPE che vedremo Tecnologie di Sviluppo per il WEB 13

14 Ulteriori attributi di INPUT valgono anche per altri controlli ID Stesso significato di quello del tag FORM TABINDEX Stesso significato del tag A ACCESSKEY Stesso significato del tag A (vedi W3C) READONLY (attributo booleano) Il controllo è a sola lettura, ma il suo valore sarà comunque passato al server DISABLED (attributo booleano) Il controllo è disabilitato, ed il suo valore non sarà passato al server Tecnologie di Sviluppo per il WEB 14

15 Attributo DISABLED È utilizzato per non permettere all utente di inserire dei dati in input se non sono state soddisfatte alcune condizioni e.g., posso inserire il nome solo dopo aver inserito il cognome Il tasto per inviare il modulo sarà reso attivo solo se tutti i campi del modulo sono riempiti Per modificare dinamicamente il suo valore abbiamo bisogno di uno script Tecnologie di Sviluppo per il WEB 15

16 Uso dell attributo READONLY Vogliamo mostrare all utente del testo che deve essere a sola lettura Il testo mostrato deve comunque essere passato al server per l elaborazione Si potrebbero passare informazioni al server attraverso input di moduli in sequenza Parte dell input precedente viene mostrato per comodità all utente in un modulo successivo, e passato nuovamente al server Tecnologie di Sviluppo per il WEB 16

17 Il tag INPUT Sintassi fondamentale: <INPUT TYPE= tipoel NAME= NomeCampo > tipoel definisce come il controllo (campo di input) appare sullo schermo NomeCampo è il nome del campo utilizzato dall applicazione lato server (applicazione specificata con ACTION nella FORM) per accedere al suo valore. Tecnologie di Sviluppo per il WEB 17

18 Valori dell attributo TYPE 1 TEXT Campo di testo di una riga PASSWORD Come TEXT, ma l input è nascosto da una serie di asterischi (*****) HIDDEN Come TEXT, ma non è visualizzato. In ogni caso è inviato al sever. FILE Crea un controllo per la selezione di file Tecnologie di Sviluppo per il WEB 18

19 Valori dell attributo TYPE 2 CHECKBOX Casella di controllo. Scelta Si/No RADIO Pulsante di opzione. SUBMIT Pulsante per l invio dei contenuti del modulo RESET Pulsante per ripristinare i contenuti di un modulo ai valori di default Tecnologie di Sviluppo per il WEB 19

20 Valori dell attributo TYPE 3 BUTTON Crea un pulsante, ma non serve ad inviare il modulo. Dettagli in seguito IMAGE Immagine che sostituisce il pulsante di invio Deve avere l attributo SRC settato Al server vengono inviate anche le coordinate del punto dove l utente ha cliccato Tecnologie di Sviluppo per il WEB 20

21 Esempio di utilizzo del tag INPUT Tecnologie di Sviluppo per il WEB 21

22 Sorgente <FORM action="..." method="post" accept="image/*" enctype="multipart/form-data"> <P> Login: <INPUT type="text"> <P> Password <INPUT type="password"> <P> Hidden: <INPUT type="hidden"> <P> File: <INPUT type="file" accept="image/*"> <P> Checkbox: <INPUT type="checkbox"> <P> maschio: <INPUT type="radio" name= sesso CHECKED> <P> femmina: <INPUT type="radio" name= sesso > <P> Submit: <INPUT type="submit" > <P> Reset: <INPUT type="reset" > <P> Button: <INPUT type="button" value="nome del bottone"> <P> Image: <INPUT type="image" SRC="donut.gif"> </FORM> Tecnologie di Sviluppo per il WEB 22

23 TYPE= TEXT Accetta qualsiasi tipo di input Attributi associati MAXLENGTH Numero massimo di caratteri che l utente può inserire SIZE Grandezza della casella mostrata nella pagina VALUE Valore di default assunto dal campo Tecnologie di Sviluppo per il WEB 23

24 Esempio (FORM1.HTML) dai in input il tuo nome: <INPUT TYPE= TEXT NAME= nome MAXLENGTH= 10 SIZE= 5 > In quale provincia risiedi: <INPUT TYPE= TEXT NAME= Provincia MAXLENGTH= 2 SIZE= 4 VALUE= SA > Tecnologie di Sviluppo per il WEB 24

25 OUTPUT Tecnologie di Sviluppo per il WEB 25

26 TYPE= PASSWORD Il campo accetta qualsiasi carattere mascherandolo con asterischi Sicurezza minima, quello che viene digitato dall'utente non è visualizzato sullo schermo, ma la trasmissione avviene in chiaro Attributi MAXLENGTH SIZE VALUE Tecnologie di Sviluppo per il WEB 26

27 TYPE= HIDDEN La visualizzazione del campo è nascosta al browser, ma esso è presente nel codice HTML» Usato da script per passare informazioni da un modulo all altro Ad esempio, il nome dell utente, il suo numero di conto, il fatto che già si è autenticato, Tecnologie di Sviluppo per il WEB 27

28 TYPE= CHECKBOX Casella di controllo Attributi: VALUE Valore inviato allo script se la casella è spuntata Deve essere indicato per forza In alcuni browser, se omesso viene restituito on CHECKED Seleziona in anticipo una casella Tecnologie di Sviluppo per il WEB 28

29 Esempio <INPUT TYPE="CHECKBOX" NAME= condimento" VALUE= ragu"> Ragù <BR> <INPUT TYPE="CHECKBOX" NAME="condimento" VALUE= panna" CHECKED> Panna<BR> <INPUT TYPE="CHECKBOX" NAME="condimento" VALUE= genovese"> Genovese <BR> <INPUT TYPE="submit" VALUE="Invia i dati"> <INPUT TYPE="reset" VALUE="Cancella tutto!"> Tecnologie di Sviluppo per il WEB 29

30 TYPE= RADIO Pulsanti di opzione Soltanto una delle scelte nello stesso gruppo può essere selezionata Un insieme di pulsanti di opzione viene raggruppato dandogli lo stesso nome Se non si seleziona un pulsante, non viene restituito nulla allo script Si può selezionare in anticipo un pulsante tramite CHECKED Tecnologie di Sviluppo per il WEB 30

31 Esempio <INPUT TYPE= RADIO NAME= PT VALUE= 1"> Contante<BR> <INPUT TYPE= RADIO NAME= PT VALUE= 2"> Assegno <BR> <INPUT TYPE= RADIO NAME= PT VALUE= 3"> VISA <BR> Tecnologie di Sviluppo per il WEB 31

32 TYPE= SUBMIT <INPUT TYPE= SUBMIT" VALUE="Invia i dati"> Produce un pulsante che una volta premuto invia i dati allo script sul server Ha un etichetta di default il cui valore dipende dalla lingua preferita dal browser Submit query, Invia query Tramite VALUE è possibile cambiare l etichetta che compare sul pulsante Tecnologie di Sviluppo per il WEB 32

33 TYPE= RESET <INPUT TYPE= RESET" VALUE="Cancella tutto!"> Produce un pulsante che una volta premuto ripristina i valori di default specificati nei singoli controlli del modulo Tramite VALUE è possibile cambiare l etichetta che compare sul pulsante Valore di default: Reset Tecnologie di Sviluppo per il WEB 33

34 TYPE= BUTTON Serve a creare un pulsante a cui può essere associata una funzione che viene eseguita quando il bottone viene premuto (quando viene generato un evento) OnClick, OnMouseOver, OnMouseOut, Maggiori dettagli nella parte su Javascript Att.ne a non confondersi con il TYPE submit che invece effettua un'azione! Tecnologie di Sviluppo per il WEB 34

35 Più bottoni in una singola FORM È possibile inserire più bottoni di invio in una singola FORM Ad ogni bottone potrebbe corrispondere un azione differente sul server Si può dare nome differente ad ogni bottone, ma se le azioni sono simili: si dà lo stesso nome a tutti i bottoni, ma valori differenti (come se fosse una scelta multipla o parametri da passare) Il server in base ai valori ricevuti effettua una azione differnete Tecnologie di Sviluppo per il WEB 35

36 Esempio con nomi uguali <INPUT type="submit" name= azione value= aggiorna > <INPUT type="submit" name= azione value= aggiungi > <INPUT type="submit" name= azione value= cancella > Tecnologie di Sviluppo per il WEB 36

37 TYPE= IMAGE <INPUT TYPE= IMAGE" NAME= nome SRC= URL_Immagine > Può essere usato al posto del tasto SUBMIT, usa gli stessi attributi del tag IMG Al server viene inviata la posizione x ed y del puntatore del mouse nome.x e nome.y Le coordinate x ed y si calcolano a partire dal bordo sinistro e superiore dell immagine Tecnologie di Sviluppo per il WEB 37

38 TYPE= FILE 1 Permette di selezionare un file presente sul proprio computer e di inviarlo al server con la sottomissione del modulo Il browser aprirà una finestra di dialogo Vincoli sugli attributi di FORM METHOD= POST ENCTYPE= multipart/form-data Non ha senso utilizzare l attributo VALUE Tecnologie di Sviluppo per il WEB 38

39 TYPE= FILE 2 Tramite l attributo ACCEPT si indica quali sono i tipi di file che il programma sul server gestirà correttamente Il browser potrebbe utilizzare ACCEPT per vincolare il tipo di file che l utente potrà selezionare (non supportato.) Il valore di ACCEPT è una serie di tipi MIME tra apici separati da virgola e.g., se si vogliono far selezionare solo le immagini si usa ACCEPT= image/* Tecnologie di Sviluppo per il WEB 39

40 Lista di tipi di MIME application, audio, example, image, message, model, multipart, text, video Tecnologie di Sviluppo per il WEB 40

41 Il tag BUTTON È un tag contenitore utilizzato per creare bottoni come quelli creati con INPUT, ma esso offre maggiori possibilità di rendering dato che può contenere qualsiasi tag HTML Attributi NAME, VALUE Stesso significato degli attributi di INPUT TYPE Valori possibili: submit, reset, button Tecnologie di Sviluppo per il WEB 41

42 Esempio <BUTTON name= sottometti" value= invia type="submit"> <B>Archivia</B> <IMG src= folder.gif" align=middle> </BUTTON> <BUTTON name="vuoiaiuto" type="button" onclick="help()"> <B>aiuto?</B> <IMG src= help.gif" width=110 align=middle> </BUTTON> Tecnologie di Sviluppo per il WEB 42

43 Risultato Tecnologie di Sviluppo per il WEB 43

44 Nota All interno del tag BUTTON non può comparire un immagine che è una mappa Il seguente codice HTML non è legale <BUTTON> <IMG src="foo.gif" usemap="# "> </BUTTON> Tecnologie di Sviluppo per il WEB 44

45 Il tag <TEXTAREA> È un tag contenitore </TEXTAREA> è obbligatorio Serve per inserire del testo su più righe. In genere usato con POST Può contenere del testo di default Attributi principali: NAME: nome del controllo ROWS: numero di righe COLS: numero di colonne Tecnologie di Sviluppo per il WEB 45

46 Esempio <TEXTAREA name="testo" rows="6" cols="35"> Prima linea del testo. Seconda linea del testo. Inserisci qui il tuo indirizzo </TEXTAREA> Tecnologie di Sviluppo per il WEB 46

47 Ulteriori attributi Attributi di BUTTON e TEXTAREA ACCESSKEY CLASS DISABLED ID STYLE TABINDEX TITLE (rendered come un tool tip) Tecnologie di Sviluppo per il WEB 47

48 Il tag SELECT È un tag contenitore <SELECT> </SELECT> Definisce una lista di selezione 1. menù a discesa 2. list box Usato in congiunzione del tag OPTION Attributi principali: NAME MULTIPLE (attributo booleano) Permette di selezionare più di un opzione SIZE Indica quante opzioni sono mostrate all utente manca VALUE (è nel tag OPTION) Tecnologie di Sviluppo per il WEB 48

49 Nota <SELECT> si comporta come un pulsante di opzione mutex <INPUT TYPE= radio > <SELECT MULTIPLE> si comporta come una checkbox <INPUT TYPE= checkbox > Tecnologie di Sviluppo per il WEB 49

50 Esempio Menu <SELECT NAME="animale"> List Box <SELECT NAME="animale" SIZE="3" MULTIPLE> Tecnologie di Sviluppo per il WEB 50

51 Risultato selezione singola selezione multipla Tecnologie di Sviluppo per il WEB 51

52 Ulteriori attributi di SELECT CLASS DISABLED ID STYLE TABINDEX TITLE Manca ACCESSKEY Tecnologie di Sviluppo per il WEB 52

53 Il tag OPTION Serve per elencare le voci all interno del tag SELECT Il tag di chiusura </OPTION> è opzionale. Attributi principali: VALUE Indica il valore da inviare al server. Se non è presente, al server viene inviato il contenuto di OPTION SELECTED Preselezione di una voce del menù Tecnologie di Sviluppo per il WEB 53

54 Ulteriori attributi di OPTION CLASS DISABLED ID STYLE TITLE Tecnologie di Sviluppo per il WEB 54

55 Esempio <SELECT NAME="animale > <OPTION VALUE="1"> Cane <OPTION VALUE="2" SELECTED > Gatto <OPTION VALUE="3" > Topo <OPTION VALUE="4" > Elefante <OPTION VALUE="5"> Giraffa <OPTION VALUE="6"> Leone </SELECT> Tecnologie di Sviluppo per il WEB 55

56 Risultato Tecnologie di Sviluppo per il WEB 56

57 Il tag OPTGROUP Più voci (opzioni) del menù possono essere riunite con il tag OPTGROUP Serve per creare dei sottomenù all interno di un menù I gruppi non possono essere annidati Ogni browser decide come rappresentare i sottomenu Attributo LABEL Specifica l etichetta per il gruppo di opzioni Tecnologie di Sviluppo per il WEB 57

58 Esempio <SELECT name="so"> <OPTION selected value="nessuno">fai la tua scelta</option> <OPTGROUP label="windows"> <OPTION value="w98">windows 98</OPTION> <OPTION value="w2000">windows 2000</OPTION> <OPTION value="wxp">windows XP</OPTION> </OPTGROUP> <OPTGROUP label="linux"> <OPTION value="2.2">kernel 2.2</OPTION> <OPTION value="2.3">kernel 2.3</OPTION> <OPTION value="2.4">kernel 2.4</OPTION> </OPTGROUP> </SELECT> Tecnologie di Sviluppo per il WEB 58

59 Risultato non selezionabili Tecnologie di Sviluppo per il WEB 59

60 Il tag LABEL È associato ad un qualsiasi controllo Serve a fornire un etichetta al controllo a cui fa riferimento Il browser sceglie come formattare quello che è indicato con LABEL Meglio usare CSS Attributo principale: FOR Serve a legare una LABEL ad un controllo Tecnologie di Sviluppo per il WEB 60

61 Usi di LABEL <LABEL FOR= CF >Codice Fiscale: </LABEL> <INPUT TYPE= TEXT ID= CF NAME= CodFiS > oppure <LABEL>Data di Nascita: <INPUT TYPE= TEXT NAME= DNas > </LABEL> devono essere identici! Tecnologie di Sviluppo per il WEB 61

62 Risultato Tecnologie di Sviluppo per il WEB 62

63 Raggruppamento di controlli È possibile raggruppare controlli logicamente collegati tra di loro usando il tag FIELDSET Il tag LEGEND aggiunge un etichetta al gruppo di controlli Entrambi i tag sono mostrati in un modo speciale scelto dal browser Attributo principale di LEGEND: ALIGN Allinea l etichetta rispetto al gruppo Tecnologie di Sviluppo per il WEB 63

64 Esempio: parte 1 <FIELDSET> <LEGEND>Informazioni Personali</LEGEND> Cognome: <INPUT name="cognome" type="text" tabindex="1"> Nome: <INPUT name="nome" type="text" tabindex="2"><br> Data di nascita <INPUT name="dnas" type="text" tabindex="3"> </FIELDSET> Tecnologie di Sviluppo per il WEB 64

65 Esempio: parte 2 <FIELDSET> <LEGEND ALIGN="CENTER">Indirizzo</LEGEND> Via: <INPUT name="via" type="text" tabindex="4"> Numero: <INPUT name= Num" type="text" tabindex= 5"><BR> C.A.P.: <INPUT name= cap" type="text" tabindex= 6"> Città: <INPUT name= citta" type="text" tabindex= 7"> Provincia: <INPUT name= prov" type="text" tabindex= 8"> </FIELDSET> Tecnologie di Sviluppo per il WEB 65

66 Risultato Tecnologie di Sviluppo per il WEB 66

67 ESEMPI form7.html form8.html forme2.html forme4.html formeoptgroup.html Tecnologie di Sviluppo per il WEB 67