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
HTML5 Forms I nuovi campi di input HTML5 and Next RIA Apps Le API per HTML5 Forms 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
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 Chrome Firefox Internet Explorer Opera Safari Supporto Dalla versione 5.x sono supportati i vari tipi di input (tel, email, url, search, range). La validazione è in buona parte supportata 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. 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. Supporto molto avanzato sia come rendering sia come API di validazione 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.
HTML5 Forms Elenco dei metodi di input HTML5 and Next RIA Apps Le API per HTML5 Forms 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 tel search url email datetime date, month, week, time Descrizione 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() Utilizzato per recuperare una stringa da passare ad un motore di ricerca; aggiunge una X alla fine del campo per resettarne il contenuto. Utilizzato per l'inserimento di una URL, sia assoluta che relativa; nel caso mobile fa comparire (se prevista) una tastiera con caratteri alfabetici. Utilizzato per l'inserimento di uno o più indirizzi email (attributo multiple ) 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 Utilizzati per recuperare una data, un mese, una settinama o un orario mediante controlli standard del browser.
HTML5 Forms Elenco dei metodi di input Input type number range color Descrizione Utilizzato per l'inserimento di un numero (intero e float) Utilizzato per recuperare un valore tra un insieme definito (tra un massimo e minimo); il browser renderizza automaticamente uno slider per selezionare il valore 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.
HTML5 Forms Elenco dei metodi di input HTML5 and Next RIA Apps Le API per HTML5 Forms 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>
HTML5 Forms Elenco dei metodi di input HTML5 and Next RIA Apps Le API per HTML5 Forms 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);"/> <span id="displayrangevalue">18</span> </dd>
HTML5 Forms Elenco dei metodi di input HTML5 and Next RIA Apps Le API per HTML5 Forms 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>
HTML5 Forms Elenco dei metodi di input HTML5 and Next RIA Apps Le API per HTML5 Forms 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>
HTML5 Forms Elenco dei metodi di input HTML5 and Next RIA Apps Le API per HTML5 Forms 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>
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:
HTML5 Forms L'Attributo list e l'elemento datalist <dl> <!-- type=tel --> <dt> <label for="fldtel">scegli una città</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>
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.
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 Dettagli Impostare l'attributo required nel controllo <input type="tel" id="fldtel" name="fldtel" value="" required /> 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 (bool)typemismatch Scopo Garantire che il valore inserito sia del tipo previsto (numero, email, url, etc..) Utilizzo Dettagli Impostare l'attributo type appropriato 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 Forms La validazione (bool)patternmismatch Scopo Assicurare che il valore inserito rispecchi quanto indicato nell'attrubuto pattern Utilizzo Dettagli 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)"/> Per meglio quidare l'utente nell'individuazione dell'errore è sempre buona norma inserire anche l'attributo title. (bool)toolong Scopo Garantire che il valore inserito non sia composto da troppi caratteri Utilizzo Dettagli Impostare l'attributo maxlength nel controllo <input type="tel" id="fldtel" name="fldtel" maxlength="13" /> Restituisce true se la lunghezza inserita è maggiore a quella specificata
HTML5 Forms La validazione (bool)rangeunderflow Scopo Definire il valore minimo di un controllo numerico Utilizzo Dettagli Impostare l'attributo min nel controllo Restituirà true se si va al di sotto di min (bool)rangeoverflow Scopo Definire il valore massimo di un controllo numerico Utilizzo Dettagli (bool)stepmismatch Scopo Garantire che l'input rispetti la combinazione min, max, step Utilizzo Dettagli Impostare l'attributo max nel controllo Restituirà true se si va al di sopra di max Impostare l'attributo step nel controllo Se la combinazione non viene rispettata restituisce true (bool)customerror Scopo Gestisce errori specifici definiti e verificati dall'applicazione Utilizzo Dettagli Richiamare il medoto setcustomvalidity(message) per portare un controllo nella modalita customerror Utile in quei casi in cui la validazione è personalizzata
HTML5 Forms La validazione: esempio di codice HTML5 and Next RIA Apps Le API per HTML5 Forms <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>
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
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 ]
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);
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;