La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "HTML – I Form (moduli) Laboratorio di Applicazioni Informatiche II mod. A."— Transcript della presentazione:

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

2 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 , 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)

3 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)

4 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à. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) 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 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).

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

6 Contenuto del modulo Un form è racchiuso tra i tag e ed è strutturato come segue: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) Allinterno dei tag si usano i tag: che impostano le aree viste in precedenza in modo che accettino i dati introdotti dall'utente.

7 Lelemento base per la definizione degli elementi di un form è, che consente di creare vari tipi di campi, detti controlli, per la immissione dei dati. possiede numerosi attributi: 1. name : specifica il nome simbolico utilizzato nei trasferimenti e nella identificazione delloutput da parte dellelemento 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 dallutente 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

8 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 ), dove di solito viene immesso un nome o un indirizzo . È usato soprattutto per informazioni non predefinite che variano di volta in volta. Viene seguito dagli attributi size e maxlenght 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

9 Per creare una casella di testo, una casella di password e una casella di file si può usare il seguente codice HTML: Scrivi il tuo nome (Casella di testo) Scrivi la password (Casella di password) Scegli il file (Casella di file) Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag input

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

11 Le caselle possono avere lo stesso nome e valori diversi; in tale caso quando lutente seleziona una determinata casella, cliccandoci sopra, associa al nome quel determinato valore. Lattributo checked imposta su attivato il valore iniziale di una casella (che in sua assenza è disattivato). La creazione delle caselle di controllo dellesempio 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: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag input

12 Caselle di controllo Compact disc Floppy disc Hard disc Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag input

13 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 lattributo checked. Per ottenere la seguente visualizzazione: si può scrivere il seguente listato:

14 Pulsanti radio Maschio Femmina Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag input 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. 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 reset : riporta il form ai suoi valori iniziali; 4.9. submit : invia il form; button : crea un pulsante generico.

16 5. value : ogni controllo ha un valore iniziale e uno corrente, costituiti entrambi da stringhe di caratteri. Lattributo value specifica il valore iniziale e lo visualizza allinterno del campo. Ad esempio, il tag: Il tuo nome produce la seguente visualizzazione: Il valore corrente è impostato inizialmente al valore iniziale; quindi può essere modificato dallinterazione dellutente 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

17 6. src: definisce limmagine 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, leffetto 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, Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag input

18 Per creare unarea di testo che raccoglie un testo di più righe, di solito un commento immesso dallutente, si usa il tag. 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 laltezza 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, 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

19 Area di testo Esso produce la seguente visualizzazione: Ecco un esempio di listato contenente il tag : Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag textarea

20 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,, allinterno della quale si definisce ciascuna voce dellelenco con un tag, secondo lo schema:... Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag select

21 Il tag accetta i seguenti attributi: name: fornisce al menu un nome che sarà associato alle sue selezioni quando il form sarà elaborato; size: specifica laltezza 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 quando lopzione viene selezionata (in sua assenza il valore restituito è quello impostato da ); selected: indica che lopzione è preselezionata. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag select

22 Nellesempio che segue simuliamo la richiesta di un giudizio su un sito Web. Buono Sufficiente Ottimo Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag select

23 Scegli il mese della partenza giugno luglio agosto La realizzazione di un box di selezione con i tag e è esemplificata dal seguente listato: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag select

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

25 Ogni form deve contenere gli attributi: submit : crea un pulsante che invia i dati del modulo allURL indicato come valore dellattributo action (server Web o indirizzo di posta elettronica); reset : crea un pulsante che reimposta il modulo, riscrivendo in ogni casella i valori iniziali. Allinterno dei pulsanti submit, reset si può scrivere una dicitura diversa da quella preimpostata, assegnandola come valore allattributo value. Ad esempio, per ottenere la seguente visualizzazione: InvioReset2.htmlInvioReset2.html Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – submit, reset

26 Pulsanti di Invio e Reset Pulsante di invio : Pulsante di reset : Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) si può eseguire il seguente listato:

27 È anche possibile definire un pulsante semplice, tramite lattributo button, come indica il seguente esempio: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli)

28 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 accetta i tre attributi action enctype method Lattributo action determina il tipo di azione che sarà compiuto sulle informazioni immesse nel modulo, e può avere come valore: lindirizzo di posta elettronica che deve ricevere le informazioni del modulo, oppure: lindirizzo del programma eseguibile o dello script che gestirà i dati contenuti nei campi del form.

29 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) Per esempio, si potrebbe scrivere: Quando, come in questo caso, i dati vengono inviati a un indirizzo di posta elettronica, è bene formattarli come solo testo, impostando lattributo enctype al valore text/plain : In caso contrario, i dati verrebbero inviati come allegato.

30 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) In questo esempio lattributo action ha come valore lURL dello script CGI. Lattributo action non è obbligatorio, e in sua assenza viene utilizzato lURL della pagina contenente il form.


31 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) Lattributo 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 nellipertesto, ma per esempio si limitano a eseguire una ricerca in una banca dati. I form che utilizzano il valore get vengono gestiti facendo seguire lURL da un punto interrogativo ( ? ), seguito a sua volta dai dati dellapplicazione 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.

32 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) Il valore post va usato nei form che effettuano cambiamenti nellipertesto o in una banca dati. Il formato del messaggio è application/x-www-form-urlencoded

33 Quindi, ricapitolando, Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) Tag Attributi actionenctypemethod Valori indirizzotext/plainget 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.htmlCaselle3.html

34 Scrivi il tuo nome (Casella di testo) Scrivi la password (Casella di password) Scegli il file (Casella di file)

35 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) Caselle di controllo Compact disc Floppy disc Hard disc Analogamente, per inviare il modulo contenente le caselle di controllo si può riscrivere così il relativo listato: CaselleControllo4.htmlCaselleControllo4.html

36 Pulsanti radio Maschio Femmina Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form – tag input Mentre il listato completo per i pulsanti radio è: PulsantiRadio5.htmlPulsantiRadio5.html

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

38 Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli) Questo form invia una a Angelo Gallippi. Nome: Per inviare il modulo clicca sulla busta

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. A HTML – I Form (moduli) Per ottenere la seguente visualizzazione: 7.html 7.html si può eseguire il seguente listato:

41 Questo form invia una a Angelo Gallippi. Nome: Mail: Commento: Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli)

42 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.htmlModuli8.html

43 Moduli6 Tipi di input (form) Inserite il vostro nome (Casella di testo): Vi piace giocare a golf (Pulsante radio)? sì no In quali campi vi piace giocare (check box)? Kapalua St. Andrews Muirfield La Paloma In quale mese preferite giocate a golf (select box)? giugno luglio agosto Quali accessori da golf vi serviranno l'anno prossimo (textarea)? Grazie per le risposte. Laboratorio di Applicazioni Informatiche II mod. A HTML – I Form (moduli)


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

Presentazioni simili


Annunci Google