O privire în HTML5 formează tipurile de intrări Data, culoarea și intervalul
Formularele se găsesc peste tot pe site-uri web. Facebook, Twitter, Google - pentru a numi doar câteva - ne obligă să vă logați sau să vă înregistrați pe site printr-un formular, de fapt folosim de asemenea un formular pentru a tweet și actualiza starea în site-urile sociale. Pe scurt, forma este o parte foarte importantă pentru a putea interacționa cu un site web.
Un formular web este construit cu intrări, în trecut, avem doar câteva opțiuni pentru tipurile de intrări; precum text, parola, radio, Caseta de bifat și a depune. Acum, HTML5 vine cu mari îmbunătățiri și introduce multe noi tipuri de intrări în spec.
Deci, în acest post vom săpăm în câteva din piesele noi interesante din Formulare HTML5 că noi credem că ar trebui să le încercați; Hai să le verificăm.
Picker de date
Primul lucru pe care ar trebui să-l aruncăm o privire este selectorul de date. Selectarea datei este un lucru obișnuit pe care îl puteți găsi în formularul de înregistrare, în special în unele site-uri sau în aplicații cum ar fi rezervarea de zboruri și de hotel.
Există multe librării JavaScript pentru a crea selectorul de date. Acum, putem crea unul într-un mod mult mai ușor cu intrarea HTML5 Data, după cum urmează;
selector de date în HTML5 funcționează practic foarte asemănător cu modul în care Bibliotecile JavaScript au făcut; când ne vom concentra pe câmp, un calendar va apărea și apoi vom putea naviga prin luni și ani pentru a selecta data.
Cu toate acestea, fiecare browser care acceptă în prezent Data tipul de intrare, și anume Chrome, Opera și Safari, afișează acest tip de intrare un pic diferit, ceea ce poate duce la probleme de inconsecvență în experiența utilizatorului, și cum arată acesta;
Unele diferențe notabile pe care le puteți vedea dintr-o privire din captura de ecran de mai sus; Opera a folosit abrevierea de trei litere în limba engleză pentru numele de zile - Sun, Mon, Thu și așa mai departe, în timp ce Chrome folosea limba mea locală, Safari - pe de altă parte - funcționează destul de ciudat, nu arată un calendar deloc.
Există și unele noi intrare tipuri la selectați mai exact data sau ora; lună, săptămână, timp, datetime și datetime-locală, care suntem siguri că cuvântul cheie în sine este destul de descris pentru a spune ce face.
Puteți vedea toate acestea în acțiune de la link-ul de mai jos, dar asigurați-vă că îl vedeți în Opera 11 și mai sus, deoarece, la scriere, este singurul browser care acceptă toate aceste tipuri de intrări.
- Datapicker Demo
Selector de culoare
Selector de culoare este adesea necesară în anumite aplicații bazate pe web, cum ar fi acest generator de gradienți CSS3, însă tot acest timp, dezvoltatorii web se bazează încă pe o bibliotecă JavaScript, cum ar fi jsColor, pentru a-și face treaba. Dar acum putem crea un selector de culori pentru browser-ul nativ cu HTML5 culoare tip de introducere;
Încă o dată, browserele, în acest caz Chrome și Opera, fac acest tip de intrare ușor diferit;
Opera afișează în prealabil opțiunea de culoare de bază atât pe butonul de clic, cât și în format hexazecimal al culorii selectate, într-un drop-down, în timp ce Chrome va afișa direct paleta de culori într-o fereastră nouă atunci când se dă clic pe.
În plus, putem seta și culoarea implicită cu valoare atribut, după cum urmează;
Astfel, atunci când este vizualizat în browserele nesuportate, intrare se va degrada într-un câmp de text și valoarea implicită va fi vizibilă care poate da un fel de indiciu pentru utilizatori ce ar trebui introdus în câmp.
Afișați valoarea culorii
În loc să deschideți Photoshop doar pentru a copia hex formatul de culoare, puteți crea o unealtă simplă pe acest tip de intrare pentru a face treaba, deoarece culoarea generată este deja în hexazecimal, aceasta ar fi foarte ușoară;
Mai întâi, adăugăm id selector de culoare la intrare și adăugăm, de asemenea, o imagine goală div cu id hexcolor alături de acesta pentru a conține valoarea.
Avem nevoie de jQuery conectat în cap din documentul nostru. Apoi stocăm valoarea culorii și cea adăugată recent div într-o variabilă, ca atare;
var culoare = $ ('# colorpicker') val (); hexcolor = $ ('# hexcolor'); Obțineți valoarea inițială din #selector de culoare;
hexcolor.html (culoare);
... și, în cele din urmă, modificați valoarea când se modifică și culoarea selectată;
$ ('# colorpicker') la ('change', function () hexcolor.html (this.value);); Asta e; acum să o vedem în acțiune.
- Colorpicker Demo
Gamă
gamă tipul de intrare ne permite să adăugăm un cursor în browser pentru selectarea numărului dintr-o gamă pe care o putem găsi și în jQuery UI.
Fragmentul de mai sus este fundamental pentru punerea în aplicare a gamă tip de introducere. De asemenea, putem schimba orientarea cursorului pe vertical folosind CSS, după cum urmează;
intrare [tip = interval] lățime: 20px; înălțime: 200px; -webkit-aspect: cursor-vertical;
În plus, putem seta min și max intervalul de numere, de exemplu;
În fragmentul de mai jos setăm min la zero și 225 pentru maxim. Când nu sunt specificate explicit, browserul va lua în mod implicit 0 pentru minim la 100 pentru maxim.
Afișați numărul
Există însă o constrângere, numărul este invizibil, nu putem vedea numărul / valoarea generată de la cursorul din browser. Pentru a afișa numărul trebuie să adăugăm un pic de JavaScript sau jQuery, și aici este modul în care îl facem;
Mai întâi adăugăm un gol div lângă stilul de intrare, stilul div suficient, astfel încât să pară o cutie.
Apoi puneți următorul cod care va face același lucru ca și codul de mai sus în butonul de selectare puternic, cu excepția acum obținem valoarea de la cursor.
$ ('# slider') schimbare (functie () var val = $ (' ) output.html (această valoare););); Acum, puteți vedea demo-ul. Doar un memento, vizualizați demo-ul în aceste browsere - Chrome, Opera și Safari, deoarece Firefox și IE nu acceptă gamă tip de intrare în acest moment.
- Range Demo
Cuvintele finale
Este clar că HTML5 face viața mult mai ușoară prin introducerea multor noi tipuri de intrări. Dar, ca orice alte caracteristici HTML5, suportul este foarte limitat, mai ales în browserele mai vechi, așadar ar trebui să folosim aceste noi caracteristici cu precauție, în special cu noile tipuri de intrări pe care le-am discutat în această postare; Data, Culoarea și Intervalul.
Dar, în cele din urmă, sperăm că acum aveți o mai bună înțelegere Formulare HTML5. Vă mulțumim pentru că ați citit acest post și sperăm că v-ați bucurat.
- Demo
- Descărcați sursa
Citirea în continuare
Mai jos sunt câteva linkuri utile pentru a vă putea detalia în continuare Formulare HTML.
- Noi funcții de formular în HTML5 - Opera Dev.
- Starea actuală a formularelor HTML5 - Wufoo
- Formulare HTML5 - w3school.org
- Când pot utiliza formularele HTML5? - CanIUse.com
