I form HTML ed il web dinamico. Uso di form HTML per inviare dati nel web dinamico. Struttura di base dei form HTML
|
|
|
- Simone Scarpa
- 5 anni fa
- Visualizzazioni
Transcript
1 I form HTML ed il web dinamico Antonio Lioy < > Politecnico di Torino Dip. Automatica e Informatica Uso di form HTML per inviare dati nel web dinamico orario.html partenza arrivo from=torino&to=roma&day=31/03/07 data INVIA CANCELLA orario.asp orario.asp Torino Roma 6:50 8:00 7:45 8:55 browser <html>... </html> server (dinamico) Struttura di base dei form HTML NAME (o ID): nome simbolico per far riferimento al form ACTION: URL relativa a script CGI, PHP, ASP o a qualsiasi tipo di elaborazione sul server METHOD: GET oppure POST gli elementi di un form sono detti controlli <form name="f1" method="get" action=" <input...> <select...>... <input type="submit"...> <input type="reset"...> A.Lioy - Politecnico di Torino ( ) H-1
2 tag INPUT Form: controlli di input TYPE: text, password, checkbox, radio, image, file, hidden, submit, reset, button NAME: nome simbolico (usare ID se è unico) per passare i dati al server via HTTP per accedere all elemento da script client-side (es. JavaScript o VBScript) VALUE: contenuto iniziale del campo o valore da inviare <input type=... name=... value=...> Form: pulsanti SUBMIT creato tramite tag INPUT invia i dati del form al server web RESET creato tramite tag INPUT imposta tutti controlli del form al valore di default BUTTON creato tramite tag BUTTON type=submit reset button più ricco (es. testo + immagine) rispetto a INPUT SUBMIT/RESET ed usabile anche fuori da un form Form: controlli orientati al testo <input type=text size=n maxlength=m name= > zona di testo lunga N caratteri, al massimo M <input type=password > come type=text ma visualizza i caratteri come * NON è un metodo sicuro per celare un password <input type=hidden name= value= > valore fisso da trasmettere al server di nascosto NON è un metodo sicuro per celare un dato <textarea rows=nr cols=nc name= >... testo iniziale... </textarea> zona di testo di NR righe, ciascuna di NC caratteri A.Lioy - Politecnico di Torino ( ) H-2
3 Esempio di form (text, password) <form action="/cgi-bin/query" method="get"> <p> your name: <input type="text" id="nome"> <br> your home page: <input type="text" id="home" value=" <br> password: <input type="password" id="pswd"> <br> <input type="submit" value="ok"> <input type="reset" value="annulla"> </p> Form: controllo a scelta singola (menù) tag SELECT per racchiudere le varie opzioni tag OPTION per le singole opzioni, eventualmente con una scelta di default (SELECTED) tag OPTGROUP per raggruppare opzioni (menù a cascata; un solo livello di raggruppamento) preferire attributo LABEL <select name=...> <option label=... > <option>... </option> <option selected>... </option> </select> Form: controlli a scelta multipla CHECKBOX un elemento di tipo on/off indipendente da altri controlli dello stesso tipo inviati al server tutti quelli selezionati (CHECKED) potrebbe anche non inviare niente al server RADIO un insieme di elementi di tipo on/off identificati dallo stesso NAME (in questo caso NON si può usare ID perché il nome non è unico ma comune) mutuamente esclusivi (selezionabili uno solo) inviato al server il valore dell unico elemento selezionato (CHECKED) A.Lioy - Politecnico di Torino ( ) H-3
4 Esempio di form (checkbox) <form action="/cgi-bin/query" method="get"> <p> Compose your own fruit salad: <br> <input type="checkbox" id="banana"> Banana <input type="checkbox" id="apple" checked> Apple <input type="checkbox" id="orange"> Orange (red) <br> <input type="submit"> <input type="reset"> </p> Si noti: id diverso per ogni pulsante pulsante pre-selezionato (checked) Esempio di form (radio) <form action="/cgi-bin/query" method="get"> <p> Select your preferred fruit: <input type="radio" name="frt" value="banana"> Banana <br> <input type="radio" name="frt" value="apple checked> Apple <br> <input type="radio" name="frt" value="orange"> Orange (red) <br> <input type="submit"> <input type="reset"> </p> Si noti: stesso name per i tre pulsanti valore di default (checked) Controlli disabilitati o a sola lettura attributo readonly non permette all utente di cambiare il valore di un controllo (possibile solo tramite script client-side) valido nei controlli INPUT e TEXTAREA attributo disabled disabilita un controllo l utente non può cambiarne il valore non verrà inviato al server valido nei controlli INPUT, TEXTAREA, BUTTON, SELECT, OPTION, OPTGROUP attributi Booleani cambiabili da script client-side A.Lioy - Politecnico di Torino ( ) H-4
5 Interazione tra form e script script associato ad eventi DOM onclick = esegui_azione( ); all interno dello script, i dati del form sono letti tramite il modello DOM in due modi diversi gerarchia dei nomi alert(document.f1.frt.value) estrazione diretta dell elemento con ID unico alert( document.getelementbyid("frt").value ) Uso di script per validare un form si usa il modello degli eventi DOM per attivare uno script lato client tipicamente si associa uno script all'evento onsubmit: script eseguito quando si preme il pulsante Submit se lo script restituisce il valore "true" allora i dati del form vengono inviati al server, altrimenti no possibile associare script ad altri eventi per validare singoli controlli non appena vengono introdotti dei dati Esempio di script per validare un form <form name="sample" method="post" action="..." onsubmit="return validateform()"> <p> Nome: <input type="text" name="nome" size="30"><br> Età: <input type="text" name="eta" size="3"><br> Data di nascita: <input type="text" name="nascita" size="10"><br> <input type="submit"> <input type="reset"> </p> A.Lioy - Politecnico di Torino ( ) H-5
6 Script di validazione <script type="text/javascript"> function validateform() { formobj = document.sample; if (formobj.nome.value == "") { alert("non hai introdotto il nome!"); return false; } else if (formobj.eta.value == "") { alert("non hai introdotto l'eta!"); return false; } else if... return false; return true; } </script> 16 Come fare la validazione? controllare che il valore associato ad un controllo: non sia vuoto (se è un caso possibile dato il tipo) abbia un valore corretto ("looks good") piuttosto che non abbia un valore sbagliato ("doesn't look bad") esempio (validazione del valore di un controllo di testo usato per introdurre un CAP): contenga solo caratteri numerici ('0' '9') sia composto esattamente da cinque caratteri (opzionale) se è noto l'elenco di tutti i possibili CAP controllare che il valore fornito sia uno di questi in caso di errore, fornire un avviso all'utente che lo aiuti a correggere l'errore (ossia NON "CAP errato") Trasmissione parametri di un form (GET) URI = concatenazione del campo action con? e quindi i parametri espressi nella codifica application/x-www-form-urlencoded il body HTTP della richiesta rimane vuoto A.Lioy - Politecnico di Torino ( ) H-6
7 application/x-www-form-urlencoded è la codifica di default usabile sia con GET sia con POST genera una stringa composta dai nomi dei controlli del form seguiti da "=" e dai valori inseriti: nome_ctrl1=val_ctrl1&nome_ctrl2 ctrl2=val_ctrl2& separatore tra un controllo ed il successivo: & spazi nei nomi o nei valori sostituiti da "+" caratteri speciali, non US-ASCII o con significato particolare ( /? ) sostituiti con %xx (ove "xx" è il numero esadecimale del suo codice ISO ) Es. x-www-form-urlencoded: form <form name="sample" method="get" action="/cgi-bin/acquisisci"> Nome e cognome: <input type="text" text name="cognome" size="30"><br> Numero di figli: <input type="text" name="figli" size="3"><br> Data di nascita: <input type="text" name="nascita" size="10"><br> <input type="submit"> <input type="reset"> Es. x-www-form-urlencoded: trasmissione se il precedente form venisse riempito dal signor Marco Noè, nato il 30/10/74, genitore di 3 figli allora verrebbe creata la seguente stringa: cognome=marco+no%e8&figli=3&nascita=30%2f10%2f74 A.Lioy - Politecnico di Torino ( ) H-7
8 Trasmissione parametri di un form (POST) URI coincide col valore del campo action (default, ovvero enctype non specificato) Content-Type: application/x-www-form-urlencoded Content-Length: body contiene solo la stringa dei parametri nella forma application/x-www-form-urlencoded con enctype=multipart/form-data Content-Type: multipart/form-data Content-Length: body = messaggio MIME (una sezione per ogni parametro) nota: obbligatorio per controlli di tipo File Esempio invio dati con GET: il form <form method="get" action="/cgi/insaula"> <table border="0"> <td>numero aula:</td> <td><input type="text" size="8" name="num"></td> <td>sede:</td> <td><input type="text" size="15" name="sede"></td> <td> <input type="submit" value="invia"> <input type="reset" value="cancella"> </td> </table> Esempio invio dati con GET: URI, HTTP, env URI canale HTTP (C > S) GET /cgi/insaula?num=12a&sede=sede+centrale HTTP/1.1 Accept: image/gif, image/x-xbitmap,image/jpeg,*/* g /jp g, / Referrer: Accept-Language: it Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible;msie 6.0;Windows NT 5.0) Host: Connection: Keep-Alive num=12a&sede=sede+centrale QUERY_STRING A.Lioy - Politecnico di Torino ( ) H-8
9 Invio dati con POST (caso 1): il form <form method="post" action="/cgi/insaula"> <table border="0"> <td>numero aula:</td> <td><input type="text" size="8" name="num"></td> <td>sede:</td> <td><input type="text" size="15" name="txtsede"></td> <td> <input type="submit" value="invia"> <input type="reset" value="cancella"> </td> </table> Invio dati con POST (caso 1): URI, HTTP, env URI canale HTTP (C > S) POST /cgi/insaula HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, */* Referrer: Accept-Language: g it Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible;msie 6.0;Windows NT 5.0) Host: Connection: Keep-Alive Content-Type: application/x-www-form-urlencoded Content-Length: 26 num=12a&txtsede=sede+centrale QUERY_STRING Invio dati con POST (caso 2): il form <form method="post" action="/cgi/insaula enctype="multipart/form-data"> <table border="0"> <td>numero aula:</td> <td><input type="text" size="8" name="num"></td> <td>sede:</td> <td><input type="text" size="15" name="txtsede"></td> <td> <input type="submit" value="invia"> <input type="reset" value="cancella"> </td> </table> A.Lioy - Politecnico di Torino ( ) H-9
10 Invio dati con POST (caso 2): URI, HTTP, env URI canale HTTP (C > S) POST /cgi/insaula HTTP/ Content-Type: multipart/form-data; boundary=aabbcc Content-Length: AaBbCc Content-Disposition: form-data; name="num" 12A --AaBbCc Content-Disposition: form-data; name="txtsede" Sede Centrale --AaBbCc-- N.B. valore non codificato Attenzione ai campi vuoti! ad eccezione del tag SELECT tutti gli altri campi di un form possono non trasmettere input ed in un caso (TYPE=CHECKBOX) può anche non essere presente la variabile relativa al campo (se è OFF) le applicazioni lato server devono saper trattare tutti i casi Esempio 1 <form name="sample" method="get" action=" Carta di credito: <input type="text" name="cardno" size="16"> <br> MasterCard <input type="radio" name="cc" value="mastercard"> <br> Visa <input type="radio" name="cc" value="visacard"> <br> <input type="submit"> <input type="reset"> cardno= &cc=mastercard A.Lioy - Politecnico di Torino ( ) H-10
11 Esempio 2: il form <form name="sample" method="get" action=" cognome: <input type="text" name="cogn" size="30"> <br> hobby: <ul> <li>pesca <input type="checkbox" name="cb_pesca"> <li>sci <input type="checkbox" name="cb_sci"> </ul> <input type="submit"> <input type="reset"> Esempio 2: dati trasmessi al server L applicazione lato server deve gestire questi casi (ed altre combinazioni ) cogn= cogn=de+chirico cogn=de+chirico&cb_pesca=on cogn=de+chirico&cb_pesca=on&cb_sci=on Form: file upload il controllo <input type="file" > inserisce un elemento per la selezione del nome di un file la forma esatta del controllo dipende dal browser ma spesso: campo di testo per inserire direttamente il nome pulsante per attivare interfaccia grafica (navigazione del file system locale e selezione del file) tutti i dati del form sono trasmessi singolarmente come parti di un messaggio MIME usabile solo con POST e tipo MIME specifico: <form action=... enctype="multipart/form-data" method="post"> A.Lioy - Politecnico di Torino ( ) H-11
12 Esempio di form (file upload) <form action="/cgi/fileprint" enctype="multipart/form-data" method="post"> File da stampare: <input type="file" name="myfile"> Numero di copie da stampare: <input type="text" name="ncopie" size="2"> <br><br> <input type="submit" value="submit"> File upload trasferimento C > S POST /cgi/fileprint HTTP/1.1 Host: server.it Content-Type: multipart/form-data; boundary=aabb Content-Length: AaBb Content-Disposition: form-data; name="myfile"; filename="orario.txt" Content-Type: text/plain 8:30-12:30 aula 12 --AaBb Content-Disposition: form-data; name="ncopie" 3 --AaBb-- Form: meglio trasmissione con GET o POST? GET: permette di fare caching della pagina di risposta permette di creare bookmark e link alla pagina lascia traccia del valore dei parametri nel log del server (problema di privacy e/o sicurezza) alcuni server limitano la lunghezza della query string a 256 caratteri se è all interno della URI semplifica il debug dei form POST: non permette caching e bookmarking non lascia traccia nel log non pone limiti alla query string A.Lioy - Politecnico di Torino ( ) H-12
I form HTML ed il web dinamico
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Uso di form HTML per inviare dati nel web dinamico orario.html partenza arrivo from=torino&to=roma&day=31/03/07
Uso di form HTML per inviare dati nel web dinamico. I form HTML ed il web dinamico. Accesso ai dati di un form HTML. Struttura di base dei form HTML
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica orario.html Uso di form HTML per inviare dati nel web dinamico partenza arrivo data INVIA
Uso di form HTML per inviare dati nel web dinamico. I form HTML ed il web dinamico. Struttura di base dei form HTML. Form: controlli di input
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica orario.html Uso di form HTML per inviare dati nel web dinamico partenza arrivo data browser
I form HTML ed il web dinamico. Uso di form HTML per inviare dati nel web dinamico. Accesso ai dati di un form HTML. script client-side
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Uso di form HTML per inviare dati nel web dinamico orario.html partenza arrivo from=torino&to=roma&day=31/03/07
Uso di form HTML per inviare dati nel web dinamico. I form HTML ed il web dinamico. Struttura di base dei form HTML. Accesso ai dati di un form HTML
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica orario.html Uso di form HTML per inviare dati nel web dinamico partenza arrivo data INVIA
I form HTML ed il web dinamico
I form HTML ed il web dinamico Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Uso di form HTML per inviare dati nel web dinamico orario.html partenza arrivo from=torino&to=roma&day=31/03/07
HTML 6. Il modulo. Tipi di controlli. Esempio di modulo. I moduli a.k.a. form
I moduli a.k.a. form HTML 6 Il modulo Un modulo è un'area della pagina predisposta per accettare dei dati in ingresso dall'utente Gli utenti forniscono dati al WEB server che restituisce una risposta (pagina
HTML Interazione con l utente
HTML Interazione con l utente Il web è interattivo e per questo motivo una pagina html deve prevedere la possibilità, per l'utente, di inviare informazioni o effettuare delle scelte. Il linguaggio HTML,
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
D B M G Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
@2011 Politecnico di Torino 1
Concetti di base Programmazione Web Il linguaggio HTML HTML consente di annotare un testo per contrassegnare le parti che lo compongono Le annotazioni sono realizzate tramite i "tag" Visualizzare documenti
Modulo o Form in Html
Pagina dinamica E un documento contenente oggetti, dati e informazioni che possono variare anche in base all iterazione dell utente con il documento stesso. Un esempio classico è quello di una persona
HTML 6. I moduli a.k.a. form
HTML 6 I moduli a.k.a. form 1 Il modulo Un modulo è un'area della pagina predisposta per accettare dei dati in ingresso dall'utente Gli utenti forniscono dati al WEB server che restituisce una risposta
HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML: FORM Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Form Text Radio Select CheckBox TextArea Button ... L'elemento serve per delimitare un modulo
I moduli HTML Interazione per l invio di informazioni in Internet
I moduli HTML Interazione per l invio di informazioni in Internet Sviluppo di siti web UD09 Fablab Design Interazione e uso dei moduli Uno dei fattori che ha decretato il successo del Web è senz'altro
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8. Andrea Marchetti IIT-CNR 2011/2012
Laboratorio Progettazione Web PHP e FORMs HTML - Lezione 8 Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2011/2012 Architettura di una applicazione Web Browser Web HTTP Server Web Dati View Control
Il tag form indica l'inizio della costruzione di un modulo. Necessita del tag di chiusura
LE FORM Le form, note in italiano anche come moduli sono delle strutture che permettono all'utente di inserire dei dati o di effettuare delle scelte. Le form, prese singolarmente non sono nient'altro che
Laboratorio di Informatica (Chimica)
Laboratorio di Informatica (Chimica) HTML: Elementi Avanzati. Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter Cazzola
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
04/05/2011. Lezione 6: Form
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Interazione con l utente : i moduli.
Interazione con l utente : i moduli. Nelle lezioni fin qui riportate, non abbiamo mai trattato l input di utente. Nelle applicazioni web, l input dell utente si acquisisce tramite i moduli (o FORM) HTML.
HTML e interattività FORM
HTML e interattività FORM 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
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 Le tabelle Creazione di una tabella: le tabelle vengono utilizzate sia per inserire dati che per migliorare
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML Settima lezione. 7 Aprile di Ivano Stranieri
HTML 4.01 Settima lezione 7 Aprile 2004 di Ivano Stranieri 0 Lezione precedente Cosa sono i FRAME A cosa servono i FRAME Sintassi Attributi Collegamenti e NOFRAME IFRAME Vantaggi e svantaggi dei FRAME
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
LEZIONE 5. Introduzione a Javascript
LEZIONE 5 Introduzione a Javascript ARCHITETTURA CLIENT SERVER Richiesta Request Indirizzo Web (URL) + dati Risposta Response HTML-CSS-Javascript WEB SERVER Un Web Server è un server che fornisce servizi
Tito Flagella - Il protocollo HTTP
Tito Flagella - tito@link.it Il protocollo HTTP Il protocollo HTTP È il protocollo standard tramite il quale i server Web rispondono alle richieste dei client (inizialmente i browser); È basato su un modello
HTML: CSS: Le proprietà di base per dare stile ai form
HTML: Elementi di base: caselle e aree di testo, radio button, checkbox, bottoni submit e reset, campi nascosti, file upload, menù di selezione. Accessibilità dei form: label, fieldset e legend, optgroup
Form HTML. <form> campi del modulo </form>
Form HTML I form (o moduli) HTML permettono ad un utente di interagire con la pagina che sta visitando. L inserimento di un form in una pagina web avviene mediante il tag FORM. Attributi del form campi
Strumenti a disposizione
FORM Strumenti a disposizione L'HTML visto fino ad ora permette di descrivere solo documenti statici e passivi Colori, immagini, testi, etc... L'utente può solo interagire con i link Non sempre questo
Laboratorio Progettazione Web PHP e FORMs HTML. Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2013/2014
Laboratorio Progettazione Web PHP e FORMs HTML Andrea Marchetti IIT-CNR andrea.marchetti@iit.cnr.ita 2013/2014 Struttura Applicazioni Web Browser Web HTTP Server Web API Dati Presentation Application Storage
Progettazione di siti web a.a. 2015/16
Form Progettazione di siti web a.a. 2015/16 Web form e frame Maria Simi Marzo, 2016 [Manuale di riferimento del W3C, Learning web design] HTML mette a disposizione strumenti per la raccolta di informazioni
Internet, il web e il linguaggio HTML. percorso 3. Form
Form Se le pagine web utilizzassero il linguaggio HTML limitatamente ai soli tipi di tag visti sino a questo punto, la comunicazione tra impianto tecnologico (computer, dati, programmi ecc.) ed utente
Sicurezza delle applicazioni web: protocollo HTTP
Università degli Studi di Milano Facoltà di Scienze Matematiche, Fisiche e Naturali Anno Accademico 2010/2011 Sicurezza delle applicazioni web: protocollo HTTP Alessandro Reina, Aristide Fattori 05 Maggio
LE PRIME ACTIVE SERVICE PAGE: oggetto REQUEST
LE PRIME ACTIVE SERVICE PAGE: oggetto REQUEST L'oggetto Request può essere considerato come l'esatto contrario dell'oggetto Response, infatti mentre quest'ultimo invia dati al browser, Request serve a
1) Il client(browser utilizzato) invia al server i dati inseriti dall utente. Server
2) Il Server richiama l'interprete PHP il quale esegue i comandi contenuti nel file.php specificato nell'attributo action del tag form creando un file HTML sulla base dei dati inviati dall utente 1) Il
Linguaggi di scripting
Linguaggi di scripting In generale uno script è un piccolo programma (al limite una sola istruzione) il cui codice viene inserito all'interno di una pagina HTML o collegato ad esso, e interpretato dal
Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche
Applicazioni Web: meccanismi per il passaggio di informazioni tramite HTTP Corso di Applicazioni Telematiche A.A. 2006-07 Lezione n.10 parte II Prof. Roberto Canonico Università degli Studi di Napoli Federico
Laboratorio di Basi di Dati/Basi di dati per Bioinformatica. Docenti: Alberto Belussi e Carlo Combi (lucidi a cura di Alberto Belussi) Lezione 5
Laboratorio di Basi di Dati/Basi di dati per Bioinformatica Docenti: Alberto Belussi e Carlo Combi (lucidi a cura di Alberto Belussi) Lezione 5 HyperText Markup Language! Linguaggio di descrizione di testi
Applicazioni web. Sommario. Parte 4 http. http Metodi, intestazioni e codici di stato get post Parametri e cookie. Applicazioni web.
Parte 4 http Sommario http Metodi, intestazioni e codici di stato get post Parametri e cookie 1 Http Hyper Text Transfer Protocol Protocollo di livello applicazione per sistemi informativi distribuiti,
HTML FORM E PHP. Programmazione Web 1
HTML FORM E PHP Programmazione Web 1 Form Un insieme di elemen5 in una pagina web con cui l'utente interagisce per inviare informazioni ad uno script Realizzazione di due cose la pagina contente il form
HTML Sintassi di HTML Tag principali per i contenuti I Forms
Lezione 1 HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms L HTML (HyperText Markup Language) g è il linguaggio gg di markup utilizzato per veicolare le informazioni
Dott.ssa Adriana Pietramala
Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Adriana Pietramala a.pietramala@mat.unical.it Riferimenti Sito del corso: Manuale PHP http://www.php.net/download-docs.php Editor di
PHP & MySQL. Giselda De Vita
PHP & MySQL Giselda De Vita - 2014 1 Per creare un applicazione WEB su APACHE, in linguaggio PHP, con Base Dati MySQL, possiamo lavorare in locale o in rete. Per lavorare in locale abbiamo bisogno di installare
I TAG - Form (moduli) (1/21)
I TAG - Form (moduli) (1/21) Scopo: Raccogliere dati dell utente, interagire con esso. L invio dei dati è solitamente organizzato in due parti: una pagina principale che contiene i vari campi dei form,
Esercizi su JavaScript, DOM e Web Storage
Linguaggi e tecnologie per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria informatica e automatica Sapienza Università di Roma, a.a. 2017/2018 Esercizi su JavaScript, DOM e Web Storage Esercizio
scrivere window.alert(). 2 Nell esempio sarebbe scritto solo var hello, senza pertanto attribuire alla variabile hello alcun valore
In genere il metodo alert() è usato per verificare il valore delle variabili durante la fase di correzione degli errori (debugging), fase che può essere svolta anche con l ausilio di appositi programmi
Linguaggi di Programmazione per il Web Parte 7
Linguaggi di Programmazione per il Web Parte 7 Interazione tra HTML e PHP I tag FORM e TABLE Autore Prof. Rio Chierego riochierego@libero.it 1 Siti Utili http://www.riochierego.it/mobile http://www.html.it/
DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE
MODULI O FORM DURANTE LA NAVIGAZIONE NEI SITI WEB I VISITATORI NON SOLO POSSONO CONSULTARE INFORMAZIONI STATICHE ADATTE ALLA LETTURA MA POSSONO SVOLGERE UN RUOLO ATTIVO NEI CONFRONTI DI UNA PAGINA WEB
ESEMPI DI FORM (da www.html.it)
ESEMPI DI FORM (da www.html.it) Vediamo, nel particolare, tutti i tag che HTML 4.0 prevede per la creazione di form. Questo tag apre e chiude il modulo e raccoglie il contenuto dello stesso,
Il Web come Interfaccia Utente di un Sistema Informativo
Web e basi di dati Il Web come Interfaccia Utente di un Sistema Informativo Occorre un meccanismo di interazione con il DBMS (attraverso il server Web) per la specifica di query e/o modifiche, es.. basate
Università di Bergamo Facoltà di Ingegneria. Applicazioni Internet B. Paolo Salvaneschi B3_2 V1.22. HTML Parte B
Università di Bergamo Facoltà di Ingegneria Applicazioni Internet B Paolo Salvaneschi B3_2 V1.22 HTML Parte B Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale
JavaScript. Caratteristiche del JavaScript. Javascript consente di rendere dinamiche le pagine HTML
JavaScript Caratteristiche del JavaScript Javascript consente di rendere dinamiche le pagine HTML Javascript è un linguaggio di programmazione con il quale è possibile produrre applicazioni eseguibili
MODULO 1 PARTE 3. Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link)
MODULO 1 PARTE 3 Programmazione (scripting) server-side con PHP 3.a HTTP request e HTTP response (form e link) Goy - a.a. 2009/2010 Programmazione Web 1 Gli oggetti HTTP request e HTTP response -I Vi ricordate?
Laboratorio di Basi di Dati e Web/Basi di dati e Multimedia. Docenti: Alberto Belussi e Carlo Combi Lezione 5
Laboratorio di Basi di Dati e Web/Basi di dati e Multimedia Docenti: Alberto Belussi e Carlo Combi Lezione 5 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard
Lezione 6: Form 27/04/2012
Lezione 6: Form In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es. per registrarsi ad un sito). Le informazioni sono poi
Tecnologie di Sviluppo per il Web
Tecnologie di Sviluppo per il Web JavaScript Introduzione versione 2.1 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina) G. Mecca Università della Basilicata
"-//W3C//DTD XHTML 1.1//EN
XHTML 1.1 extensible HyperText Markup Language DOCTYPE All inizio di un documento xhtml bisogna specificare a quali regole ci atteniamo. Tutti i documenti che scriveremo inizieranno con 2 righe particolari:
PHP 3. Interazione browser server. PHP e EGPCS 2. PHP e EGPCS 1. Interazione con il browser
PHP 3 Interazione con il browser Interazione browser server Quando un browser contatta un server gli invia alcune informazioni (si veda la lezione su HTTP) Ci sono sei tipi di informazioni a cui il server
Array, Funzioni e interazione con l utente
Array, Funzioni e interazione con l utente Laboratorio di Progettazione Web AA 2010/2011 Claudio Lucchese / Chiara Renso ISTI- CNR claudio.lucchese@isti.cnr.it Gli array sono contenitori in grado di memorizzare
Mantenimento dello stato
Mantenimento dello stato Laboratorio Progettazione Web AA 2009/2010 Chiara Renso ISTI- CNR - c.renso@isti.cnr.it Abbiamo visto come il passaggio di informazioni (parametri) tra le pagine possa avvenire
Esercizi su HTML5 e form
Linguaggi e tecnologie per il Web prof. Riccardo Rosati Corso di laurea in Ingegneria informatica Sapienza Università di Roma, a.a. 2016/2017 Esercizi su HTML5 e form Esercizio 1 Scrivere un documento
NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) E N G I N E = I
Esempio base: tabella amici Creare un sistema informatico che permetta di memorizzare il cognome, nome e data di nascita degli amici. Quindi creare una tabella per memorizzare i valori richiesti. Si chiede
IL LIVELLO APPLICAZIONI WEB e HTTP
Parte II - Reti di Calcolatori ed Internet IL LIVELLO APPLICAZIONI WEB e HTTP 7-1 Applicazioni di Rete World Wide Web URL Web Client Web Server HTTP Futuro del Web 7-2 World Wide Web (WWW) Il World Wide
Laboratorio di Basi di Dati Web/MM
Laboratorio di Basi di Dati Web/MM Docente: Alberto Belussi Lezione 5 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized Markup Language) Gli ipertesti
HTML ELEMENTI CONTENITORI. Elementi contenitori. <body> Nel body ci sono elementi vari (testi, immagini, moduli...)
HTML Elementi contenitori [corso avanzato] HTML5 ELEMENTI ELEMENTI CONTENITORI Nel body ci sono elementi vari (testi, immagini, moduli...) Oggi i siti organizzano lo spazio del body
Per la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:
I Form in HTML5 L'HTML mette a disposizione una serie di interessantissimi tag il cui scopo è quello di creare moduli con tanto di caselle di testo, opzioni, bottoni di invio ed altro ancora. Il termine
Array, Funzioni e interazione con l utente
Array, Funzioni e interazione con l utente Laboratorio di Progettazione Web AA 2009/2010 Chiara Renso ISTI- CNR - c.renso@isti.cnr.it Gli array sono contenitori in grado di memorizzare una sequenza di
Lato client: vuol dire che le operazioni programmate vengono svolte e visualizzate direttamente sul computer dell'utente collegato
Introduzione al linguaggio PHP Hypertext preprocessor Lato client: vuol dire che le operazioni programmate vengono svolte e visualizzate direttamente sul computer dell'utente collegato Lato server: vuol
I Tag dell html. Parte quarta
I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:
Web Server; FORM; e prima Programmazione
Web Server; FORM; e prima Programmazione Web Client Dati ulteriori per la richiesta richiesta F O R M risposta Web Server Dati ulteriori (impliciti/indiretti) Programming CGI programming la richiesta e
IL LIVELLO APPLICAZIONI WEB e HTTP
Parte II - Reti di Calcolatori ed Internet IL LIVELLO APPLICAZIONI WEB e HTTP Applicazioni di Rete World Wide Web URL Web Client Web Server HTTP Futuro del Web 7-1 7-2 World Wide Web (WWW) Il World Wide
Reti di Calcolatori. IL LIVELLO APPLICAZIONI WEB e HTTP
Reti di Calcolatori IL LIVELLO APPLICAZIONI WEB e HTTP D. Talia RETI DI CALCOLATORI - UNICAL 7-1 Applicazioni di Rete World Wide Web URL Web Client Web Server HTTP Futuro del Web D. Talia RETI DI CALCOLATORI
IL LIVELLO APPLICAZIONI WEB e HTTP
Reti di Calcolatori IL LIVELLO APPLICAZIONI WEB e HTTP D. Talia RETI DI CALCOLATORI - UNICAL 7-1 Applicazioni di Rete World Wide Web URL Web Client Web Server HTTP Futuro del Web D. Talia RETI DI CALCOLATORI
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 7. HTML Parte III (Aspetti avanzati) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso
Il linguaggio PHP. Elementi base
Il linguaggio PHP Elementi base Il Linguaggio PHP PHP è un acronimo ricorsivo che sta per PHP Hypertext Preprocessor Sintassi di base: un blocco di scripting PHP può stare ovunque in un documento, inizia
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L HTML non è un linguaggio di programmazione
Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML
Reti Il Linguaggio HTML Linguaggio HTML HTML = Hypertext Markup Language Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
MODULI E FORM. L'attributo enctype specifica il tipo di media utilizzato per codificare i dati del modulo, per default è di tipo MINE.
- 1 - MODULI E FORM I Moduli o Forms permettono di interagire con i visitatori del proprio sito offrendo loro la possibilità di immettere, o richiedere, informazioni tramite semplici caselle di testo,
Basi di dati - Laboratorio
Basi di dati - Laboratorio Corso di Laurea in Bioinformatica Docente: Barbara Oliboni Lezione 5 Contenuto della lezione Il Linguaggio HTML (HyperText Markup Language) Struttura del documento Formattazione
ISTITUTO ISTRUZIONE SUPERIORE "Q. Sella" BIELLA
1) [40pt]Scrivere il codice html per la visualizzazione della form di figura e aggiungere il codice Javascript che realizzi le seguenti operazioni dopo aver cliccato sul pulsante Invia. Se non risulta
Mantenimento dello stato
Mantenimento dello stato Laboratorio Progettazione Web AA 2010/2011 Claudio Lucchese / Chiara Renso ISTI- CNR claudio.lucchese@isti.cnr.it Abbiamo visto come il passaggio di informazioni (parametri) tra
Agent and Object Technology Lab Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma. Fondamenti di Informatica
Agent and Object Technology Lab Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma Fondamenti di Informatica Applicazioni web Michele Tomaiuolo Sommario Form e campi di input
Linguaggi e tecnologie per il Web 2016/2017 Facsimile di un compito d esame
Esercizio 1 Linguaggi e tecnologie per il Web 2016/2017 Facsimile di un compito d esame (a) Scrivere un documento HTML contenente una form contenente i seguenti campi: cognome e nome (casella di testo