Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico.
Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.
-
Upload
giuseppa-baldi -
Category
Documents
-
view
214 -
download
0
Transcript of Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.
![Page 1: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/1.jpg)
Web Form
Presentazione 2.2
Comunicazione integrata in rete| Prof. Luca A. Ludovico
![Page 2: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/2.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Introduzione
• I moduli (form) si utilizzano tipicamente per raccogliere informazioni dall’utente finale. – L’interfaccia utente è molto rudimentale, ma può essere migliorata
con interventi grafici e fogli di stile
• Un form può contenere campi di testo, caselle di scelta, radio button, check box ecc.
• L’implementazione di un form contempla 3 passi: progettare l’interfaccia utente, implementare il processing lato server e configurare tali due oggetti per comunicare tra loro.In questa lezione si vedrà come impostare i form in HTML, ma non come i dati provenienti dai form possano essere processati da parte del server.
![Page 3: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/3.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Form
![Page 4: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/4.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Sintassi di base
• <form> è uno dei tag HTML
• Sintassi:<form parametri> ... elementi del form ... </form>
• Oltre a vari elementi (campi di testo, caselle di scelta, ecc.), di solito il modulo contiene un pulsante Submit che invia le informazioni al server
• I parametri servono a specificare come inviare i dati al server– come illustrato nel seguito, esistono due modalità di invio
![Page 5: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/5.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Il primo form
• Ogni form inizia con un elemento form al cui interno si posizionano i controlli. La maggior parte dei controlli sono elementi input, che di default implementano un campo testo su riga singola.
• Per etichettare un controllo si usa l’elemento label, al cui interno si posiziona tanto l’etichetta testuale quanto il controllo stesso.
• Tipicamente ogni singolo controllo viene posizionato in un paragrafo a sè stante (elemento p), ma ovviamente non è obbligatorio.
![Page 6: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/6.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (1 – campo testo)
<form> <p> <label>Nome del cliente:<input></label> </p></form>
![Page 7: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/7.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Input: campi testo (text field)
• Nell’esempio precedente, abbiamo usato input senza specificare il tipo. Equivalente a scrivere:
<input type= "text">
• I campi testo (text field) consentono di inserire testo in un riquadro su un’unica riga. La dimensione di default è 20 caratteri.
• Il contenuto può essere preimpostato usando l’attributo value
• E’ possibile variarne alcuni aspetti utilizzando gli attributi (tutti opzionali) dell’elemento input.
![Page 8: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/8.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Alcuni attributi di contenuto ricorrenti
• autocomplete: istruzioni di autocompletamento (on/off)• list: un elenco di suggerimenti, puntando a un datalist• maxlength, minlength: dimensione massima e minima per il
campo in numero di caratteri• pattern: permette di specificare il formato della stringa tramite
espressioni regolariAd es. pattern="[0-9][A-Z]{3}" implica una cifra seguita da 3 maiuscole)
• placeholder: segnaposto di suggerimento• disabled, readonly: sola lettura. Differenza: nel caso di readonly,
si può selezionare il controllo.• required: compilazione obbligatoria• size: dimensione grafica del controllo espressa in numero di
caratteri• …
![Page 9: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/9.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (2 – attributi del campo di testo)
<form> <p> <label>Nome del cliente: <input type="text" size="40" maxlenght="20"> </label> </p></form>
![Page 10: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/10.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Varianti dei campi testo
• E’ possibile specificare il tipo di input come search anziché text. La differenza è puramente stilistica, su quei sistemi che li differenziano graficamente
<input type="search">
• E’ possibile occultare la compilazione dei caratteri di un campo di testo specificando che si tratta di un campo password
<input type="password">
![Page 11: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/11.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Utilizzo di fieldset e legend
• Fieldset serve per raggruppare da un punto di vista logico e grafico un insieme di controlli.
• Spesso i browser evidenziano un fieldset disegnando una cornice attorno ai controlli inclusi.
• Legend permette di specificare un nome comune per il fieldset.
• I fieldset possono essere annidati a piacimento.
![Page 12: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/12.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Pulsanti di scelta (radio button)
• I pulsanti di scelta (radio button) mostrano opzioni in mutua esclusione. Sceglierne una disabilita automaticamente le altre.
• Sintassi: <input type="radio" name="nome_scelto">
• Il raggruppamento tra opzioni in mutua esclusione si basa sull’attributo name, il cui valore deve essere uguale
• I pulsanti vengono creati senza selezione iniziale. Per impostarne una, si usa checked="checked"
![Page 13: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/13.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (3 – radio button)
<!doctype html><html><form> <p><label>Nome del cliente: <input></label></p> <fieldset> <legend> Dimensioni della pizza </legend> <p><label><input type="radio" name="size"> Small </label></p> <p><label><input type="radio" name="size" checked="checked">
Medium </label></p> <p><label><input type="radio" name="size"> Large </label></p> </fieldset></form></html>
![Page 14: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/14.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (4 – radio button)
<fieldset> <legend> Dimensioni della pizza </legend> <p><label><input type="radio" name="size"> Small </label></p> <p><label><input type="radio" name="size"> Medium </label></p> <p><label><input type="radio" name="size"> Large </label></p> <p> </p> <p> <label><input type="radio" name="border"> Bordo ripieno </label> </p> <p> <label><input type="radio" name="border"> Bordo sottile </label> </p></fieldset>
![Page 15: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/15.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Caselle di controllo (checkbox)
• Le caselle di controllo (checkbox) mostrano opzioni con due stati: selezionato e non selezionato. La selezione ha l’apparenza di un segno di spunta all’interno di un quadrato.
• Sintassi: <input type="checkbox">
• Le caselle vengono create senza selezione iniziale. Per impostarla, si usa checked="checked"
![Page 16: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/16.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (5 – checkbox)
…
<fieldset>
<legend> Extra </legend>
<p>label><input type="checkbox"> Pancetta </label></p>
<p>label><input type="checkbox"> Super-mozzarella
</label></p>
<p>label><input type="checkbox"> Cipolle </label></p>
<p>label><input type="checkbox"> Funghi </label></p>
</fieldset>
…
![Page 17: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/17.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Aree di testo (textarea)
• Le aree di testo (textarea) consentono di scrivere testi su più righe.
• Sintassi: <textarea>…</textarea>– Attenzione: non si tratta di un elemento input con type="textarea"
• Come per le caselle di testo, è possibile impostare una serie di parametri per modificare l’aspetto dell’area di testo. A differenza di queste, l’eventuale valore predefinito non va inserito nell’attributo value, bensì come contenuto dell’elemento
<textarea>Testo preimpostato</textarea>
![Page 18: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/18.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (6 – textarea)
… <p> <label>Commenti<br /> <textarea rows="5" cols="50"> Inserisci qui i tuoi commenti... </textarea> </label></p>…
![Page 19: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/19.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Elenco (drop-down list)
• Gli elenchi menù (drop-down list) consentono di scegliere un’opzione da un menù a tendina.
• Sintassi: <select> <option>English Major</option> <option>Math Major</option>…</select>
• E’ possibile preimpostare un valore attraverso l’attributo selected di option.
![Page 20: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/20.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (7 – dropdown)
… <p> <label>Quartiere <select> <option>Bovisa</option> <option>Centro</option> <option selected="selected">Gallaratese</option> <option>Lorenteggio</option> </select> </label></p>…
![Page 21: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/21.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Pulsanti (button)
• I pulsanti sono concepiti per effettuare operazioni alla loro pressione. Esistono principalmente tre tipologie di pulsanti:1. Pulsante submit <input type="submit" value="Invia">2. Pulsante reset <input type="reset" value="Cancella">3. Pulsante gen. <input type="button" value="Cliccami">
• Le prime due categorie corrispondono ad azioni standard sul modulo (invio dei dati al server e ripristino della compilazione di default).La terza categoria deve essere legata a un’azione Javascript per avere un significato operativo.
![Page 22: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/22.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Ordinazione della pizza (8 – aggiunta dei pulsanti e action)
<form action= "altrapagina.php" method= "post"> … <p> <input type="submit" value="Invia"> <input type="reset" value="Cancella"> </p></form>
![Page 23: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/23.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Altri tipi di input (input type=…)
• Hidden (type=hidden)• Telephone (type=tel), URL (type=url), E-mail (type=email)• Date and Time state (type=datetime), Date state (type=date), Month
state (type=month), Week state (type=week)• Time state (type=time), Local Date and Time state (type=datetime-local)• Number (type=number)• Range (type=range)• Color (type=color)• File Upload (type=file)
• Esempio dell’ordinazione: <p><label>Telefono: <input type=tel></label></p><p><label>E-mail: <input type=email></label></p><p><label>Orario di consegna: <input type=time min="11:00" max="21:00" step="900"></label></p>
![Page 24: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/24.jpg)
Comunicazione con il server
![Page 25: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/25.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Passaggio di valori al server
• Ogni form può (deve?) passare valori a una pagina sul server che li raccoglie per salvarli/usarli/elaborarli
• Il tag form presenta due attributi fondamentali: a chi inviare i dati e come inviarli– action="nome_pagina" – method="nome_metodo" (get o post)
![Page 26: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/26.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
GET e POST
• Attraverso l’attributo method="nome_metodo", il form stabilisce come inviare i dati alla pagina destinatario. Nome_metodo può valere get o post.
• Il metodo GET consiste nell’accodare i dati all’indirizzo della pagina richiesta, facendo seguire il nome della pagina da un punto interrogativo e dalle coppie nome/valore separate da &.
• Se il metodo è POST, i dati vengono invece inviati in maniera da non essere direttamente visibili per l’utente, attraverso la richiesta HTTP che il browser invia al server.
![Page 27: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/27.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Nome dei controlli
• Ogni controllo può essere associato a un nome (attributo name). Quando avviene il passaggio di valori al server, tipicamente alla pressione del pulsante Submit, vengono passate tante coppie
nome=valorequanti sono gli input presenti nel form.Per quanto riguarda il valore, si veda la slide seguente.
• Se method="get", il browser mostra tali coppie nella barra degli indirizzi, dopo il carattere ? e separate tra loro dal carattere &.
![Page 28: Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.](https://reader035.fdocument.pub/reader035/viewer/2022070313/5542eb72497959361e8d97a3/html5/thumbnails/28.jpg)
Comunicazione integrata in rete Prof. Luca A. Ludovico
Valore dei controlli
• In generale, il valore assunto dal controllo è la compilazione effettuata dall’utente. – Ad esempio per le aree di testo e le caselle di testo
• Alcuni controlli presentano solo valore vero/falso, come le caselle di controllo.
• Alcuni controlli consentono la scelta tra valori. In questo caso, ad ogni opzione va associato esplicitamente un valore diverso tramite value="valore".
– Ad esempio per i pulsanti di scelta e i menu a discesa