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
|
|
|
- Teodoro Cavalli
- 6 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.php orario.php Torino Roma 6:50 8:00 7:45 8:55 browser <html>... </html> server (dinamico) Accesso ai dati di un form HTML da uno script client-side orario.html partenza arrivo data INVIA CANCELLA Errore: specificare arrivo from=torino to= day=31/03/07 script from=x&to=y&day=d orario.php orario.php Torino Roma 6:50 8:00 7:45 8:55 browser script client-side <html>... </html> server (dinamico) A.Lioy - Politecnico di Torino ( ) M-1
2 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"...> Form: controlli di input tag INPUT TYPE: text, password, checkbox, radio, image, file, hidden, submit, reset, button NAME: nome simbolico (si può 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 A.Lioy - Politecnico di Torino ( ) M-2
3 IMAGE Form: pulsante con immagine creato tramite tag INPUT trasmette le coordinate X e Y (in pixel) del punto ove l'utente ha fatto click sull'immagine name.x e name.y (in JS) name_x e name_y (in PHP) effetto collaterale: invia tutti i dati del form al server se non servono le coordinate X e Y (ma si vuole un'immagine come pulsante) allora meglio BUTTON src=uri_immagine height= width= alt= NOTA: problema con le dimensioni in pixel Form: controlli orientati al testo <input type=text name= > zona di testo lunga N caratteri, al massimo M <input type=password name= > 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 Esempio di form (text, password) <form name="f" action="/cgi/query" method="get"> <p> // nota: possibile usare (name) invece di (id) 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> A.Lioy - Politecnico di Torino ( ) M-3
4 [ RW ].value [ RW ].valueasdate Form: API per <input> [ RW ].valueasnumber legge o scrive il valore associato [ RW ].checked legge o imposta la stato di selezione [ RO ].files elenca i file selezionati [ RO ].list indica <datalist> associato [ W ].stepup(n).stepdown(n) aumenta o diminuisce il valore di step*n 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 p =(document.f.pswd.value) estrazione diretta dell elemento con ID unico p = getelementbyid("pswd").value) Interazione form-script (name) <script type="text/javascript"> function display(x) { alert ("nome: " + x.nome.value) alert ("home page: " + x.home.value) alert ("password: " + x.pswd.value) } </script>... <form name="f" action="/cgi/query" method="get" onsubmit="display(f)">... uhp_name.html A.Lioy - Politecnico di Torino ( ) M-4
5 Interazione form-script (id) <script type="text/javascript"> function display( ) { n = document.getelementbyid("nome").value h = document.getelementbyid("home").value p = document.getelementbyid("pswd").value alert ("nome: " + n) alert ("home page: " + h) alert ("password: " + p) } </script>... <form name="f" action="/cgi/query" method="get" onsubmit="display()">... uhp_id.html Form: parametri di <input> size, maxlength, minlength dimensione del campo, lunghezza min/max del dato list elenco di possibili valori (puntatore a <datalist> min, max, step valori dipendono dal tipo di input (number, date, ) readonly, required, multiple Booleani (es. readonly="readonly" o assente) pattern JS regexp per limitare le combinazioni di caratteri placeholder suggerimento (inserito all'interno del campo) Form: datalist definisce valori per fare autocompletamento di un campo di testo è diverso da un menù perché non garantisce che: vengano introdotti solo i valori predefiniti (possibile inserire testo libero) i valori predefiniti non siano modificati (possibile alterarli in qualunque modo) <input type="uri" list="asp" name="sede"> <datalist id="asp"> <option value=" <option value=" </datalist> asp.html A.Lioy - Politecnico di Torino ( ) M-5
6 Form: menù tag SELECT per racchiudere le varie opzioni tag OPTION per le singole opzioni tag OPTGROUP per raggruppare opzioni (menù a cascata; un solo livello di raggruppamento) attributo LABEL (vince rispetto al testo del tag) attributo VALUE (se manca, valore uguale testo) <select name=...> <option label=... > <option label=... value=... > <option>... </option> <option value=... >... </option> </select> Form: opzioni dei menù attributo SELECTED (su OPTION) per opzione preselezionata default: dipende dallo UA attributo MULTIPLE (su SELECT) per indicare che sono possibili scelte multiple default: scelta singola meglio checkbox per non confondere l'utente (scelta singola o multipla? come selezionare più scelte?) <select multiple 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 ( ) M-6
7 Esempio di form (checkbox) <form action="/cgi/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 name="f" action="/cgi/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 ( ) M-7
8 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 (es. onchange) 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> 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> 24 A.Lioy - Politecnico di Torino ( ) M-8
9 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") Form: nuovi elementi HTML5 nuovi tag: datalist keygen output label, fieldset, legend nuovi input type: color date, datetime-local, month, week, time , tel, url number, range search Form: output un campo per mostrare il risultato di un'operazione "name" indica la variabile associata al risultato (informativo) "for" indica i parametri (informativo) "form" indica il form associato il valore NON viene trasmesso come parte del form <form oninput= "x.value = a.valueasnumber + b.valueasnumber"> <input type="number" name="a"> + <input type="number" name="b"> = <output name="x" for="a b"/> A.Lioy - Politecnico di Torino ( ) M-9
10 Form: fieldset e legend <fieldset> raggruppa più campi di un form <legend> aggiunge un titolo ad un fieldset <form...> <fieldset> <legend>dati personali</legend> Nome: <input type="text" name="nome"><br> Cognome: <input type="text" name="cognome"><br> Data di nascita: <input type="date" name="data"> </fieldset> dati_personali.html Form: keygen genera una coppia di chiavi privata-pubblica chiave privata memorizzata localmente nel browser chiave pubblica inviata al server attributo "challenge" per verificare il possesso della chiave privata attributo "keytype" per specificare l'algoritmo (rsa, dsa, ec) chiave privata nota: introdotto in HTML5 ma subito dopo deprecato 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 ( ) M-10
11 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=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/acquisisci"> Nome e cognome: <input type="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 ( ) M-11
12 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 multipart (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,*/* 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 ( ) M-12
13 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="sede"></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: 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&sede=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="sede"></td> <td> <input type="submit" value="invia"> <input type="reset" value="cancella"> </td> </table> A.Lioy - Politecnico di Torino ( ) M-13
14 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="sede" Sede Centrale --AaBbCc-- N.B. valore non codificato Attenzione ai campi vuoti! ad eccezione dei controlli SELECT e RADIO 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 che ricevono input da un form 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 ( ) M-14
15 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 ( ) M-15
16 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 ( ) M-16
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
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
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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?
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
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,
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:
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
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
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
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
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
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
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
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 9. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze
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
JavaScript (4) Programmazione lato client. document.forms[] Oggetto form. Oggetto form. È uno degli oggetti più importanti del DOM
![JavaScript (4) Programmazione lato client. document.forms[] Oggetto form. Oggetto form. È uno degli oggetti più importanti del DOM](/thumbs/55/36873350.jpg "JavaScript (4) Programmazione lato client. document.forms[] Oggetto form. Oggetto form. È uno degli oggetti più importanti del DOM")
Programmazione lato client JavaScript (4) Oggetto form Oggetto form È uno degli oggetti più importanti del DOM Durante la lettura di un file HTML, viene creato un array con tante celle quanti sono i moduli
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:
Sicurezza Protezioni in una pagina Web
Pagina 1 di 7 Sicurezza Protezioni in una pagina Web HTML è un linguaggio che consente di presentare informazioni in pagine di formato predefinito e accattivante. Quando non si hanno a disposizione informazioni
Il linguaggio HTML - Parte 3
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 3 Dott. Chiara Braghin braghin@dti.unimi.it Addenda Vedi tabella caratteri speciali Vedi file caratteri_speciali.html
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
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
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
WEP WEb Programming. 4 PHP: dati e form
WEP WEb Programming 4 Lucidi per il corso di Basi di Dati tenuto da Paolo Baldan presso l Università di Padova, anno accademico 2008/09 1 PHP e MySQL 2 Perché? 3 Le applicazioni hanno bisogno di operare
I FORM. L'attributo action contiene l'url del file php a cui devono essere inviati i file per essere elaborati.
I FORM Che cosa sono e che caratteristiche hanno Un form contiene molti oggetti che permettono di inserire dati usando la tastiera. Tali dati verranno poi inviati alla pagina php che avrà il compito di
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
Javascript. - Corso Web Design - Media Dream Academy. Stefano Gaborin
Javascript - Corso Web Design - Media Dream Academy Stefano Gaborin stefano.gaborin@above.company www.above.company Cos è Javascript? JavaScript è un linguaggio di programmazione interpretato. Utilizzato
Guida introduttiva al PHP
Fabio Castellini 26/01/2016 Guida introduttiva al PHP Cos'è il PHP? Il PHP è un linguaggio di scripting interpretato, simile al JavaScript, per intenderci, originariamente concepito per la programmazione
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
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,
Introduzione ad HTML seconda parte WWW. Fabio Vitali
Introduzione ad HTML seconda parte Fabio Vitali Introduzione Oggi esaminiamo in breve, in HTML: u Il tag HEAD u Oggetti e mappe u Form u Frame A seguire: I tag di H EAD 2/26 I tag di H EAD HEAD contiene
Programmazione web lato client con JavaScript. Marco Camurri 1
Programmazione web lato client con JavaScript Marco Camurri 1 JavaScript E' un LINGUAGGIO DI PROGRAMMAZIONE che consente di inserire codice in una pagina web Sintassi simile a Java (e al C), ma NON E'
1. (6 punti) Spiegare il significato, in modo dettagliato, del pezzo di codice seguente di una servlet:
Università degli Studi di Camerino Corso di Laurea in Informatica A.A. 2015/2016 Prova Scritta di Programmazione Web, 21 Febbraio 2017 VIII Appello Docenti: Francesco Tiezzi e Luca Tesei Nome e Cognome:
Appunti su ASP (Active Server Pages)
Client Client Appunti su ASP (Active Server Pages) Che cosa è ASP Un server web è un computer che contiene tutte le pagine web di un determinato sito web. In tale computer è installato un software che
Lezione nr. 5. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente!
Lezione nr. 5 >> Come creare un modulo Web I moduli web sono delle strutture fondamentali per ogni sito web e la loro conoscenza ti permetterà di risolvere almeno il 60% delle problematiche di gestione
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. HTML non è un linguaggio di programmazione ma
Tipi di input widget. Textbox. <form action="action_page.php"> <b>name:</b> <input type="text" name="name" size="20" maxlength="40" > <br><br>
Tipi di input widget Textbox name: Tipi di input widget Menu a tendina
A. Lorenzi Pagine ASP
Pagine ASP Web server software per la gestione di un computer host Internet oppure di un server di rete, che mette a disposizione dati o applicativi per gli utenti della rete Web server IIS (Internet Information
L aspetto dei file HTML
L aspetto dei file HTML Le pagine HTML contengono due tipi di oggetti: il testo del documento i TAG HTML Il documento si presenta come una successione di elementi (annidati) del tipo Testo influenzato
Corso di PHP. Prerequisiti. 6.2 PHP e il web 2. Conoscenza HTML Tecnica della programmazione Principi di programmazione web
Corso di PHP 6.2 PHP e il web 2 1 Prerequisiti Conoscenza HTML Tecnica della programmazione Principi di programmazione web 2 1 Introduzione In questa Unità continuiamo con l illustrazione di alcune importanti
HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...
HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento
Programmazione server-side ed interfaccia di programmazione CGI
Programmazione server-side ed interfaccia di programmazione CGI Corso di Applicazioni Telematiche A.A. 2007-08 Lezione n.6 Prof. Roberto Canonico Università degli Studi di Napoli Federico II Facoltà di
Forms. Commercio elettronico Registrazione di nuovi membri (organizzazioni non-profit) Ricerca di mercato (collezione di dati relativi a utenti)
Forms Rendono XHTML interattivo in modo semplice: Commercio elettronico Registrazione di nuovi membri (organizzazioni non-profit) Ricerca di mercato (collezione di dati relativi a utenti) Svariati controlli
HTML5 and Next RIA Apps. Le API per HTML5 Forms
HTML5 and Next RIA Apps Le API per HTML5 Forms Le API per HTML5 Forms Nella precedente lezione abbiamo visto i principali nuov tag di HTML5, un esempio di progetto base con Initializr http://www.initializr.com/
Basi di Dati-XII. PHP e MySQL. Perché? Come? Corso di Laurea in Informatica Anno Accademico 2013/2014
Basi di Dati-XII Corso di Laurea in Informatica Anno Accademico 2013/2014 PHP e MySQL Paolo Baldan baldan@math.unipd.it http://www.math.unipd.it/~baldan MySQL e PHP Perché? 3 Come? 4 Le applicazioni hanno
OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia
Tecnologie informatiche multimediali
Università degli Studi di Ferrara Facoltà di Lettere e Filosofia Corso di Laurea in «Scienze e Tecnologie della Comunicazione» aa 2011-2012 Tecnologie informatiche multimediali Prof. Giorgio Poletti giorgio.poletti@unife.it
Manuale Gateway SMS. (Versione Documento 2.1) pagina 1 di 5
Manuale Gateway SMS (Versione Documento 2.1) pagina 1 di 5 1. Introduzione Questo documento descrive i diversi metodi e l'uso dell'sms center per trasmettere messaggi SMS con metodo HTTP POST o GET. Il
Laboratorio di Basi di Dati
Laboratorio di Basi di Dati Connessione al DB con PHP Anno accademico 2016-2017 Paolo Perlasca Parte di questi lucidi è tratta da una versione precedente di Marco Mesiti, Stefano Valtolina, Daniele Riboni
Fondamenti di Informatica II 29. Elementi di programmazione web e linguaggi di script (2)
Interazione client-server (1) per far interagire il client con il server e necessario usare programmi residenti su server (p.e. script CGI - Common Gateway Interface) Fondamenti di Informatica II 29. Elementi
Dott.ssa Adriana Pietramala. Dott.ssa Maria Vittoria Avolio
Corso di Informatica Laurea Triennale - Comunicazione&Dams Dott.ssa Adriana Pietramala a.pietramala@mat.unical.it Dott.ssa Maria Vittoria Avolio avoliomv@unical.it Costrutto if con più istruzioni All interno
Form Editor. Dove NomeProfilo è personalizzabile.
Form Editor Il tema permette di generare automaticamente dei moduli per la raccolta di dati in tre semplici step: 1. Si crea una tabella nel database per la raccolta dei dati. Per la creazione si parte
Il Protocollo HTTP e la programmazione di estensioni Web
Il Protocollo HTTP e la programmazione di estensioni Web 1 Il protocollo HTTP È il protocollo standard inizialmente ramite il quale i server Web rispondono alle richieste dei client (prevalentemente browser);
Introduzione. Java HTTP. G. Prencipe
Java html e http G. Prencipe prencipe@di.unipi.it Introduzione Tutte le comunicazioni tra client e server Web avvengono mediate il (HyperText Transfer Protocol, attualmente alla versione 1.1), che è un
WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &#"#2
! "#$" %% $"$&&"'& $%%& $'&( ) *+&, ) && *+ ( -./ WWW (World Wide Web)!& ( # (&%#(!(&&( %% (*0 #,% )0#1( &#"#2 Siti Web pagine Web: documenti pronti per essere registrati su un server Internet residenza
Sicurezza delle applicazioni web: protocollo HTTP
Università degli Studi di Milano Facoltà di Scienze Matematiche, Fisiche e Naturali Anno Accademico 2013/2014 Sicurezza delle applicazioni web: protocollo HTTP Andrea Lanzi 14 Maggio 2014 Andrea Lanzi
Sicurezza delle applicazioni web: protocollo HTTP
Università degli Studi di Milano Facoltà di Scienze Matematiche, Fisiche e Naturali Anno Accademico 2012/2013 Sicurezza delle applicazioni web: protocollo HTTP Srdjan Matic, Aristide Fattori 17 Maggio
MODULO 7 HTML HTML. HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali
MODULO 7 HTML MODULO 6 - HTML 1 HTML HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali Un sistema ipertestuale è un insieme di nodi connessi da collegamenti.
La Back Office Console consente di costruire lo scheletro degli schema.
BACK OFFICE CONSOLE 1.1 Introduzione 3 1.2 Creazione di uno Schema 4 1.2.1 Struttura dello Schema 5 1.2.2 Caratteristiche dei campi 6 1.2.3 Traduzioni 8 1.3 Ricerca degli schema 8 1.4 Gestione delle Categorie
Cimini Simonelli - Testa
WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire
Anno scolastico INFORMATICA. 2. Conoscere e classificare il software
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI Schiaparelli via Settembrini 4, 20124 Milano tel. 02/2022931 fax 29512285 E-mail schiaparelli@libero.it Gramsci L.go Sereni 1, 20133 Milano tel.
Reti di calcolatori Prova scritta 22 giugno 2017 N. 1
Nome Cognome Matricola Reti di calcolatori Prova scritta 22 giugno 2017 N. 1 Esercizio 1 [9 punti] Si vuole realizzare un servizio Web per il monitoraggio del numero di visitatori dei musei di una città.
La programmazione Web 3-Introduzione ai moduli (FORM)
La programmazione Web 3-Introduzione ai moduli (FORM) Al crescente successo del Web si è accompagnato un continuo lavoro per ampliarne le possibilità di utilizzo e le funzionalità offerte agli utenti.
La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.
Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,
Laboratorio di Progettazione Web
PHP e i files Laboratorio di Progettazione Web AA 2009/2010 Chiara Renso ISTI- CNR - c.renso@isti.cnr.it Da PHP e possibile accedere e manipolare i file che risiedono nel disco del server. In particolare
bool mysql_select_db([string database_name [,resource link_identifier]]) Connessione ad un server MySQL vuole conettere
![bool mysql_select_db([string database_name [,resource link_identifier]]) Connessione ad un server MySQL vuole conettere](/thumbs/24/4182172.jpg "bool mysql_select_db([string database_name [,resource link_identifier]]) Connessione ad un server MySQL vuole conettere")
Connessione ad un server MySQL resource mysql_connect ([string server [, string username [, string password [, bool new_link [, int client_flags]]]]]) server nome o indirizzo del server username nome utente
Fabio Proietti (c) 2012 Licenza:
data di ultima modifica 30/01/2013 Prerequisiti per la comprensione aver usato almeno una volta l'editor notepad++ aver creato almeno una volta una pagina web, usando Una calcolatrice in javascript
Master SIT settembre Corso Web & GIS. Chiara Renso. ISTI- CNR
MAPSERVER Corso ISTI- CNR c.renso@isti.cnr.it Mapserver è un software opensource fornito dall Università del Minnesota http://www.mapserver.org/ e fornisce un ambiente per la pubblicazione sul web di mappe.
JavaScript: eventi, errori ed eccezioni. Pasqualetti Veronica
JavaScript: eventi, errori ed eccezioni 1 Pasqualetti Veronica Eventi Ogni oggetto di un documento HTML genera degli eventi in risposta alle azioni dell utente Ad esempio, l evento click corrisponde al
Lezione III: Oggetti ASP e interazione tramite form HTML
Lezione III: Oggetti ASP e interazione tramite form HTML La terza lezione, come le precedenti, ha avuto una durata di due ore, di cui una in aula e l altra in laboratorio, si è tenuta alla presenza della
Applicazione ASP di esempio
Applicazione ASP di esempio Database in rete Prof. Claudio Maccherani Un server web è un programma che gira su un computer sempre collegato ad Internet e che mette a disposizione file, pagine e servizi.
Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML
Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML Gianluca Moro gianluca.moro@unibo.it Dipartimento di Elettronica, Informatica e Sistemistica G. Moro - Università di Bologna World
Introduzione: programmazione lato server e CGI
(PWLS: intro cap.2, 2.2, 2.3, 2.4) Introduzione: programmazione lato server e CGI Vincenzo Della Mea (vincenzo.dellamea@uniud.it) Ivan Scagnetto (ivan.scagnetto@uniud.it) Complementi di Tecnologie Web
Corso di Web Programming
Corso di Web Programming 4. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica Applicata A.A.
World Wide Web. Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML. Il Successo del Web. Protocolli di accesso
Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML Gianluca Moro gmoro@deis.unibo.it Dipartimento di Elettronica, Informatica e Sistemistica Università di Bologna World Wide Web nato
Corso di Web Programming
Corso di Web Programming 7. JavaScript Parte II (Complementi) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica
Tecniche e Best Practice nella costruzione di Form accessibili per il Web. Roberto Zucchetto consulenza e formazione ICT
Tecniche e Best Practice nella costruzione di Form accessibili per il Web Roberto Zucchetto consulenza e formazione ICT Cos è IWA/HWG IWA/HWG è un Associazione professionale no profit riconosciuta leader
PHP 3. 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
Raccolta e memorizzazione dei dati immessi nei moduli dai visitatori
Raccolta e memorizzazione dei dati immessi nei moduli dai visitatori Raccolta e memorizzazione dei dati immessi nei moduli dai visitatori Per impostazione predefinita, i risultati dei moduli vengono salvati
Il protocollo HTTP. Caratteristiche del protocollo HTTP. Versioni del protocollo. Due tipologie di messaggi:
Caratteristiche del protocollo HTTP Scambio di messaggi di richiesta e risposta Transazione HTTP o Web Protocollo stateless Il protocollo HTTP Basato sul meccanismo di naming degli URI per identificare