HTML e interattività FORM

Транскрипт

1 HTML e interattività FORM

2 Interattività delle pagine web I moderni siti web non sono più soltanto un insieme di pagine da leggere con testo e immagini, ma rappresentano uno strumento per interagire con gli utenti. Ad esempio, un'azienda non solo può presentare i suoi prodotti, ma può anche raccogliere richieste di informazioni o ordini per i suoi prodotti, può effettuare vendite. Pertanto, le pagine web devono presentare uno strumento per raccogliere i dati inviati dall'utente. Si deve poter compilare moduli formati da caselle di testo, pulsanti, bottoni grafici, ecc.

3 Interattività delle pagine web I moduli vengono denominati FORM Gli oggetti grafici che possono essere presenti nei form sono : caselle di testo caselle di testo per campi speciali aree di testo caselle di controllo pulsanti di opzione caselle combinate pulsanti di comando

4 La descrizione dei moduli è racchiusa tra la coppia di Tag <FORM> </FORM> <html> <head> <title>esempio</title> </head> <body> <form> </form> </body> </html>

5 Caselle di testo <INPUT TYPE="text" NAME="nomecontrollo" MAXLENGTH="numcar" size = "numero" VALUE="valoreiniz" > <html> <head> <title>esempio</title> </head> <body> <form> <br><br> Cognome : <INPUT TYPE="text" NAME="cognome"> <br><br> Nome : <INPUT TYPE="text" NAME="nome"> </form> </body> </html>

6 Caselle di testo

7 Caselle di testo per campi speciali come password (asterischi al posto dei caratteri) <INPUT TYPE="password" NAME="nomecontrollo" MAXLENGTH="numcar" > <html> <head> <title>esempio</title> </head> <body> <form> <p> Password <INPUT TYPE="password" NAME="pwd"> </form> </body> </html>

8 Caselle di testo per campi speciali - nascosti <INPUT TYPE="hidden" NAME="nomecontrollo" value="valore" > <html> <head> <title>esempio</title> </head> <body> <form> <p> Password <INPUT TYPE="hidden" NAME="codice" value="abcdefgh"> </form> </body> </html>

9 Aree di testo <TEXTAREA NAME="nomecontrollo" ROWS="numrighe" COLS="numcolonne" > </TEXTAREA> <html> <head> <title>esempio</title> </head> <body> <form> <p> Cognome : <INPUT TYPE="text" NAME="cognome"> <p> Nome : <INPUT TYPE="text" NAME="nome"> Inserisci le tue osservazioni <TEXTAREA NAME="osservazioni" ROWS="10" COLS="50" > </TEXTAREA> </form> </body> </html>

10 Area di testo

11 Caselle di controllo <INPUT TYPE="checkbox" NAME="nomecontrollo1" VALUE="valore1" checked > Opzione1 <INPUT TYPE="checkbox" NAME="nomecontrollo2" VALUE="valore2" > Opzione2 <INPUT TYPE="checkbox" NAME="nomecontrollon" VALUE="valoren" > Opzionen <form> Lingue conosciute <BR> <INPUT TYPE="checkbox" NAME="ConosceIta" VALUE="True" checked> Italiano <INPUT TYPE="checkbox" NAME="ConosceFra" VALUE="True" > Francese <INPUT TYPE="checkbox" NAME="ConosceIng" VALUE="True" > Inglese <INPUT TYPE="checkbox" NAME="ConosceSpa" VALUE="True" > Spagnolo </form>

12 Caselle di controllo

13 Pulsanti di opzione <INPUT TYPE="radio" NAME="nomecontrollo" VALUE="valore1" checked > Opzione1 <INPUT TYPE="radio" NAME="nomecontrollo" VALUE="valore2" > Opzione2 <INPUT TYPE="radio" NAME="nomecontrollo" VALUE="valoren" > Opzionen <form> Modalità di pagamento <BR> <INPUT TYPE="radio" NAME="pagamento" VALUE="Contanti" checked > Contanti <INPUT TYPE="radio" NAME="pagamento" VALUE="Bancomat" > Bancomat <INPUT TYPE="radio" NAME="pagamento" VALUE="Carta" > Carta di credito </form>

14 Pulsanti di opzione

15 Casella combinata <SELECT NAME="nomecontrollo"> <OPTION VALUE="1" selected > Opzione1 </OPTION> <OPTION VALUE="2" > Opzione2 </OPTION> <OPTION VALUE="n" > Opzionen </OPTION> </SELECT> <form> Regione <SELECT NAME="regione"> <OPTION VALUE="1" selected > Nord </OPTION> <OPTION VALUE="2" > Centro </OPTION> <OPTION VALUE="3" </SELECT> </form> > Sud </OPTION>

16 Casella combinata

17 Casella combinata con possibilità di selezione multipla <SELECT MULTIPLE NAME="nomecontrollo"> <OPTION VALUE="1" > Opzione1 </OPTION> <OPTION VALUE="2" > Opzione2 </OPTION> <OPTION VALUE="n" > Opzionen </OPTION> </SELECT> <form> <SELECT MULTIPLE NAME="Hobby"> <OPTION VALUE="1" > Musica </OPTION> <OPTION VALUE="2" > Calcio </OPTION> <OPTION VALUE="3" > Collezionismo </OPTION> <OPTION VALUE="4" > Lettura </OPTION> </SELECT> </form>

