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/ e come integrare jQuery Template,
per costruire dinamicamente e via JSON parti della nostra pagina.
Nella lezione di oggi affronteremo i seguente argomenti:
- I nuovi campi di input
- Supporto dei browser
- Le API per i Form HTML5
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – I nuovi campi di input
La specifica HTML5 dedicata ai form si è concentrata sul miglioramento dei form HTML preesistenti, per offire nuovi controlli e intervenire sulle limitazioni di quelli attuali.
Tale specifica riguarda gli aspetti legati al comportamento e alla semantica, lasciando
inalterati quelli legati all'aspetto e alla renderizzazione. Tale aspetto viene lasciato gestire
ai browser, contribuendo alla giusta competizione tra i produttori.
E' importante ricordare, nel rendering di un form di offrire anche soluzioni di fallback, in
modo tale da offire la stessa funzionalità “emulata” via Javascript.
I form HTML5 comprendono un certo numero di nuove API ed elementi, il cui supporto è
ancora in fase di implementazione nei vari browser, ma le specifiche sono già scritte e
affidabili.
Per fare una corretta panoramica sulle funzionalità occorre fare la separazione:
- nuovi tipi di input
- nuove funzionalità e attributi
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Supporto dei browser
Il supporto che i vari browser offrono per i form HTML5 è in crescita, ma attualmente
limitato; l'unico che supporta la quasi totalità delle funzionalità sono Opera e i browser
basati su Webkit (Safari Mobile, Google Chrome).
Browser
Supporto
Chrome
Dalla versione 5.x sono supportati i vari tipi di input (tel, email, url, search,
range). La validazione è in buona parte supportata
Firefox
Supporto non disponibile nelle versioni 3.6.x; nella versione 4.0 il
supporto è parziale. I tipi di input non supportati (url, email, range) sono
renderizzati come normali campi di input.
Internet Explorer
Supporto NON disponibile. L'unica versione che dà una sua
interpretazione è la 9. I nuovi tipi di input sono renderizzati come normali
campi di testo.
Opera
Supporto molto avanzato sia come rendering sia come API di validazione
Safari
Dalla versione 4.x sono supportati vari tipi di input (tel, email, url, search,
range) in particolare c'è la gestione delle tastiere virtuali dedicate nel caso
di Safari Mobile.
Come vedremo più avanti, l'uso di Modernizr ci semplifica di molto l'uso dei Form HTML5.
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Elenco dei metodi di input
Il luogo migliore dove reperire un elenco completo e attuale dei nuovi elementi di input con
le relative specifiche è il sito del W3C stesso, e più precisamente la pagina
http://dev.w3.org/html5/markup/ solo che è una pagina di non facile lettura.
Per avere un quadro generale e aggiornato ecco un elenco che descrive i nuovi tipi di input
Input type
Descrizione
tel
Usato in ambito mobile per l'inserimento di un numero telefonico; fa
comparire una tastiera numerica.
E' possibile impostare un pattern ed utilizzare il validatore
“setCustomValidity()”
search
Utilizzato per recuperare una stringa da passare ad un motore di ricerca;
aggiunge una “X” alla fine del campo per resettarne il contenuto.
url
Utilizzato per l'inserimento di una URL, sia assoluta che relativa; nel caso
“mobile” fa comparire (se prevista) una tastiera con caratteri alfabetici.
email
Utilizzato per l'inserimento di uno o più indirizzi email (attributo “multiple”)
datetime
Utilizzato per inserire in modalità guidata una data ed un orario in base
alle impostazioni locali del browser; viene utilizzato un controllo
calendario renderizzato automaticamente dal browser
date, month,
week, time
Pagina 1
Utilizzati per recuperare una data, un mese, una settinama o un orario
mediante controlli standard del browser.
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Elenco dei metodi di input
Input type
Descrizione
number
Utilizzato per l'inserimento di un numero (intero e float)
range
Utilizzato per recuperare un valore tra un insieme definito (tra un massimo
e minimo); il browser renderizza automaticamente uno slider per
selezionare il valore
color
Utilizzato per recuperare il codice esadecimale o RGB di un colore,
mediante un apposito selettore, creato e gestito direttamente dal browser.
Ecco un esempio di codice per un form HTML5 con i nuovi campi di input.
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Elenco dei metodi di input
Ecco un esempio di codice per un form HTML5 con i nuovi campi di input.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Forms</title>
<script type="text/javascript">
// Visualizza il valore attuale del range
function showRangeValue(rangeVal)
{
document.getElementById('displayRangeValue').innerHTML = rangeVal;
}
// === Verifica che i due indirizzi siano uguali
function checkEmail(input) {
if (input.value != document.getElementById('fldEmail').value) {
// --- Le due password non coincidono, visualizzo un messaggio
// --- di errore "custom"
input.setCustomValidity('I due indirizzi email devono essere uguali');
} else {
// --- Le due password coincidono, resetto il messaggio di errore
input.setCustomValidity('');
}
}
</script>
</head>
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Elenco dei metodi di input
Ecco un esempio di codice per un form HTML5 con i nuovi campi di input.
<body>
<h1>Panoramica nuovi campi di input</h1>
<form id="frmMain" id="frmMain" action="<?=$_SERVER[PHP_SELF]?>">
<dl>
<!-- type=tel -->
<dt>
<label for="fldTel">Numero Telefonico</label>
</dt>
<dd>
<input type="tel" id="fldTel" name="fldTel" value="" required />
</dd>
<!-- type=range -->
<dt>
<label for="fldRange">Range di valori</label>
</dt>
<dd>
<input type="range" id="fldRange" name="fldRange"
min=18 max=120 value=18
onchange="javacript:showRangeValue(this.value);" />
&nbsp;<span id="displayRangeValue">18</span>
</dd>
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Elenco dei metodi di input
Ecco un esempio di codice per un form HTML5 con i nuovi campi di input.
<!-- type=email -->
<dt>
<label for="fldEmail">Indirizzo email</label>
</dt>
<dd>
<input type="email" id="fldEmail" name="fldEmail" value=""
required />
</dd>
<dt>
<label for="fldEmailRepeat">Ripeti Indirizzo email</label>
</dt>
<dd>
<input type="email" id="fldEmailRepeat" name="fldEmailRepeat" value=""
required
oninput="javascript:checkEmail(this);" />
</dd>
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Elenco dei metodi di input
Ecco un esempio di codice per un form HTML5 con i nuovi campi di input.
<!-- type=text e attributo pattern impostato -->
<dt>
<label for="fldTextPattern">Inserisci un testo nel formato AAANNNN</label>
</dt>
<dd>
<input type="text" id="fldTextPattern" name="fldTextPattern"
required pattern="[A-Z]{3}[0-9]{4}"
title="Inserisci un testo nel formato AAANNNN (3 lettere maiuscole e 4 numei)"/>
</dd>
<!-- type=url -->
<dt>
<label for="fldURL">Insersci una URL</label>
</dt>
<dd>
<input type="url" id="fldURL" name="fldURL"
placeholder="http://www.il-mio-blog.com" />
</dd>
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – Elenco dei metodi di input
Ecco un esempio di codice per un form HTML5 con i nuovi campi di input.
<!-- type=number -->
<dt>
<label for="fldNumber">Insersci un numero</label>
</dt>
<dd>
<input type="number" id="fldNumber" name="fldNumber" min=5 max=10 />
</dd>
<!-- type=date -->
<dt>
<label for="fldData">Insersci una data</label>
</dt>
<dd>
<input type="date" id="fldData" name="fldData"
</dd>
</dl>
<input type="submit" value="Invia Form" >
</form>
</body>
</html>
Pagina 1
/>
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – L'Attributo “list” e l'elemento “datalist”
L'attributo “list” e l'elemento “datalist” interagiscono tra di loro per consentire agli
sviluppatori di specificare l'elenco dei possibili valori di un campo.
Per utilizzare questa funzionalità è necessario:
- creare un elemento “datalist” nel documento impostando un ID univoco in un punto
qualunque della pagina;
- popolare l'elemento “datalist” con un elenco di elementi “option” con i dati che voglio
poter visualizzare e scegliere.
Ad esempio consideriamo il seguente codice:
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – L'Attributo “list” e l'elemento “datalist”
<dl>
<!-- type=tel -->
<dt>
<label for="fldTel">Scegli una citt&agrave;</label>
</dt>
<dd>
<input type="text" id="fldCitta" name="fldCitta"
list="elencoCitta"
value="" required />
</dd>
</dl>
</form>
<datalist id="elencoCitta">
<option value="milano" label="Milano" />
<option value="lodi" label="Lodi" />
<option value="bergamo" label="Bergamo" />
<option value="piacenza" label="Piacenza" />
<option value="cremona" label="Cremona" />
<option value="torino" label="Torino" />
</datalist>
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
La funzione principale della validazione è quella di identificare dati non validi nei controlli
e comunicare questi errori all'utente. Quindi occorre implementare una serie di verifiche
“client-side”, cioè che avvengono nel browser, per notificare questi errori e dare la
possibilità di correggerli, prima di inviare il form verso il server.
In HTML5 vi sono otto modalità di verifica dei dati inseriti nei form, esaminandole una per
una. Ma prima abbiamo bisogno di definire un oggetto principale: il “validityState”.
L'oggetto “validityState” è disponibile in ogni controllo nei browser che supportano la
validazione dei form HTML5:
var valCheck = document.myForm.myInput.validity;
Questo comando crea un riferimento all'oggetto “validityState” di un elemento di nome
“myInput”. Tale oggetto a sua volta contiene i riferimenti agli otto possibili stati di
validazione e un resoconto con il risultato dei controlli, ad esempio
valCheck.valid
Restituisce un booleano riferito al rispetto di tutti i vincoli di validazione di uno specifico
campo; è appunto da considerare come un resoconto di tutti i vincoli: se uno non è
rispettato avrò “false”.
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
L'oggetto validityState si aggiorna in tempo reale: è possibile interrogare il riferimento più
volte dopo averlo creato e i valori resituiti rispecchieranno la situazione anche dopo che i
valori nel form sono stati modificati.
Ecco l'elenco degli otto stati:
(bool)valueMissing
Scopo
Assicurare che nel controllo venga inserito un valore
Utilizzo
Impostare l'attributo “required” nel controllo
<input type="tel" id="fldTel" name="fldTel" value="" required />
(bool)typeMismatch
Pagina 1
Dettagli
Con l'attributo required impostato, il controllo non sarà
validato finchè non vi è l'azione dell'utente (o di uno
script) che inserisce un valore.
Se il valore manca, quindi valueMissing==true
Scopo
Garantire che il valore inserito sia del tipo previsto
(numero, email, url, etc..)
Utilizzo
Impostare l'attributo “type” appropriato
Dettagli
Gli attributi type email, url, etc non servono soltanto per
far comparire le tastirere virtuali adeguate nel caso
mobile, ma appunto vanno ad identificare un tipo di
dato ben specifico.
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
(bool)patternMismatch
Scopo
Assicurare che il valore inserito rispecchi quanto
indicato nell'attrubuto “pattern”
Utilizzo
Impostare l'attributo “pattern” nel controllo
<input type="text" id="fldTextPattern" name="fldTextPattern"
required pattern="[A-Z]{3}[0-9]{4}"
title="Inserisci un testo nel formato AAANNNN (3 lettere maiuscole
e 4 numei)"/>
(bool)tooLong
Dettagli
Per meglio quidare l'utente nell'individuazione
dell'errore è sempre buona norma inserire anche
l'attributo “title”.
Scopo
Garantire che il valore inserito non sia composto da
troppi caratteri
Utilizzo
Impostare l'attributo “maxLength” nel controllo
<input type="tel" id="fldTel" name="fldTel" maxlength="13" />
Dettagli
Pagina 1
Restituisce true se la lunghezza inserita è maggiore a
quella specificata
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
(bool)rangeUnderflow
(bool)rangeOverflow
(bool)stepMismatch
(bool)customError
Pagina 1
Scopo
Definire il valore minimo di un controllo numerico
Utilizzo
Impostare l'attributo “min” nel controllo
Dettagli
Restituirà true se si va al di sotto di “min”
Scopo
Definire il valore massimo di un controllo numerico
Utilizzo
Impostare l'attributo “max” nel controllo
Dettagli
Restituirà true se si va al di sopra di “max”
Scopo
Garantire che l'input rispetti la combinazione min, max,
step
Utilizzo
Impostare l'attributo “step” nel controllo
Dettagli
Se la combinazione non viene rispettata restituisce true
Scopo
Gestisce errori specifici definiti e verificati
dall'applicazione
Utilizzo
Richiamare il medoto “setCustomValidity(message)”
per portare un controllo nella modalita “customError”
Dettagli
Utile in quei casi in cui la validazione è personalizzata
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione: esempio di codice
<script type="text/javascript">
// === handler per l'evento "invalid"
function invalidHandler(evt)
{
var validity = evt.srcElement.validity;
// --- Verifica nell'oggetto validity quale vincolo non è rispettato
if(validity.valueMissing)
{
// --- mostra all'utente un messaggio custom
}
// ... eventuali verifiche sul campo
}
// === Disabilita gli altri eventi sul campo
evt.preventDefault();
// === Attribuisco il gestore dell'evento invalid
myField.addEventListener('invalid', invalidHandler, false);
</script>
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
Nel caso di utilizzo di Modernzr abbiamo la seguente semplice considerazione da fare:
if(Modernizr.input.attributeName)
{
// === Attributo supportato
}
if(Modernizr.inputtypes.elementName)
{
// === Elemento supportato supportato
}
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
Per offrire una funzionalità alternativa, si può considerare il seguente codice:
window.onload = function() {
// get the form and its input elements
var form = document.forms[0],
inputs = form.elements;
// if no autofocus, put the focus in the first field
if (!Modernizr.input.autofocus) {
inputs[0].focus();
}
[ … segue … ]
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
Per offrire una funzionalità alternativa, si può considerare il seguente codice:
// if required not supported, emulate it
if (!Modernizr.input.required) {
form.onsubmit = function() {
var required = [], att, val;
// loop through input elements looking for required
for (var i = 0; i < inputs.length; i++) {
att = inputs[i].getAttribute('required');
// if required, get the value and trim whitespace
if (att != null) {
val = inputs[i].value;
// if the value is empty, add to required array
if (val.replace(/^\s+|\s+$/g, '') == '') {
required.push(inputs[i].name);
}
}
}
Pagina 1
HTML5 and Next RIA Apps – Le API per HTML5 Forms
HTML5 Forms – La validazione
Per offrire una funzionalità alternativa, si può considerare il seguente codice:
// show alert if required array contains any elements
if (required.length > 0) {
alert('The following fields are required: ' +
required.join(', '));
// prevent the form from being submitted
return false;
}
};
}
}
Pagina 1