Share
I denna handledning ska vi titta på hur man tjänar HTML5-formulär till moderna webbläsare samtidigt som de kompenserar för äldre webbläsare genom att använda en mix av Webforms2, Modernizr, jQuery UI och diverse jQuery-plugins.
HTML5-drivna formulär ger en hel del semantisk markering, och tar bort behovet av mycket JavaScript.
En av de första ansträngningarna mot HTML5 var WHATWGs webbformulär 2.0, ursprungligen kallade XForms Basic. Specen införde bland annat nya formulärkontroller och validering. Senare inkorporerades den i HTML5 och avlägsnades därefter av repetitionsmodellen, vilket resulterade i vad vi idag vet som HTML5 Forms.
Det ständigt aktuella problemet, bakåtkompatibilitet, är fortfarande en huvudvärk men tyvärr. Utvecklare måste hantera den fruktade Internet Explorer, som, som du kanske har gissat, inte ger mycket stöd för den senaste utvecklingen i formulär - även i den senaste tillgängliga betaen av IE9. Äldre versioner av IE? Fagetaboutit.
Ändå vill vi använda dessa nya funktioner och använda dem, vi kommer! Idag ska vi titta på några av dessa nya element. Vi kontrollerar om webbläsaren stöder dessa funktioner och, om inte, tillhandahåller fallbacks med hjälp av CSS och JavaScript.
Vi tillhandahåller endast fallbacks till webbläsare som inte stöder HTML5-formulär eller vissa delar av dem. Men istället för att förlita sig på sniffing i webbläsaren, är den rätta tekniken att använda funktionsdetektering. Vi använder det populära Modernizr-biblioteket.
Modernizr är ett litet JavaScript-bibliotek som testar den aktuella webbläsaren mot en mängd HTML5- och CSS3-funktioner.
Om du vill lära dig mer om Modernizr kan du kolla in "A Video Crash Course i Modernizr" Premium Handledning finns på Tuts + Marketplace.
Webforms2 är ett JavaScript-bibliotek av Weston Ruter, vilket ger en webbläsarimplementering av "tidigare" versionen av HTML5-formulär, "WHATWG Web Forms 2.0" -specifikationen.
Vi använder den för validering och förlängning av funktionalitet för aktuella element.
Spec beskriver intervallinmatningen som en oklar kontroll för att ställa in elementets värde till en sträng som representerar ett tal.
Här är en förhandsgranskning av hur det ser ut i Opera 10.63:
För att tillhandahålla återgång för andra webbläsare använder vi jQuery UI: s reglage-widget.
Först, Vi skapar vår initialiseringsfunktion, som skapar reglaget från ingångsområdet.
Accentsconagua
var initSlider = funktion () $ ('input [typ = range]'). Varje (funktion () var $ input = $ (detta); var $ slider = $ (''); var steg = $ input.attr ('step'); $ Input.after (reglaget $) .hide (); $ slider.slider (min: $ input.attr ('min'), max: $ input.attr ('max'), steg: $ input.attr $ (detta) .val (ui.value);); ); ; Vi skapar en ny <div> element för vart och ett av våra sortimentingångar och ringa reglaget på den noden. Detta beror på att jQuery UI-reglaget inte fungerar genom att ringa det direkt på inmatningselementet.
Observera att vi får attribut från inmatningen, till exempel
min Maxochsteg,, och använder dem som parametrar för reglaget. Detta hjälper vår fallback-reglaget att mimicera den verkliga HTML5-reglaget i funktionalitet.
Nästa, Vi använder Modernizr för att avgöra om den aktuella webbläsaren stöder denna inmatningstyp. Modernizr lägger till klasser till dokumentelementet (html), så att du kan rikta in specifika webbläsarfunktioner i ditt stilark. Det skapar också ett självbetitlat globalt JavaScript-objekt som innehåller egenskaper för varje funktion: om en webbläsare stöder den ska egenskapen utvärdera till Sann och om inte, det blir det falsk.
Med den kunskapen, för att upptäcka stöd för ingångstyper, använder vi Modernizr.inputtypes [typ].
om (! Modernizr.inputtypes.range) $ (dokument) .ready (initSlider); ;
Om det inte finns något stöd för sortimentets ingång, bifogar vi initSlider funktionen till jQuery s document.ready, att initiera vår funktion efter att sidan har laddats.
Så här ska skjutreglaget titta i en webbläsare utan inbyggt stöd för intervallinmatningen.
Att citera Mark Pilgrim:
Att fråga om ett nummer är svårare än att fråga om en e-postadress eller webbadress.
Därför har vi en separat formkontroll som specifikt handlar om siffror: den numeriska spinnaren, även kallad den numeriska steppen.
Vid tidpunkten för denna skrivning stöds den av Opera och Webkit-baserade webbläsare; Här är en stillbild från Opera 10.6.
Eftersom jQuery inte tillhandahåller en numerisk spinnare använder vi istället ett jQuery-plugin av Brant Burnett, byggt som en jQuery UI-widget.
Vi genomför samma teknik som tidigare; bygga upp funktionen för att skapa spinnaren, test med Modernizr och bifoga funktionen till $ (Dokument) .ready.
var init = $ (detta); $ input.spinner (min: $ input.attr ('min' ), max: $ input.attr ('max'), steg: $ input.attr ('step'));); ; om (! Modernizr.inputtypes.number) $ (dokument) .ready (initSpinner); ; Eftersom antalet ingångar stöder också min Max och steg, vi får attributen från fältet och använder dem som parametrar för initialisering av numeriskt spinnare plugin.
Och vår fallback-widget ser ut så här:
Det finns inte mindre än sex ingångstyper för att fungera som datumväljare.
Vid den här skrivningen är den enda webbläsaren som ordentligt stöder dem Opera, versioner 9+.
För närvarande ger vi endast återgång till datum input, med jQuery UI Datepicker. Använd gärna något annat plugin för att fullständigt efterlikna funktionaliteten för HTML5-datumväljarens inmatning i din implementering.
var initDatepicker = funktion () $ ('inmatning [typ = datum]'). varje (funktion ) var $ input = $ (detta); $ input.datepicker (minDate: $ input.attr ), maxDate: $ input.attr ('max'), dateFormat: 'yy-mm-dd');); ; om (! Modernizr.inputtypes.date) $ (dokument) .ready (initDatepicker); ; 
Just nu ger ingen webbläsare stöd för färgen inmatning. Så tills de kommer ikapp behöver de alla använda vår fallback-teknik.
Vi använder Stefan Petre's ColorPicker jQuery-plugin, eftersom jQuery UI inte ger en med baspaketet än.
var initColorpicker = funktion () $ ('input [typ = färg]'). Varje (funktion () var $ input = $ (detta); $ input.ColorPicker (onSubmit: funktionen (hsb, hex, rgb, el) $ (el) .val (hex); $ (el). KolorPickerHide ();;;); ; om (! Modernizr.inputtypes.color) $ (dokument) .ready (initColorpicker); ; Och vårt resultat:
Den nya Sök Inmatningstyp används implicit för semantik, men kan ge många intressanta funktioner i framtiden.
För närvarande erbjuder endast webbkitbaserade webbläsare stöd för den här funktionen. Specen stöder också a resultat Attribut för att visa ett antal sökta termer i en rullgardinsmeny.
Det ska se ut så här på Safari på OS X:
Resten av webbläsarna visar detta som ett standardfält, så du kan säkert använda den med standardmarkeringen.
Dessa två ingångstyper, url och e-post, används för valideringsändamål. De kan vara särskilt användbara i mobila webbläsare, där skärmtangentbordslayouten kan ändras för att passa det fokuserade fältet. Detta är redan implementerat i Safari på iOS (iPhone, iPad, iPod) och vissa versioner av Android.
Dessa inmatningstyper kan implementeras av Webforms2 i andra webbläsare.
Du kan fritt använda dessa typer i dina nya projekt, eftersom de faller tillbaka till enkla textrutor. På din telefon kommer du att finna att tangentbordet ändras i enlighet därmed om du levererar dessa typer till dina ingångar.
Den nya specen introducerar den mycket praktiska nödvändig attribut. I stället för att använda fancy JavaScript för att ta hand om våra obligatoriska fält, kan vi nu enkelt använda det här attributet.
För webbläsare som inte stöder detta attribut kan vi återigen använda Webforms2. Så eftersom vi har inkluderat det från början finns det inget att oroa sig för.
Notera: Var noga med att tilldela en namn attribut till dina formulärelement, eller nödvändig Attributet kommer inte att träda i kraft.
De mönster attributet används för fältvalidering och accepterar endast värden om de matchar ett visst format, definierat med regelbundna uttryck. Om det inmatade värdet inte matchar mönstret, skickas formuläret inte.
Till exempel, för att validera ett telefonnummer, måste vi använda följande mönster, eller regelbundet uttryck:
De mönster Attributet kan implementeras i webbläsare som inte stöder det, genom att använda Webforms2.
De autofokus attributet precis vad det står: fokuserar automatiskt en av våra kontroller. Det stöds för närvarande i webbkitbaserade webbläsare (Safari, Chrome, etc.) och Opera. Kom ihåg att endast en formkontroll kan få detta attribut.
Webforms2 tar hand om genomförandet i icke-stödda webbläsare.
De platshållare Attribut är något vi har gjort med JavaScript i flera år. Den lägger till en bit information om fältet, som en kort beskrivning, som försvinner när fältet är inriktat.
Detta attribut stöds av de senaste webbläsarna i Beta Firefox och Webkit.
För att efterlikna beteendet i äldre webbläsare använder vi Plugin jQuery-plugin, av Viggens Design Lab.
var initPlaceholder = funktion () $ ('inmatning [platshållare]'). plats (); ; om (! Modernizr.input.placeholder) $ (dokument) .ready (initPlaceholder); ; De min Max och steg Inmatningsattributen anger begränsningar för vissa formulärkontroller, till exempel datumväljaren, numret och intervallet. Du kan säkert gissa syftet med min och max från deras namn. De steg attribut anger specificeringsintervallet för varje klick eller "steg". För isntance, om stegvärdet är 2, kan de accepterade värdena vara 0, 2, 4 osv.
Dessa attribut stöds bara av Opera och Webkit-webbläsare just nu och implementeras som fallback för andra webbläsare, av Webforms2.
Vi har lärt oss idag att det är en ganska lätt uppgift att skapa formulär och tillhandahålla fallback för de flesta av de nya tilläggen. Om människor fortfarande försöker skrämma dig från att använda HTML5 idag, var inte uppmärksam på dem. börja använda de fantastiska verktygen du har till ditt förfogande just nu!
Var noga med att kolla även Zoltan "Du Lac" Hawryluks stora html5Widgets, som ger liknande lösningar, med inbyggda JavaScript widgets.
