Lezione07
Upcoming SlideShare
Loading in...5
×
 

Lezione07

on

  • 246 views

Prova di Slideshare

Prova di Slideshare

Statistics

Views

Total Views
246
Views on SlideShare
246
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Lezione07 Lezione07 Presentation Transcript

  • INTERNET DA PROTAGONISTA
    lezione 7
    20 dicembre 2010
  • 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
  • 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.
  • 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
  • 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”>
  • 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.
  • 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>
  • 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
  • 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.