Un aspetto in tipi di input di moduli HTML5 Data, colore e intervallo

I moduli si trovano ovunque sui siti web. Facebook, Twitter, Google - solo per citarne alcuni - ci impongono di accedere o registrarsi al sito tramite un modulo, infatti utilizziamo anche un modulo per twittare e aggiornare lo stato nei siti social. In breve, la forma è una parte molto importante per essere in grado di interagire con un sito web.

Un modulo web è costruito con input, in passato, abbiamo solo alcune opzioni per i tipi di input; ad esempio testo, parola d'ordine, Radio, casella di controllo e Sottoscrivi. Ora, HTML5 offre grandi miglioramenti e introduce molti nuovi tipi di input nelle specifiche.

Quindi, in questo post approfondiremo alcuni dei nuovi pezzi interessanti di Form HTML5 che pensiamo che dovresti provarli; controlliamoli.

Date picker

La prima cosa che vorremmo dare un'occhiata è il raccoglitore di date. La selezione della data è una cosa comune che puoi trovare nel modulo di registrazione, in particolare in alcuni siti o applicazioni come la prenotazione di voli e hotel.

Esistono molte librerie JavaScript per creare il selettore di date. Ora, possiamo anche crearne uno in modo molto più semplice con l'input HTML5 Data, come segue;

Il date picker in HTML5 funziona fondamentalmente molto simile a come hanno fatto le librerie JavaScript; quando ci concentriamo sul campo apparirà un calendario, quindi potremo navigare tra i mesi e gli anni per selezionare la data.

Tuttavia, ogni browser che attualmente supporta il Data il tipo di input, cioè Chrome, Opera e Safari, mostra questo tipo di input in modo un po 'diverso, il che potrebbe portare a problemi di incoerenza nell'esperienza utente, ed ecco come appare;

Alcune differenze notevoli che puoi vedere a colpo d'occhio dallo screenshot qui sopra; l'Opera usava l'abbreviazione inglese a tre lettere per il nome del giorno - Sole, Lun, Gio, e così via, mentre il Chrome usava la mia lingua locale, il Safari - d'altra parte - funziona piuttosto strano, non mostra un calendario affatto.

Ci sono anche alcuni nuovi ingresso tipi a seleziona data o ora in modo più specifico; mese, settimana, tempo, appuntamento e datetime-locali, di cui siamo sicuri che la stessa parola chiave sia abbastanza descrittiva per dire cosa fa.

Puoi visualizzarli tutti in azione dal link sottostante, ma assicurati di visualizzarli in Opera 11 e versioni successive, poiché, al momento della scrittura, è l'unico browser che supporta tutti questi tipi di input.

• Datepicker Demo

Color Picker

Color Picker è spesso necessario in alcune applicazioni basate sul Web, come questo generatore di gradazioni CSS3, ma per tutto il tempo gli sviluppatori Web si affidano ancora a una libreria JavaScript, come jsColor, per eseguire il lavoro. Ma ora possiamo creare un selettore di colori per browser nativo con HTML5 colore tipo di input;

Ancora una volta, i browser, in questo caso Chrome e Opera, rendono questo tipo di input leggermente diverso;

L'Opera visualizza per prima cosa l'opzione di colore di base sul clic e il formato esadecimale del colore selezionato in un menu a discesa, mentre Chrome fa scattare la tavolozza dei colori direttamente in una nuova finestra quando si fa clic.

Inoltre, possiamo anche impostare il colore predefinito con valore attributo, come segue;

In questo modo, quando viene visualizzato nei browser non supportati, il ingresso si degraderà in un campo di testo e sarà visibile il valore predefinito che può dare una sorta di suggerimento per gli utenti che cosa deve essere inserito nel campo.

Mostra il valore del colore

Piuttosto che aprire Photoshop solo per copiare il esadecimale formato colore, puoi effettivamente creare un semplice strumento su questo tipo di input per fare il lavoro, poiché il colore generato è già in esadecimale, questo sarebbe veramente facile;

Per prima cosa, aggiungiamo id color Picker all'ingresso e aggiungiamo anche un vuoto div con id HexColor accanto ad esso per contenere il valore.

Abbiamo bisogno del jQuery collegato nel capo del nostro documento. Quindi memorizziamo il valore del colore e il nuovo aggiunto div in una variabile, in questo modo;

 var color = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); 

Ottieni il valore iniziale dal #color Picker;

 hexcolor.html (colore); 

... e infine modifica il valore quando viene cambiato anche il colore selezionato;

 $ ('# colorpicker'). on ('change', function () hexcolor.html (this.value);); 

Questo è tutto; ora guardiamolo in azione.

• ColorPicker Demo

Gamma

Il gamma il tipo di input ci consente di aggiungere un cursore nel browser per selezionare il numero in un intervallo che possiamo trovare anche nell'interfaccia utente jQuery.

Lo snippet sopra riportato è di base l'implementazione di gamma tipo di input. Possiamo anche cambiare l'orientamento del cursore in verticale usando CSS, come segue;

 input [type = range] width: 20px; altezza: 200 px; -webkit-appearance: slider-vertical;  

Inoltre, possiamo impostare il min e max intervallo dei numeri, ad esempio;

Nello snippet seguente impostiamo il min a zero e 225 per il massimo Quando non vengono specificati esplicitamente, per impostazione predefinita verrà utilizzato il browser 0 per il minimo a 100 per il massimo.

Mostra il numero

C'è un vincolo però, il numero è invisibile, non possiamo vedere il numero / valore generato dal cursore nel browser. Per visualizzare il numero dobbiamo aggiungere un po 'di JavaScript o jQuery, ed ecco come lo facciamo;

Per prima cosa aggiungiamo un vuoto div accanto all'input, stile il div sufficientemente così sembra una scatola.

Quindi inserisci il seguente codice che farà lo stesso del codice sopra nel selettore strongcolor, eccetto ora otteniamo il valore dal cursore.

 $ (function () var val = $ ('# cursore'). val (); output = $ ('# output'); output.html (val); $ ('# cursore'). change (function ( ) output.html (this.value););); 

Ora puoi vedere la demo. Solo un promemoria, guarda la demo di questi browser - Chrome, Opera e Safari, dato che Firefox e IE non supportano il gamma tipo di input al momento.

• Range Demo

Parole finali

È chiaro che HTML5 rende le nostre vite molto più semplici introducendo molti nuovi tipi di input. Ma come qualsiasi altra funzionalità HTML5, il supporto è molto limitato, specialmente nei browser più vecchi, quindi dovremmo usare queste nuove funzionalità con cautela, specialmente i nuovi tipi di input che abbiamo discusso in questo post; Data, colore e intervallo.

Ma alla fine speriamo che ora abbia più informazioni Form HTML5. Grazie per aver letto questo post, e speriamo che ti sia piaciuto.

• dimostrazione
• Scarica fonte

Ulteriori letture

Di seguito sono riportati alcuni link utili per approfondire ulteriormente i moduli HTML.

• Nuove funzionalità del modulo in HTML5 - Opera Dev.
• Lo stato attuale dei moduli HTML5 - Wufoo
• Attributi modulo HTML5 - w3school.org
• Quando posso utilizzare i moduli HTML5? - CanIUse.com