Lezione07

383 views

Published on

Prova di Slideshare

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
383
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lezione07

  1. 1. INTERNET DA PROTAGONISTA<br />lezione 7<br />20 dicembre 2010<br />
  2. 2. PROGRAMMA<br />Svolgimento test intermedio Cassano, Favullo, Pizzolorusso<br />Classifica aggiornata<br />Analisi problematiche rilevate nella pubblicazione dei siti pubblicati<br />I Moduli nel linguaggio HTML<br />Test di gruppo<br />
  3. 3. I FORM (1)<br />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.<br />
  4. 4. I FORM (2)<br />Il tag fondamentale è proprio <FORM><FORM NAME=”nome” ACTION=”url_pagina” METHOD=”POST|GET” TARGET=”frame”><br />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”><br />Type può valere anche “password” (per occultare i caratteri inseriti)<br />Size limita la dimensione della casella di testo<br />Maxlength imposta il numero max di caratteri che verranno accettati<br />
  5. 5. I FORM (3)<br />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<br />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:<br />SUBMIT - provoca l’invio dei dati da parte del browser al server web<br />RESET – provoca la cancellazione di tutti i dati digitati dall’operatore nel browser<br /><INPUT TYPE="SUBMIT" NAME="submit" VALUE="Inviaquestionario"><br /><INPUT TYPE="RESET" NAME="reset" VALUE=“Cancella”><br />
  6. 6. I FORM (4)<br />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:<br />CHECKBOX<br />RADIO<br />Esempio di checkbox:<br /><INPUT TYPE="CHECKBOX" NAME="domanda1" VALUE="risposta1">informazione<br><br /><INPUT TYPE="CHECKBOX" NAME="domanda2" VALUE="risposta2">automatica<br><br /><INPUT TYPE="CHECKBOX" NAME="domanda3" VALUE="risposta3">interesse<br><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. <br />Per gestire una Option Button si usa l’attributo “RADIO”Esempio:<br /><INPUT type="RADIO" name="giudizio" value="sufficiente"><br /><INPUT type="RADIO" name="giudizio" value="buono“><br /><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. <br />
  7. 7. I FORM (5)esempio<br /><html><br /><head><title>Prova Tabella</title></head><br /><body><br /><FORM ACTION="mailto:gerardo.zenga@gmail.com" METHOD="POST"><br /><B>Il termine <I>Informatica</I> deriva da:</B><br><br /> <INPUT TYPE="CHECKBOX" NAME="domanda1" VALUE="risposta1">informazione<br><br /> <INPUT TYPE="CHECKBOX" NAME="domanda2" VALUE="risposta2">automatica<br><br /> <INPUT TYPE="CHECKBOX" NAME="domanda3" VALUE="risposta3">interesse<br><br /> <BR><BR><br /> <B>L’<I>IT</I> deriva da:</B><br /> <input type="radio" name="domanda4" VALUE="risposta1"> Information Technology<br><br /> <INPUT TYPE="radio" NAME="domanda4" VALUE="risposta2"> InnovationTechnology<br><br /><BR><BR><br /><INPUT TYPE="SUBMIT" NAME="submit" VALUE="Inviaquestionario"><br /> <INPUT TYPE="RESET" NAME="reset" VALUE="Cancella"><br /></FORM><br /></body><br /></html><br />
  8. 8. I FORM (6)<br />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. <br />I valori scelti dall’utente possono essere uno (default) oppure un insieme aggiungendo a SELECT l’attributo MULTIPLE.<br /><FORM ACTION=”script/query.asp” METHOD=”POST”><br /> <SELECT MULTIPLE NAME=”categoria”><br /> <OPTION SELECTED VALUE=”PC”>PC<br /> <OPTION VALUE=”stampanti”>stampanti<br /> <OPTION VALUE=”monitor”>monitor<br /> </SELECT><br /> <SELECT NAME=”anno”><br /> <OPTION VALUE=”2004”>2004<br /> <OPTION VALUE=”2005”>2005<br /> </SELECT><br /> <INPUT TYPE=”SUBMIT” NAME=”submit” VALUE=”Esegui”><br /></FORM><br /> <br />In questo caso verrà restituito: categoria=PC e anno=2004<br />
  9. 9. TEST 08<br />Utilizzando tutti e soli i tag studiati sino ad oggi, provare a migliorare il sito web realizzato dal gruppo di lavoro.<br />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)<br />Inviare all’indirizzo e-mail: gerardo.zenga@gmail.com solamente l’indirizzo del sito web pubblicato su Altervista.org<br />indicando come oggetto della e-mail il nome del gruppo di lavoro.<br />

×