Presentazione 2.2
Web Form
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.
Comunicazione integrata in rete
Prof. Luca A. Ludovico
Form
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
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.
Comunicazione integrata in rete
Prof. Luca A. Ludovico
Ordinazione della pizza (1 – campo testo)
<form>
<p>
<label>Nome del cliente:<input></label>
</p>
</form>
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.
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 regolari
Ad 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
• …
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>
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">
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.
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"
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>
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>&nbsp;</p>
<p>
<label><input type="radio" name="border"> Bordo ripieno </label>
</p>
<p>
<label><input type="radio" name="border"> Bordo sottile </label>
</p>
</fieldset>
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"
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>
…
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>
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>
…
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.
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>
…
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.
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>
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=datetimelocal)
• 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>
Comunicazione integrata in rete
Prof. Luca A. Ludovico
Comunicazione con il server
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)
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.
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=valore
quanti 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 &.
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
Comunicazione integrata in rete
Prof. Luca A. Ludovico