18 Pulsanti di comando - conferma <INPUT TYPE="submit" NAME="nomecontrollo" VALUE="etichettaDelpulsante" > Pulsanti di comando - annullamento <INPUT TYPE="reset" NAME="nomecontrollo" VALUE="etichettaDelpulsante" > <form> <INPUT TYPE="submit" NAME="conf" VALUE="Invia" > <INPUT TYPE="reset" NAME="canc" VALUE="Cancella" > </form>

19 Pulsanti d comando conferma, annullamento

20 Interattività delle pagine web L'invio dei dati è solitamente organizzato in due parti (o in due pagine): la pagina che contiene i vari campi dei form, che consentono all'utente di effettuare delle scelte, scrivere del testo, ecc. che chiamiamo principale la pagina che effettua "il lavoro" vero e proprio di processare e raccogliere i dati che chiamiamo secondaria e che viene richiamata dalla principale. E' la pagina php.

21 Passaggio di informazioni tra pagine Una volta raccolte le informazioni attraverso il form occorre effettuare il loro passaggio alla pagina che le elaborerà. Tale azione può essere realizzata attraverso i metodi GET e POST.

22 HTML Parametri del Tag <FORM> Method = GET" si effettua contemporanea richiesta della pagina secondaria ed invio dei dati Method ="POST" prima viene contattata la pagina secondaria sul server che deve processare i dati, e poi vengono inviati i dati stessi

23 Passaggio di informazioni tra pagine metodo GET Dopo la compilazione del form, quando si fa clic sul pulsante INVIO, il browser dapprima unisce in una stringa i seguenti elementi: l'url definito per il parametro Action nella intestazione del Form un punto interrogativo (?) per ogni controllo del form il nome della variabile (parametro NAME del controllo) il segno di uguale (=) il valore inserito una 'e' commerciale (&) i parametri NAME e VALUE del pulsante Invio separati dal carattere uguale (=) Successivamente esegue il link costituito dalla stringa così generata.

24 HTML Parametri del Tag <FORM> <FORM Name ="nomeform" Action ="paginasecondaria" Method ="GET POST"> Name = nomeform" indica il nome che si vuole attribuire al modulo Action = paginasecondaria" indica il nome o il pathname della pagina Php che processerà i dati Method = GET POST" indica il metodo che si vuole adottare per l'invio dei dati dalla pagina principale (quella con cui si sono raccolti i dati) a quella secondaria (quella che processerà i dati). Ovviamente quando vi siano dati da passare.

25 HTML Parametri del Tag <FORM> <FORM Name ="nomeform" Action ="paginasecondaria" Method ="GET POST"> </FORM> <html> <form name = "DatiUtente" action="eseguiquery.php" method="get" > </form> </body> </html>

26 Passaggio di informazioni tra pagine metodo GET 127,0,0,1/inslibri.php?id=123&titolo=Php&autore=Collins&editore=McGraw- Hill&materia=Informatica&argomento=Web&conf=Invia

27 Passaggio di informazioni tra pagine metodo GET Nella pagina chiamata ciascuno dei dati passati sono considerati variabili e identificati secondo le regole relative. Es. $titolo <?php echo $titolo;?>

28 Grazie per l'attenzione

HTML e interattività FORM

D B M G Il linguaggio HTML

1) Il client(browser utilizzato) invia al server i dati inseriti dall utente. Server

HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni

Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8. Andrea Marchetti IIT-CNR 2011/2012

04/05/2011. Lezione 6: Form

Dott.ssa Adriana Pietramala

MODULO 1 PARTE 3. Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link)

Modulo o Form in Html

ESEMPI DI FORM (da www.html.it)

DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE

I FORM. L'attributo action contiene l'url del file php a cui devono essere inviati i file per essere elaborati.

PHP & MySQL. Giselda De Vita

Interazione con l utente : i moduli.

Form HTML. <form> campi del modulo </form>

Laboratorio Progettazione Web PHP e FORMs HTML. Andrea Marchetti IIT-CNR [email protected] 2013/2014

Guida introduttiva al PHP

Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche

Esercizi su HTML5 e form

Esercizi su JavaScript, DOM e Web Storage

I Tag dell html. Parte quarta

Il linguaggio HTML - Parte 3

Sicurezza Protezioni in una pagina Web

Esercizi su HTML e JavaScript

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...

MODULI E FORM. L'attributo enctype specifica il tipo di media utilizzato per codificare i dati del modulo, per default è di tipo MINE.

Array, Funzioni e interazione con l utente

HTML FORM E PHP. Programmazione Web 1

Procedura di login e sessione

Lezione 6: Form 27/04/2012

PHP. A. Lorenzi, R. Giupponi, D. Iovino LINGUAGGI WEB. LATO SERVER E MOBILE COMPUTING Atlas. Copyright Istituto Italiano Edizioni Atlas

Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente!