Share
În acest tutorial, vom examina modul în care să difuzeze formularele HTML5 în browserele moderne, în timp ce compensează browserele mai vechi utilizând o combinație de Webforms2, Modernizr, jQuery UI și pluginurile jQuery asortate.
Formularele HTML5 oferă o marcă importantă de marcare semantică și elimină nevoia de multe JavaScript.
Unul dintre primele eforturi spre HTML5 a fost formularul WHATWG Web Forms 2.0, denumit inițial XForms Basic. Spec-ul a introdus noi forme de control și validare, printre altele. Mai târziu, a fost încorporată în HTML5 și a fost ulterior dezbrăcată de modelul de repetare, rezultând în ceea ce știm astăzi ca Formulare HTML5.
Problema tot mai prezentă, compatibilitatea înapoi, rămâne, totuși, o durere de cap, din păcate. Dezvoltatorii trebuie să se ocupe de Internet Explorer temut, care, după cum probabil ați ghicit, nu oferă prea mult sprijin pentru cele mai recente progrese în formulare - chiar și în cea mai recentă beta disponibilă a IE9. Versiuni vechi ale IE? Fagetaboutit.
Cu toate acestea, dorim să folosim aceste noi caracteristici și să le folosim, vom face! Astăzi, vom examina unele dintre aceste elemente noi. Vom verifica dacă browserul acceptă aceste funcții și, dacă nu, oferă backback-uri folosind CSS și JavaScript.
Vom oferi backback-uri numai pentru browserele care nu acceptă formularele HTML5 sau anumite părți ale acestora. Dar, în loc să se bazeze pe sniffing browser-ul, tehnica adecvată este de a utiliza detectarea caracteristicilor. Vom folosi biblioteca populară Modernizr.
Modernizr este o mică bibliotecă JavaScript care testează browserul curent împotriva unei multitudini de caracteristici HTML5 și CSS3.
Dacă doriți să aflați mai multe despre Modernizr, puteți vizita un tutorial Premium "Crash-Course în Modernizr" disponibil pe Tuts + Marketplace.
Webforms2 este o bibliotecă JavaScript de către Weston Ruter, care oferă o implementare cross-browser a versiunii "anterioare" a formularelor HTML5, specificația "WHATWG Web Forms 2.0".
O vom folosi pentru validarea și extinderea funcționalității elementelor curente.
Spec-ul descrie intrarea intervalului ca un control impresionant pentru setarea valorii elementului la un șir reprezentând un număr.
Iată o previzualizare a modului în care arată în Opera 10.63:
Pentru a oferi alternative pentru alte browsere, vom folosi widget-ul glisorului jQuery UI.
Primul, noi creăm funcția de inițializare, care creează cursorul din elementul de intrare.
Accentsconagua
var initSlider = functie () $ ('intrare [tip = interval]') fiecare (function () var $ slider =„); var pas = $ input.attr ('pas'); $ Input.after ($ cursor) .hide (); $ slider.slider (min: $ input.attr ('min'), max: $ input.attr ('max'), pas: $ input.attr (' $ (acest) .val (ui.value);); ); ; Noi creăm un nou <div> pentru fiecare dintre intrările din intervalul nostru și apelați cursorul pe acel nod. Acest lucru se întâmplă deoarece sliderul jQuery UI nu va funcționa apelând-o direct pe elementul de intrare.
Rețineți că obținem atribute din intrare, cum ar fi
minim maximșiEtapa,, și apoi le folosesc ca parametri pentru cursor. Acest lucru ajută slider-ul nostru de rezervă să imite slider-ul real HTML5 în funcționalitate.
Următor →, vom folosi Modernizr pentru a determina dacă browserul curent acceptă acest tip de intrare. Modernizr adaugă clase la elementul document (html), permițându-vă să vizați funcționalitatea specifică a browserului în foaia dvs. de stil. De asemenea, creează un obiect jurnal global auto-denumit care conține proprietăți pentru fiecare caracteristică: dacă un browser o acceptă, proprietatea va evalua la Adevărat și dacă nu, va fi fals.
Cu aceste cunoștințe, pentru a detecta suportul pentru tipurile de intrări, vom folosi Modernizr.inputtypes [tip].
dacă (! Modernizr.inputtypes.range) $ (document) .ready (initSlider); ;
Dacă nu există suport pentru intrarea intervalului, atașăm initSlider funcția pentru jQuery document.ready, pentru a ne inițializa funcția după încărcarea paginii.
Acesta este modul în care glisorul ar trebui să arate într-un browser fără suport nativ pentru intrarea intervalului.
Pentru a cita Mark Pilgrim:
Solicitarea unui număr este mai dificilă decât solicitarea unei adrese de e-mail sau a unei adrese web.
De aceea avem un control separat al formularului care se ocupă în mod specific de numere: spinnerul numeric, numit și pas cu pas numeric.
În momentul acestei scrieri, este susținută de browserele Opera și Webkit; iată un instantaneu de la Opera 10.6.
Deoarece jQuery nu oferă un spinner numeric, vom folosi un plugin jQuery de Brant Burnett, construit ca widget jQuery UI.
Punem în aplicare aceeași tehnică ca înainte; construiți funcția pentru a crea spinner-ul, testați-o cu Modernizr și atașați funcția $ (Document) .ready.
var ($) $ (input type = number] ') fiecare functie ($ $ $ input = $ (this) ), max: $ input.attr ('max'), pas: $ input.attr ('pas'));); ; dacă (! Modernizr.inputtypes.number) $ (document) .ready (initSpinner); ; De asemenea, suporturile numerice sunt suportate minim maxim și Etapa, obținem atributele din câmp și le folosim ca parametri pentru inițializarea pluginului numeric spinner.
Și widget-ul nostru de rezervă arată așa:
Există nu mai puțin de șase tipuri de intrări pentru a servi ca selecții de date.
În momentul acestei scrieri, singurul browser care le suportă în mod corespunzător este Opera, versiunea 9+.
Deocamdată, vom furniza doar o rezervă pentru Data de intrare, utilizând jQuery UI Datepicker. Simțiți-vă liber să utilizați orice alt plugin pentru a imita complet funcționalitatea intrării de selectare a datei HTML5 în implementarea dvs..
($) (input (type = date) ') fiecare functie ($ $ $ input = $ (this); $ input.datepicker minDate: $ input.attr (' ), maxDate: $ input.attr ('max'), dateFormat: 'yy-mm-dd');); ; dacă (! Modernizr.inputtypes.date) $ (document) .ready (initDatepicker); ; 
În prezent, niciun browser nu oferă suport pentru culoare intrare. Deci, până când vor ajunge, vor trebui să utilizeze tehnica noastră de rezervă.
Vom folosi pluginul ColorPicker jQuery al lui Stefan Petre, deoarece jQuery UI nu oferă încă pachetul de bază.
var initColorpicker = functie () $ ('input [type = color]') fiecare functie () var $ input = $ (this); $ input.ColorPicker el) $ (el) .val (hex); $ (el) .ColorPickerHide (););); ; dacă (! Modernizr.inputtypes.color) $ (document) .ready (initColorpicker); ; Și rezultatul nostru:
Noul căutare tipul de intrare este implicit utilizat pentru semantică, dar ar putea oferi în viitor o mulțime de funcționalități interesante.
În prezent, numai browserele Webkit oferă suport pentru această caracteristică. De asemenea, spec rezultate atribut pentru afișarea unui număr de termeni căutați într-un drop-down.
Ar trebui să arate așa ca pe Safari pe OS X:
Restul browserelor afișează acest lucru ca un câmp de text standard, astfel încât să îl puteți utiliza în mod confident cu marcajul standard.
Aceste două tipuri de intrări, URL-ul și e-mail, sunt utilizate în scopul validării. Acestea pot fi deosebit de utile în browserele mobile, unde aspectul tastaturii de pe ecran poate fi modificat pentru a se potrivi cu domeniul focalizat. Acest lucru este deja implementat în Safari pe iOS (iPhone, iPad, iPod) și în unele versiuni de Android.
Aceste tipuri de intrări pot fi implementate de Webforms2 în alte browsere.
Puteți utiliza în mod liber aceste tipuri în proiectele dvs. noi, deoarece acestea se adresează unor casete simple de text. Pe telefon, veți observa că tastatura se modifică în consecință, dacă furnizați aceste tipuri intrărilor.
Noul spec introduce foarte util necesar atribut. În loc să folosim JavaScript fantezist pentru a ne ocupa de câmpurile noastre obligatorii, acum putem folosi cu ușurință acest atribut.
Pentru browserele care nu acceptă acest atribut, putem folosi din nou Webforms2. Deci, de când am inclus-o de la început, nu avem de ce să ne facem griji.
Notă: Asigurați-vă că ați atribut a Nume atribuiți elementelor de formă sau formularului necesar atributul nu va avea efect.
model atributul este utilizat pentru validarea câmpului și acceptă valori numai dacă se potrivesc cu un anumit format, definit cu expresii regulate. Dacă valoarea introdusă nu corespunde modelului, formularul nu va fi trimis.
De exemplu, pentru a valida un număr de telefon, va trebui să folosim următoarele model, sau expresie regulată:
model atributul poate fi implementat în browsere care nu îl acceptă, utilizând Webforms2.
autofocus atributul are exact ceea ce se spune: focalizează automat unul dintre controalele noastre. În prezent este acceptată în browsere bazate pe Webkit (Safari, Chrome etc.) și Opera. Amintiți-vă: numai un singur tip de control poate primi acest atribut.
Webforms2 are grijă de implementarea în browserele nesuportate.
înlocuitor atributul este ceva ce am făcut cu JavaScript de ani de zile. Se adaugă o informație despre câmp, ca o scurtă descriere, care dispare atunci când câmpul este focalizat.
Acest atribut este susținut de cele mai recente browsere Beta Firefox și Webkit.
Pentru a imita comportamentul în browserele mai vechi, vom folosi pluginul Placehold jQuery, realizat de Viget's Design Lab.
var initPlaceholder = funcția () $ ('input [placeholder]'). ; dacă (! Modernizr.input.placeholder) $ (document) .ready (initPlaceholder); ; minim maxim și Etapa atributele de intrare specifică constrângerile pentru anumite controale de formă, cum ar fi selectorul de date, numărul și intervalul. Cu siguranță puteți ghici scopul min și max de la numele lor. Etapa atributul specifică intervalul multiple pentru fiecare clic sau "pas". Pentru isntanță, dacă valoarea pasului este 2, valorile acceptate ar putea fi 0, 2, 4 și așa mai departe.
Aceste atribute sunt acceptate doar de browserele Opera și Webkit chiar acum și sunt implementate, ca rezervă pentru alte browsere, de Webforms2.
Am învățat astăzi că crearea de formulare și furnizarea de rezervă pentru majoritatea noilor adăugiri este o sarcină destul de ușoară. Dacă oamenii încă încearcă să te sperie de utilizarea HTML5 astăzi, nu le acordă atenție; începeți să utilizați instrumentele minunate pe care le aveți la dispoziție chiar acum!
Asigurați-vă că verificați, de asemenea, minunatele html5Widgeturi ale lui Zoltan "Du Lac" Hawryluk, care oferă soluții similare, cu widget-uri JavaScript native.
