Form - Server users.dimi.uniud.it

Transcript

Laboratorio di Tecnologie Web
HTML: Form
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
Il ruolo dei form
I form sono al giorno d'oggi un componente essenziale per
l'interazione degli utenti con i siti web, essendo alla base di
azioni come gli acquisti online, le prenotazioni, le ricerche,
i post sui blog o i social network, le richieste di assistenza,
etc.
In risposta a questa sempre maggiore interattività dei siti
web, HTML5 ha introdotto nuovi elementi ed attributi che
rendono più facile l'utilizzo dei form per gli utenti e la loro
creazione per gli sviluppatori, rendendo effettuabili tramite
codice html alcuni compiti che in precedenza potevano
essere gestibili solo via JavaScript. Le novità introdotte non
sono attualmente supportate in modo completo dai browser
ma sono comunque retrocompatibili.
L'utilizzo dei form prevede l'interazione tra due
componenti, un componente client HTML costituito dai
diversi controlli (pulsanti, campi per l'input, menu, etc.)
utilizzati per raccogliere le informazioni dagli utenti ed un
componente server costituito da un'applicazione o script che
elabora l'informazione acquisita dal form e ritorna una
opportuna risposta.
L'elemento <form>
I form vengono aggiunti alle pagine web mediante l'utilizzo
dell'elemento <form>, che racchiude tutti i controlli del
form oltre a poter includere altri elementi di tipo blocco (ad
esempio titoli, paragrafi, liste, etc.). Gli elementi <form>
non possono essere innestati.
<!DOCTYPE html>
<html>
<head>
<title>Iscrizione alla mailing list</title>
</head>
<body>
<h1>Iscrizione alla mailing list</h1>
<form action="script/mailinglist.php" method="post">
<p>Iscriviti alla mailing list per ottenere
informazioni sui nostri prodotti.</p>
<div>
<p>
Nome: <input type="text" name="username" />
</p>
</div>
<div>
<p>
Email: <input type="text" name="email" />
</p>
</div>
<div>
<p>
<input type="submit" value="Iscriviti" />
</p>
</div>
</form>
</body>
</html>
Gli attributi “action” e “method” dell'elemento <form>
sono necessari per l'interazione con il componente server.
L'attributo “action” viene utilizzato per specificare l'URL
dell'applicazione o script che verrà utilizzato lato server per
elaborare i dati inseriti dall'utente (nell'esempio sopra, verrà
chiamato lo script mailinglist.php contenuto nella directory
script). A volte, il codice per l'elaborazione dei dati viene
inserito direttamente all'interno del file html. In tal caso, il
valore dell'attributo “action” deve essere lasciato vuoto.
L'attributo “method” specifica come l'informazione deve
essere inviata al server. Consideriamo ad esempio di
inserire Pinco Pallino nel campo Nome e
[email protected] nel campo Email dell'esempio
precedente. Tale informazione viene codificata
automaticamente dal browser nel modo seguente
username=Pinco%20Pallino&email=pinco.pallino%40example.com
(in cui i caratteri non ammessi sono stati trasformati nel
loro equivalente esadecimale) e inviata al server in due
possibili modi, POST o GET, che vengono inseriti come
valore dell'attributo “method”. Se tale attributo non è
presente, il valore utilizzato di default è GET.
Quando il metodo utilizzato è POST, il browser invia al
server una richiesta separata che contiene un'intestazione
speciale seguita dai dati. Solo il server può vedere il
contenuto di tale richiesta ed il metodo POST è quindi
preferibile quando si voglia inviare informazioni riservate
come numeri di carta di credito o altri dati personali. Tale
metodo è preferibile anche quando si deve inviare una
grande quantità di dati.
Quando il metodo utilizzato per l'invio dei dati è GET, i dati
vengono aggiunti direttamente in fondo all'URL definito
tramite l'attributo “action”, separati dal simbolo ? (punto di
domanda). Tale metodo è appropriato se si vuole che
l'utente possa salvare un segnalibro della pagina chiamata
(che può ad esempio rappresentare i risultati di
un'interrogazione ad un motore di ricerca). D'altra parte, le
informazioni inviate sono visibili direttamente.
All'interno dell'elemento <form> vengono inseriti i controlli
che permettono l'interazione con l'utente come campi di
testo, pulsanti, menu, etc. Nell'esempio precedente sono
presenti due campi di testo ed un pulsante che provoca
l'invio dei dati al server. L'attributo “name” di un controllo
definisce il nome della variabile alla quale sarà associato il
contenuto inserito dall'utente tramite quel controllo (notate
che il controllo di tipo pulsante nell'esempio precedente non
ha bisogno di un nome in quanto la sua funzione non è
raccogliere dati). L'applicazione o script che elaborerà i dati
utilizzerà tali nomi per estrarre e manipolare i valori
inseriti. Per questo motivo, ogni variabile deve avere un
nome univoco.
Controlli per i form
In HTML5 ci sono 23 tipi diversi di controlli inseribili in un
form. La maggior parte di questi controlli viene specificata
utilizzando l'elemento <input>, il cui aspetto e la cui
funzionalità variano in base al valore dell'attributo “type”.
Controlli per l'inserimento di testo
Uno dei task più comuni in un form è inserire informazione
testuale. A tale scopo, si possono utilizzare l'elemento vuoto
<input> o l'elemento contenitore <textarea> a seconda che
si voglia permettere l'inserimento di una o più di una riga di
testo, rispettivamente.
Nel primo caso, si utilizza l'elemento <input> con attributo
“type” impostato a text. Tale valore è il default per quanto
riguarda l'elemento <input> e viene quindi utilizzato anche
quando non si specifica l'attributo “type” o quando il valore
dell'attributo “type” non è riconosciuto dal browser. Oltre
agli attributi “type” e “name”, altri attributi comuni per
questo controllo sono “value” che specifica del testo da far
comparire nel campo di input al caricamento del form o
quando il form viene resettato, “maxlength” che specifica il
numero massimo di caratteri che l'utente può inserire nel
campo di testo (di default, il numero di caratteri è illimitato)
e “size” che specifica la dimensione del controllo in
caratteri.
L'elemento <textarea> permette di inserire un campo
multilinea scrollabile in cui gli utenti possono scrivere del
testo. Al contrario di <input>, <textarea> consente di
aggiungere del contenuto tra i tag di apertura e chiusura.
Tale contenuto verrà visualizzato nel campo di testo al
caricamento del form ma verrà anche inviato al server
assieme ai dati inseriti dall'utente. Per questo motivo, è
comune non inserire nulla come contenuto dell'elemento ed
utilizzare gli attributi “title” o “placeholder” per dare
suggerimenti all'utente su come usare il campo di testo.
L'attributo “placeholder” è stato introdotto in HTML5 e può
essere usato in tutti i controlli per l'inserimento di testo.
Oltre a “maxlength”, visto sopra per l'elemento <input>,
<textarea> supporta gli attributi <rows> e <cols> per
specificare le dimensioni dell'area di testo in righe e
colonne (numero di caratteri). E' comunque preferibile
usare CSS per specificare tali parametri. Infine, è possibile
usare l'attributo “wrap” per specificare se si devono
escludere (valore soft) o includere (valore hard) dai dati
inviati al server le interruzioni di riga inserite
automaticamente quando viene raggiunto il valore
dell'attributo “cols” (che deve essere specificato) durante la
digitazione.
<!DOCTYPE html>
<html>
<head>
<title>Titolo</title>
</head>
<body>
<h1>Lascia un commento</h1>
<form action="script/mailinglist.php" method="get">
<p>Usa questo form per darci un'opinione sui nostri
prodotti.</p>
<div>
<p>
Nome: <br/>
<input type="text" name="username" />
</p>
</div>
<div>
<p>
Commento: <br />
<textarea name="commento" placeholder="Max 10
caratteri" maxlength="15" wrap="hard" cols="5"></textarea>
</p>
</div>
<div>
<p>
</p>
</div>
</form>
</body>
</html>
In aggiunta ai due controlli generici per l'inserimento di
testo che abbiamo appena visto, esistono controlli specifici
per informazioni come le password, gli indirizzi email ed
altro. Per creare tali controlli, si utilizzano appositi valori
dell'attributo “type” dell'elemento <input> (e si possono
utilizzare gli stessi attributi utilizzati per il controllo
generico di tipo text). Se “type” ha valore password, i
caratteri inseriti dall'utente vengono oscurati (di solito
tramite un asterisco o un pallino). E' importante tenere
presente che anche se i caratteri non sono visibili,
l'informazione inserita non è criptata.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Login</h1>
<form action="script/login.php" method="post">
<p>Inserisci username e password per effettuare il
login.</p>
<div>
<p>
Username: <input type="text" name="username" />
</p>
</div>
<div>
<p>
Password: <input type="password" name="pwd"
maxlength="8" />
</p>
</div>
<div>
<p>
<input type="submit" value="Accedi" />
</p>
</div>
</form>
</body>
</html>
Impostando l'attributo “type” dell'elemento <input> ai
valori search, email, tel o url otteniamo rispettivamente dei
controlli per l'inserimento di un campo di ricerca, di
indirizzi email, di numeri telefonici e di URL. I browser
possono sfruttare questa informazione per gestire al meglio
l'input, ad esempio mostrando un tastierino adattato al tipo
di dati da immettere (su dispositivi mobili) o effettuando
automaticamente dei controlli sulla correttezza dei dati
inseriti (ad esempio, per la sintassi degli indirizzi email). Se
il tipo non è riconosciuto dal browser, i dati inseriti
vengono considerati testo generico.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Input types</h1>
<form action="script/form.php" method="get">
<div>
<p>
Email: <br/> <input type="email" name="email"
/>
</p>
</div>
<div>
<p>
Search: <br/> <input type="search"
name="search" />
</p>
</div>
<div>
<p>
Telephone: <br/> <input type="tel" name="phone"
/>
</p>
</div>
<div>
<p>
URL: <br/> <input type="url" name="url" />
</p>
</div>
<div>
<p>
</p>
</div>
</form>
</body>
</html>
Pulsanti
Diversi tipi di pulsanti possono essere inseriti nei form
html. Il più comune è il pulsante submit che, quando
premuto, viene utilizzato per l'invio al server dei dati
inseriti nel form. Un altro pulsante utilizzato spesso è il
pulsante di reset che serve a ripristinare lo stato iniziale dei
controlli presenti in un form (il che non significa solo pulire
i singoli campi).
Entrambi i pulsanti menzionati vengono aggiunti tramite
l'utilizzo dell'elemento <input> con attributo “type”
impostato ai valori submit o reset. L'attributo “name” non è
necessario (anche se si può impostare) in quanto la funzione
del pulsante non è l'inserimento dati. L'attributo “value”
può essere utilizzato per impostare il testo visualizzato sul
pulsante (in generale, “value” specifica il valore iniziale di
un controllo).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Login</h1>
<form action="script/login.php" method="post">
<p>Inserisci email e password per effettuare il
login.</p>
<div>
<p>
/>
</p>
</div>
<div>
<p>
Password: <br/> <input type="password"
name="pwd" maxlength="8" />
</p>
</div>
<div>
<p>
<input type="reset" />
</p>
</div>
</form>
</body>
</html>
L'elemento <input> con attributo “type” impostato a image
permette di creare un pulsante submit con un'immagine.
L'immagine da utilizzare viene specificata tramite attributo
“url” (con la solita sintassi) mentre è opportuno utilizzare
l'attributo “alt” per migliorare l'accessibilità.
Se si vuole avere maggiore flessibilità nella creazione di un
pulsante si possono utilizzare l'elemento <input> con
attributo “type” impostato a button oppure l'elemento
contenitore <button>. Nel primo caso, il comportamento
del pulsante deve essere specificato tramite JavaScript. Nel
secondo caso, ciò che viene visualizzato sul pulsante viene
inserito come contenuto dell'elemento (ad esempio, testo
e/o immagini) e l'attributo “type” può assumere i valori
submit, reset, button o menu (che permette di ottenere lo
stesso comportamento del rispettivo elemento <input> con
lo stesso tipo).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Login</h1>
<form action="script/login.php" method="get">
<p>Inserisci email e password per effettuare il
login.</p>
<div>
<p>
Email: <br/> <input type="email" name="email">
</p>
</div>
<div>
<p>
Password: <br/> <input type="password"
name="pwd" maxlength="8">
</p>
</div>
<div>
<p>
<input type="image" src="imgs/submit.png"
alt="pulsante accedi" width="94" height="30"> <br/>
<button type="reset">Reset <img
src="imgs/reset.png" alt="" width="25" height="20"/></button>
</p>
</div>
</form>
</body>
</html>
I pulsanti di tipo checkbox e di tipo radio supportano la
creazione di gruppi di opzioni e la selezione di elementi
all'interno di un gruppo. In un gruppo presentato tramite
checkbox, l'utente può selezionare una o più opzioni tra
quelle elencate mentre in un gruppo presentato tramite radio
button può essere selezionata una sola opzione.
Le chechbox vengono inserite in un form tramite utilizzo
dell'elemento <input> con attributo “type” impostato a
checkbox. Per creare un gruppo di checkbox, si specifica lo
stesso valore dell'attributo “name” per ogni checkbox del
gruppo (è comunque possibile creare singole checkbox
come nel caso delle informative sulla privacy). L'attributo
“value” viene utilizzato per specificare il valore che verrà
inviato al server se la rispettiva checkbox risulta
selezionata. Infine, se si vuole che una checkbox risulti già
selezionata al caricamento del form, si utilizza l'attributo
“checked” (essendo un attributo binario, in HTML5 è
sufficiente specificare il nome dell'attributo senza valore).
I radio button vengono inseriti in un form tramite utilizzo
dell'elemento <input> con attributo “type” impostato a
radio. La loro configurazione avviene utilizzando gli stessi
attributi descritti sopra per le checkbox (l'unica differenza è
che un solo elemento di un gruppo può essere nello stato
selezionato).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
Nome: <br/> <input type="text" name="username"
/>
</p>
</div>
<div>
<p>
/>
</p>
</div>
<div>
Età: <br/>
<ul>
<li><input type="radio" name="age"
value="under24" />Meno di 24</li>
value="25-44" />Tra 25 e 44</li>
value="over 45" />Oltre 45</li>
</ul>
</div>
<div>
Argomenti d'interesse: <br/>
<ul>
<li><input type="checkbox" name="topic"
value="tecnologia" checked />Tecnologia</li>
value="motori" />Motori</li>
value="viaggi" />Viaggi</li>
</ul>
</div>
<div>
</div>
</form>
</body>
</html>
Menu
Un altro modo per permettere la selezione di opzioni
ottimizzando lo spazio occupato è quello di utilizzare menu
di tipo drop-down o scrollabili. Entrambi i tipi di menu
vengono inseriti in un form utilizzando l'elemento
contenitore <select>. Di default, l'elemento <select> crea
un menu di tipo drop-down. All'interno dell'elemento
<select> vengono inseriti tanti elementi contenitore di tipo
<option> quante sono le voci di menu. Il contenuto
dell'elemento <option> è ciò che viene visualizzato
all'utente ed inviato al server se quella voce di menu viene
selezionata (il valore inviato al server può essere modificato
utilizzando l'attributo “value” di <option>). L'attributo
binario “selected” può essere specificato all'interno di un
elemento <option> per indicare che quell'elemento è
l'elemento di default del menu.
Se viene specificato l'attributo “size” dell'elemento <select>
con un valore maggiore di 1, allora il menu che viene
visualizzato è di tipo scrollabile. Il numero di voci di menu
visibili è pari al valore di “size” (i browser, di default,
potrebbero comunque visualizzare un numero di voci
superiore) e l'attributo binario “multiple” può essere
specificato per indicare che l'utente può selezionare più di
una voce. E' anche possibile utilizzare l'elemento
<optgroup> per suddividere le voci di menu in sottogruppi.
L'attributo obbligatorio “label” di <optgroup> viene
utilizzato per dare un nome al sottogruppo.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
/>
</p>
</div>
<div>
<p>
/>
</p>
</div>
<div>
<p>
Età: <br/>
<select name="age">
<option>Meno di 24</option>
<option selected>Tra 25 e 44</option>
<option>Oltre 45</option>
</select>
</p>
</div>
<div>
<p>
<select name="topic" size="3" multiple>
<optgroup label="Gruppo1">
<option value="Tech" selected
>Tecnologia</option>
<option>Motori</option>
</optgroup>
<optgroup label="Gruppo2">
<option selected>Viaggi</option>
<option>Cucina</option>
<option>Sport</option>
</optgroup>
</select>
</p>
</div>
<div>
</div>
</form>
</body>
</html>
Il nuovo elemento <datalist> di HTML5 premette di creare
menu di tipo drop-down di valori suggeriti per qualunque
elemento per l'inserimento di testo. Al contrario dei menu
visti in precedenza, l'utente mantiene comunque la
possibilità di inserire valori non presenti nella lista.
All'interno di <datalist> vengono inseriti elementi <option>
per i diversi suggerimenti. Inoltre, è necessario specificare
l'attributo “id” dell'elemento <datalist> e inserire tale
identificatore come valore dell'attributo <list> dell'elemento
<input> a cui saranno associati i suggerimenti.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Datalist</h1>
<form action="script/list.php" method="post">
<p>Titolo di studio: <input type="text"
list="titolostudio" name="educazione">
<datalist id="titolostudio">
<option value="Laurea" />
<option value="Laurea Magistrale" />
<option value="PhD" />
</datalist>
</form>
</body>
</html>
Selezione di file
Oltre a permettere la compilazione di campi, i form
possono essere utilizzati per la sottomissione di file tramite
l'utilizzo di un apposito controllo definito tramite l'elemento
<input> con attributo “type” impostato a file. Il controllo
effettivamente visualizzato varia drasticamente da browser
a browser. Se un form contiene un elemento per la selezione
di file, è necessario specificare l'attributo “enctype”
dell'elemento <form> al valore multipart/form-data e
l'attributo “method” al valore POST. L'attributo “multiple”
può essere usato per consentire la sottomissione di più di un
file contemporaneamente.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Iscrizione alla conferenza</h1>
<form action="script/signup.php" method="post"
enctype="multipart/form-data">
<p>Compila i campi sottostanti per iscriverti alla
conferenza.</p>
<div>
<p>
/>
</p>
</div>
<div>
<p>
/>
</p>
</div>
<div>
<p>
Curriculum: <br/> <input type="file"
name="curriculum" />
</p>
</div>
<div>
</div>
</form>
</body>
</html>
Controlli nascosti
Quando è necessario inviare al server che elabora il form
delle informazioni che non provengono dall'utente, si
possono utilizzare dei controlli nascosti non visibili sul
form. I controlli nascosti vengono aggiunti tramite
l'elemento <input> con attributo “type” impostato a hidden.
Tipicamente, gli attributi “name” e “value” vengono
utilizzati per specificare i dati da inviare.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p>
/>
</p>
</div>
<div>
<p>
/>
</p>
</div>
<div>
<input type="hidden" name="returnpage"
value="thankyou.html"/>
</div>
<div>
</div>
</form>
</body>
</html>
Data e ora
Per consentire agli utenti di specificare orari e date
all'interno di un form, HTML5 mette a disposizione
l'elemento <input> con attributo “type” impostato a date,
time, datetime, datetime-local, month o week. I browser che
non supportano tali valori, interpreteranno questi controlli
come controlli per l'inserimento di testo semplice.
L'attributo “value” può essere utilizzato per specificare la
data o orario da visualizzare inizialmente (in formato ISO
come descritto in precedenza per l'attributo “datetime”
dell'elemento <time>).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Lista dei controlli per l'inserimento di data e
ora</h1>
<form action="script/dataora.php" method="post">
<ul>
<li>Data: <br/>
<input type="date" name="date" value="2014-0312"/></li>
<li>Ora: <br/>
<input type="time" name="time"
value="09:13:00"/></li>
<li>Data e ora: <br/>
<input type="datetime" name="datetime"
value="2014-01-14T03:13:00-5:00"/></li>
<li>Data e ora (senza fuso): <br/>
<input type="datetime-local" name="datetimelocal" value="2014-01-14T03:13:00"/></li>
<li>Mese: <br/>
<input type="month" name="month" value="201401"/></li>
<li>Settimana: <br/>
<input type="week" name="week" value="2014W2"/></li>
</ul>
</form>
</body>
</html>
Input numerici
HTML5 ha introdotto due nuovi elementi da utilizzare nei
form, <number> e <range>, che permettono agli utenti di
specificare un valore numerico. I due elementi variano per
il modo in cui vengono visualizzati all'utente, con il
secondo normalmente mostrato come uno slider. Gli
attributi “min” e “max” possono essere usati per definire
l'intervallo di valori ammessi mentre l'attributo “step” può
essere utilizzato per specificare l'incremento tra un valore
ed il successivo (di default, vale 1 ma può essere impostato
a al valore any per permettere l'inserimento di qualsiasi
incremento).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Inserimento di valori numerici</h1>
<form action="script/dataora.php" method="post">
<ul>
<li>Number: <br/>
<input type="number" name="number" min="1"
max="6" step="0.5"></li>
<li>Range (da 0 a 10): <br/>
<input type="range" name="range" min="0"
max="10"></li>
</ul>
</form>
</body>
</html>
Attributi utili dell'elemento <input>
Oltre agli attributi “type”, “name”, “value” e altri più
specifici che abbiamo già visto, l'elemento <input>
supporta altri attributi che possono risultare utili in alcuni
casi.
Se si vuole mantenere un controllo visibile ma impedire
all'utente di modificarne il contenuto, è possibile utilizzare
gli attributi “disabled” e “readonly”. Il primo impedisce la
selezione del controllo, che di solito viene visualizzato con
uno sfondo grigio. Il valore contenuto in un campo disabled
non viene inviato al server. L'attributo “readonly” ha un
effetto simile a “disabled”, impedendo la modifica del
campo da parte dell'utente, ma il valore del campo viene
inviato al server. Attraverso script JavaScript è possibile
modificare lo stato ed il contenuto di tali controlli.
L'attributo “form” consente di specificare l'identificatore
del form al quale il controllo è associato. Con questo
attributo non è necessario che un controllo sia inserito
all'interno del form di cui fa logicamente parte.
L'attributo “required” viene utilizzato per indicare che la
compilazione di quel campo è obbligatoria. Se l'utente non
compila il campo prima dell'invio del form, il browser può
visualizzare un apposito messaggio di avviso.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Attributi di input</h1>
<form action="script/attr.php" method="get">
<ul>
<li>Disabled: <br/>
<input type="text" name="disabled" value="Non
modificabile" disabled/></li>
<li>Readonly: <br/>
<input type="text" name="readonly" value="Sola
lettura" readonly/></li>
<li>Required: <br/>
<input type="text" name="required"
required/></li>
</ul>
<div>
<p>
<input type="submit" value="Invia" />
</p>
</div>
</form>
</body>
</html>
Altri controlli HTML5 per i form
L'elemento <input> con attributo “type” impostato a color
permette di far comparire un controllo per la selezione di un
colore.
L'elemento <progress> viene utilizzato per dare del
feedback all'utente sul completamento di un'operazione
come lo scaricamento di un file. Il livello di completamento
viene specificato tramite l'attributo “value” (o nel corpo
dell'elemento ma ciò non sembra essere supportato dai
browser) e di solito viene modificato via JavaScript. Si può
utilizzare l'attributo “max” per specificare il valore finale.
Se “value” non è presente, viene presentata un'indicazione
continua di operazione in corso.
L'elemento <meter> è simile a <progress> ma viene
utilizzato per mostrare il livello di un qualche parametro o
misurazione all'interno di uno specifico intervallo di valori.
L'intervallo viene specificato utilizzando gli attributi “min”
e “max”. E' anche possibile indicare delle soglie di
sicurezza minime e massime con gli attributi “low” e
“high”. Il livello corrente viene specificato tramite
l'attributo “value” ed il browser segnala se questo supera le
soglie di sicurezza (di solito utilizzando il colore).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Altri elementi HTML5</h1>
<form action="script/other.php" method="post">
<ul>
<li>Color: <br/>
<input type="color" name="colore"></li>
<li>Progress: <br/>
<progress name="feedback" value="50"
max="100"></progress></li>
<li>Meter: <br/>
<meter name="meter" min="0" max="100" low="25"
high="75" value="50"></meter></li>
</ul>
</form>
</body>
</html>
L'elemento <output>, già incontrato e descritto in
precedenza, fornisce un modo per marcare il risultato di
uno script o applicazione.
L'elemento <keygen> viene utilizzato per la generazione di
chiavi che vengono utilizzate nella gestione di certificati
web.
Accessibilità dei form
Per rendere i form più accessibili dal punto di vista della
comprensibilità e della navigazione, è possibile utilizzare
gli elementi <label>, <fieldset> e <legend>.
Nonostante di solito i campi in un form vengano
visualizzati assieme ad una qualche etichetta che ne
identifica lo scopo, i due oggetti hanno solo una relazione
visiva che si perde ad esempio se il form viene letto tramite
screen reader. L'elemento <label> può essere utilizzato per
associare esplicitamente del testo descrittivo ad uno
specifico campo. Ogni elemento <label> è associato
esattamente ad un controllo in un form e può essere
utilizzato in due modi. Il primo metodo, detto associazione
implicita, consiste nel racchiudere il controllo che si vuole
descrivere all'interno dell'elemento <label>. Il secondo
metodo, l'associazione esplicita, permette di associare una
label all'identificatore di un controllo mediante l'utilizzo
dell'attributo “for”. Il vantaggio dell'associazione esplicita è
che l'elemento <label> e il controllo a cui si riferisce
restano distinti e possono essere meglio controllati a livello
di stile. L'esempio seguente mostra entrambi i metodi.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="script/mailinglist.php" method="get"
id="form-mailinglist">
<div>
<p>
<label for="form-mailinglistusername">Nome:</label> <br/>
<input type="text" name="username" id="formmailinglist-username" />
</p>
</div>
<div>
<p>
<label for="form-mailinglistemail">Email:</label> <br/>
<input type="email" name="email" id="formmailinglist-email" />
</p>
</div>
<div>
<ul>
<li><label><input type="checkbox"
name="topic" value="tecnologia" checked
/>Tecnologia</label></li>
name="topic" value="motori" />Motori</label></li>
name="topic" value="viaggi" />Viaggi</label></li>
</ul>
</div>
<div>
</div>
</form>
</body>
</html>
Notate che gli id utilizzati sono strutturati in modo tale da
semplificare il riconoscimento del form di cui fanno parte
(questo è utile per migliorare l'organizzazione dei form e
distinguere i controlli dei form da altri id utilizzati nella
pagina).
Un ultimo vantaggio nell'utilizzo dell'elemento <label> è
che il testo contenuto al suo interno può essere cliccato per
selezionare il corrispondente controllo il che risulta utile
soprattutto nel caso di checkbox e radiobutton (ma iOS non
sembra compatibile con tale comportamento).
L'elemento <fieldset> può essere utilizzato per raggruppare
logicamente i controlli di un form. All'interno di tale
elemento può anche essere inserito un elemento <legend>
che rappresenta una didascalia per il gruppo.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="script/mailinglist.php" method="get"
id="form-mailinglist">
<fieldset>
<legend>Informazioni obbigatorie</legend>
<div>
<p>
<label for="form-mailinglistusername">Nome:</label> <br/>
<input type="text" name="username"
id="form-mailinglist-username" required />
</p>
</div>
<div>
<p>
<label for="form-mailinglistemail">Email:</label> <br/>
<input type="email" name="email" id="formmailinglist-email" required />
</p>
</div>
</fieldset>
<fieldset>
<legend>Informazioni opzionali</legend>
<div>
<ul>
name="topic" value="tecnologia" checked
/>Tecnologia</label></li>
name="topic" value="motori" />Motori</label></li>
name="topic" value="viaggi" />Viaggi</label></li>
</ul>
</div>
</fieldset>
<div>
</div>
</form>
</body>
</html>

Form - Server users.dimi.uniud.it

Transcript

Documenti analoghi

IRCA SPA Div. RICA - Zoppas Industries

Data Sheet: DFI

USA, mutilato il Patriot Act - Associazione per i Militari Democratici

Come inserire una scrollbar in Web Designer 6 Create un rettangolo

"Princesa De Mi Barrio", il rap italiano si fonde con il

Esercitazione 5 (13/05/2011) - e-Lite

La Baronessa di Carini

Programma python Scrivere un programma python che: • prenda in

dhtml

Corso WordPress IASF - Pegotest