Pensi di sapere tutto sui form vero?!

0345-20_new_html5_form_input_type_demoCon Formazione informatica Gualdo Tadino cercheremo di rispondere alla seguente domanda: quante ne sai sui FORM? Io so tutto sui form risponderà l’aspirante web developer esperto di HTML. Si ma le specifiche di HTML5 le hai viste? Se proprio convinto che l’universo dei form sia relegato ai famosi input type=text o input type=submit o similari? Forse caro aspirante web designer ignori quella dozzina di novità che stravolgono la tua concezione. Formazione Informatica Gualdo Tadino segnala ad esempio il <input type=”search”> oppure <input type=”number”> oppure <input type=”range”> oppure <input type=”color”> <input type=”tel”> oppure <input type=”url”> oppure <input type=”email”> oppure <input type=”date”> oppure <input type=”month”> oppure <input type=”week”> o anche datetime, time e datetime-local. Tutto questo nasce per organizzare meglio i contenuti semantici e ordinarli in corporazioni logiche. Per verificare il supporto dei tipi di input HTML5 si usano tecniche di controllo specifiche ad esempio prima di tutto si crea un elemento input fittizio in memoria:

var i =document.createElement(“input”);

Il tipo di input predefinito tra gli elementi <input> é text. Questo si rileverà di estrema importanza. Quindi si imposta l’attributo type dell’ elemento <input> fittizio sul tipo di input che si vuole controllare:

i. setAttribute(“type”, “color”);

se il proprio browser supporta quel determinato input la proprietà type manterrà il valore assegnato, se il proprio input non supporta quel determinato tipo di input, ignorerà il valore che si é impostato e la proprietà continuerà ad essere type text:

return i.type !== “text”;

invece di scrivere manualmente 13 funzioni separate, per verificare il supporto di tutti i nuovi tipi di input definiti in HTML5 si può usare Modernizr che utilizza un unico elemento input per verificare in modo efficiente il supporto di tutti e 13 i tipi di input. Quindi costruisce un hash di nome Modernizr.inputtypes che consente 13 chiavi (attributi tipo HTML5) e 13 valori booleani (true se é supportato, false se non lo é):

if (Modernizr.inputtypes.date) {
istruzioni
//input type date non é supportato in modo nativo
// provare dojo o jqueryUI per istanziarlo
}

Con Formazione Informatica Gualdo Tadino (FIGT) per questa sessione di allenamento su HTML5 é tutto!

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...