Recommended
More Related Content
Similar to Lezione07
Similar to Lezione07 (20)
Lezione07
- 1. INTERNET DA PROTAGONISTA lezione 7 20 dicembre 2010
- 2. PROGRAMMA Svolgimento test intermedio Cassano, Favullo, Pizzolorusso Classifica aggiornata Analisi problematiche rilevate nella pubblicazione dei siti pubblicati I Moduli nel linguaggio HTML Test di gruppo
- 3. I FORM (1) Un modulo (form) è formato da un insieme di campi (fields) per la raccolta di dati in un computer client ed il successivo invio ad un server WEB, per la loro elaborazione e memorizzazione.
- 4. I FORM (2) Il tag fondamentale è proprio <FORM><FORM NAME=”nome” ACTION=”url_pagina” METHOD=”POST|GET” TARGET=”frame”> Per inserire i campi in un modulo si utilizza il tag <INPUT> con i principali attributi:<INPUT TYPE=“TEXT” NAME=“COGNOME” SIZE=“15” MAXLENGTH=“10” VALUE=“ROSSI”> Type può valere anche “password” (per occultare i caratteri inseriti) Size limita la dimensione della casella di testo Maxlength imposta il numero max di caratteri che verranno accettati
- 5. I FORM (3) Il tag <TEXTAREA> serve per caselle di testo multilinea:Inserisci il tuo commento <BR><TEXTAREA NAME=“COMMENTO” COLS=“40” ROWS=“6”> </TEXTAREA>Tutto quello inserito fra apertura e chiusura del tag comparirà all’interno dell’area di testo I pulsanti di comando permettono di eseguire alcune azioni associate al loro evento predefinito click() e dispongono di funzionalità diverse come descritto nella tabella seguente: SUBMIT - provoca l’invio dei dati da parte del browser al server web RESET – provoca la cancellazione di tutti i dati digitati dall’operatore nel browser <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Inviaquestionario"> <INPUT TYPE="RESET" NAME="reset" VALUE=“Cancella”>
- 6. I FORM (4) Le check box e le optionbutton permettono all’utente di effettuare scelte nel browser all’interno di più voci predefinite (check box) oppure di una sola (optionbutton). Per impostarle si usano i valori degli attributi di TYPE nel modo seguente: CHECKBOX RADIO Esempio di checkbox: <INPUT TYPE="CHECKBOX" NAME="domanda1" VALUE="risposta1">informazione<br> <INPUT TYPE="CHECKBOX" NAME="domanda2" VALUE="risposta2">automatica<br> <INPUT TYPE="CHECKBOX" NAME="domanda3" VALUE="risposta3">interesse<br> Se la casella e' spuntata, input restituisce il valore contenuto nell’attributo VALUE (ad esempio, se si spunta “informazione” avremo domanda1=risposta1), al contrario non restituisce alcun valore. Checked imposta lo stato iniziale della casella all'atto del caricamento della pagina. Per gestire una Option Button si usa l’attributo “RADIO”Esempio: <INPUT type="RADIO" name="giudizio" value="sufficiente"> <INPUT type="RADIO" name="giudizio" value="buono“> <INPUT type="RADIO" name="giudizio" value="ottimo">Questo attributo ha funzioni simili a quello visto in precedenza, ma presenta piu' scelte possibili. Selezionando una voce tra quelle presenti, qualora abbiano tutte valore "name" identico, si deselezionano automaticamente le altre.
- 7. I FORM (5)esempio <html> <head><title>Prova Tabella</title></head> <body> <FORM ACTION="mailto:gerardo.zenga@gmail.com" METHOD="POST"> <B>Il termine <I>Informatica</I> deriva da:</B><br> <INPUT TYPE="CHECKBOX" NAME="domanda1" VALUE="risposta1">informazione<br> <INPUT TYPE="CHECKBOX" NAME="domanda2" VALUE="risposta2">automatica<br> <INPUT TYPE="CHECKBOX" NAME="domanda3" VALUE="risposta3">interesse<br> <BR><BR> <B>L’<I>IT</I> deriva da:</B> <input type="radio" name="domanda4" VALUE="risposta1"> Information Technology<br> <INPUT TYPE="radio" NAME="domanda4" VALUE="risposta2"> InnovationTechnology<br> <BR><BR> <INPUT TYPE="SUBMIT" NAME="submit" VALUE="Inviaquestionario"> <INPUT TYPE="RESET" NAME="reset" VALUE="Cancella"> </FORM> </body> </html>
- 8. I FORM (6) La casella di riepilogo permette di definire una lista mediante l’elemento SELECT che include un elenco di valori inseriti nel tag OPTION. In questo caso il dato trasmesso al server WEB è quello impostato nell’attributo VALUE di option sulla base della scelta fatta dall’utente nella lista; per impostare un elemento come selezionato si deve aggiungere a OPTION l’attributo SELECTED. I valori scelti dall’utente possono essere uno (default) oppure un insieme aggiungendo a SELECT l’attributo MULTIPLE. <FORM ACTION=”script/query.asp” METHOD=”POST”> <SELECT MULTIPLE NAME=”categoria”> <OPTION SELECTED VALUE=”PC”>PC <OPTION VALUE=”stampanti”>stampanti <OPTION VALUE=”monitor”>monitor </SELECT> <SELECT NAME=”anno”> <OPTION VALUE=”2004”>2004 <OPTION VALUE=”2005”>2005 </SELECT> <INPUT TYPE=”SUBMIT” NAME=”submit” VALUE=”Esegui”> </FORM> In questo caso verrà restituito: categoria=PC e anno=2004
- 9. TEST 08 Utilizzando tutti e soli i tag studiati sino ad oggi, provare a migliorare il sito web realizzato dal gruppo di lavoro. In particolare inserire nel proprio sito un form che richieda all’utente di inserire i propri dati personali (cognome, nome, sesso, età, città), un commento sul sito ed una valutazione a scelta tra le seguenti (ottimo – buono – discreto – sufficiente – mediocre – scarso) Inviare all’indirizzo e-mail: gerardo.zenga@gmail.com solamente l’indirizzo del sito web pubblicato su Altervista.org indicando come oggetto della e-mail il nome del gruppo di lavoro.