Share
I denne opplæringen skal vi se på hvordan du serverer HTML5-skjemaer til moderne nettlesere, mens du kompenserer for eldre nettlesere ved å bruke en blanding av Webforms2, Modernizr, jQuery UI og diverse jQuery-plugins.
HTML5-drevne skjemaer gir mye semantisk markering, og fjerner behovet for mye JavaScript.
En av de første anstrengelsene mot HTML5 var WHATWGs Web Forms 2.0, opprinnelig kalt XForms Basic. Spesifikasjonen innførte ny formkontroll og validering blant annet. Senere ble den innlemmet i HTML5, og ble deretter fjernet av repetisjonsmodellen, noe som resulterte i det vi kjenner i dag som HTML5 Forms.
Det evigvarende problemet, bakoverkompatibilitet, forblir fortsatt hodepine, dessverre. Utviklere har å håndtere den fryktede Internet Explorer, som, som du kanskje har gjettet, ikke gir mye støtte for den nyeste utviklingen i skjemaer - selv i den nyeste tilgjengelige betaen til IE9. Eldre versjoner av IE? Fagetaboutit.
Ikke desto mindre vil vi bruke disse nye funksjonene, og bruke dem, vi vil! I dag skal vi se på noen av disse nye elementene. Vi kontrollerer om nettleseren støtter disse funksjonene, og hvis ikke, gi tilbakebetalinger ved hjelp av CSS og JavaScript.
Vi gir bare tilbakebetalinger bare til nettlesere som ikke støtter HTML5-skjemaer, eller bestemte deler av dem. Men i stedet for å stole på nettleserens sniffing, er den riktige teknikken å bruke funksjonsdeteksjon. Vi bruker det populære Modernizr-biblioteket.
Modernizr er et lite JavaScript-bibliotek som tester den nåværende nettleseren mot en mengde HTML5- og CSS3-funksjoner.
Hvis du vil lære mer om Modernizr, kan du sjekke ut "A Video Crash Course i Modernizr" Premium Tutorial tilgjengelig på Tuts + Marketplace.
Webforms2 er et JavaScript-bibliotek av Weston Ruter, som gir en kryssbrowser-implementering av den "forrige" versjonen av HTML5-skjemaer, "WHATWG Web Forms 2.0" -spesifikasjonen.
Vi skal bruke den til validering og utvide funksjonalitet for nåværende elementer.
Spesifikasjonen beskriver rekkefølgen input som en presis kontroll for å sette elementets verdi til en streng som representerer et tall.
Her er en forhåndsvisning av hvordan det ser ut i Opera 10.63:
For å gi tilbakebetaling for andre nettlesere, bruker vi jQuery UIs skyve widget.
Først, Vi lager vår initialiseringsfunksjon, som skaper glidebryteren fra inngangsområdet.
Accentsconagua
var initSlider = funksjon () $ ('input [type = range]') hver (funksjon () var $ input = $ (dette); var $ skyvekontroll = $ (''); var trinn = $ input.attr ('trinn'); $ Input.after ($ stolpe) .hide (); $ slider.slider (min: $ input.attr ('min'), maks: $ input.attr ('max'), trinn: $ input.attr ('trinn'), endring: funksjon (e, ui) $ (dette) .val (ui.value);); ); ; Vi lager en ny <div> element for hvert av våre utvalgsinnganger, og ring glidebryteren på den noden. Dette skyldes at jQuery UI-skyvekontrollen ikke fungerer ved å ringe den direkte på inngangselementet.
Vær oppmerksom på at vi får attributter fra inngangen, for eksempel
min, maksogskritt,, og bruker dem som parametere for skyveknappen. Dette hjelper vår fallback-skyveknappen å etterligne den virkelige HTML5-skyveknappen i funksjonalitet.
neste, Vi bruker Modernizr for å avgjøre om den nåværende nettleseren støtter denne inntypen. Modernizr legger til klasser i dokumentelementet (html), slik at du kan målrette mot bestemt nettleserfunksjonalitet i stilarket. Det oppretter også et selvbetegnet globalt JavaScript-objekt som inneholder egenskaper for hver funksjon: Hvis en nettleser støtter det, vil eiendommen evaluere til ekte og hvis ikke, vil det bli falsk.
Med den kunnskapen, for å oppdage støtte for inngangstyper, bruker vi Modernizr.inputtypes [type].
hvis (! Modernizr.inputtypes.range) $ (dokument) .ready (initSlider); ;
Hvis det ikke er noen støtte for rekkeviddeinngangen, legger vi til initSlider fungere til jQuery's document.ready, for å initialisere vår funksjon etter at siden har lastet inn.
Slik ser skyvekontrollen ut i en nettleser uten opprinnelig støtte for rekkeviddeinngangen.
Å sitere Mark Pilgrim:
Å be om et nummer er vanskeligere enn å be om en e-postadresse eller en nettadresse.
Derfor er vi utstyrt med en egen skjemakontroll som spesifikt omhandler tall: den numeriske spinneren, også kalt numerisk stepper.
På tidspunktet for denne skrivingen støttes den av Opera og Webkit-baserte nettlesere; her er et øyeblikksbilde fra Opera 10.6.
Fordi jQuery ikke gir en numerisk spinner, bruker vi i stedet et jQuery-plugin av Brant Burnett, bygget som en jQuery UI-widget.
Vi implementerer samme teknikk som før; bygge opp funksjonen for å lage spinner, test med Modernizr, og legg funksjonen til $ (Document) .ready.
var init = $ (dette); $ input.spinner (min: $ input.attr ('min' ), maks: $ input.attr ('max'), trinn: $ input.attr ('step'));); ; hvis (! Modernizr.inputtypes.number) $ (dokument) .ready (initSpinner); ; Fordi tallinnganger støtter også min, maks og skritt, vi får attributter fra feltet, og bruker dem som parametere for initialisering av numerisk spinner plugin.
Og vår fallback-widget ser slik ut:
Det er ikke mindre enn seks inngangstyper for å fungere som date pickers.
På tidspunktet for denne skrivingen er den eneste nettleseren som ordentlig støtter dem, Opera, versjon 9+.
For nå gir vi bare tilbakebetaling for Dato input, ved hjelp av jQuery UI Datepicker. Du er velkommen til å bruke noe annet plugin for å fullstendig etterlikne funksjonaliteten til HTML5-datoinnsamlingsposten i implementeringen.
var initDatepicker = funksjon () $ ('input [type = date]') hver (funksjon () var $ input = $ (dette); $ input.datepicker (minDate: $ input.attr ), maxDate: $ input.attr ('max'), dateFormat: 'yy-mm-dd';;); ; hvis (! Modernizr.inputtypes.date) $ (dokument) .ready (initDatepicker); ; 
For øyeblikket gir ingen nettleser støtte for fargen inngang. Så, til de kommer opp, må de alle bruke vår fallback-teknikk.
Vi bruker Stefan Petre's ColorPicker jQuery-plugin, siden jQuery UI ikke gir en med basepakken ennå.
var initColorpicker = funksjon () $ ('input [type = color]'). hver (funksjon () var $ input = $ (dette); $ input.ColorPicker (onSubmit: funksjon (hsb, hex, rgb, el) $ (el) .val (hex); $ (el). ColorPickerHide ();;;); ; hvis (! Modernizr.inputtypes.color) $ (dokument) .ready (initColorpicker); ; Og vårt resultat:
Den nye Søke input type er implicit brukt til semantikk, men kan gi mange interessante funksjoner i fremtiden.
For øyeblikket tilbyr bare webkitbaserte nettlesere støtte for denne funksjonen. Spesifikasjonen støtter også a resultater Tilordne å vise et antall søkte ord i en rullegardin.
Det skal se slik ut på Safari på OS X:
Resten av nettleserne viser dette som et standard tekstfelt, så du kan trygt bruke den med standardoppretting.
Disse to inngangstyper, url og e-post, brukes til valideringsformål. De kan være spesielt nyttige i mobile nettlesere, der tastaturoppsettet på skjermen kan endres for å passe det fokuserte feltet. Dette er allerede implementert i Safari på iOS (iPhone, iPad, iPod) og noen versjoner av Android.
Disse innspillstyper kan implementeres av Webforms2 i andre nettlesere.
Du kan fritt bruke disse typene i dine nye prosjekter, da de faller tilbake til enkle tekstbokser. På telefonen din finner du at tastaturet endres tilsvarende, hvis du leverer disse typene til dine innganger.
Den nye spesifikasjonen introduserer det veldig hendig nødvendig Egenskap. I stedet for å bruke fancy JavaScript for å ta vare på våre obligatoriske felt, kan vi nå enkelt bruke dette attributtet.
For nettlesere som ikke støtter dette attributtet, kan vi igjen bruke Webforms2. Så, siden vi har tatt med det fra starten, er det ingenting å bekymre deg for.
Merk: Pass på å tilordne en Navn Tilskrive til skjemaelementene dine, eller nødvendig Attributtet trer ikke i kraft.
De mønster Attributt brukes til felt validering og aksepterer bare verdier hvis de samsvarer med et bestemt format, definert med vanlige uttrykk. Hvis den oppgitte verdien ikke samsvarer med mønsteret, vil skjemaet ikke sende inn.
For eksempel, for å validere et telefonnummer, må vi bruke følgende mønster, eller vanlig uttrykk:
De mønster Attributtet kan implementeres i nettlesere som ikke støtter det, ved hjelp av Webforms2.
De autofokus Attributt gjør akkurat hva det står: Fokuserer automatisk en av våre kontroller. Den støttes for tiden i webkitbaserte nettlesere (Safari, Chrome, etc.) og Opera. Husk: Bare en skjemakontroll kan motta dette attributtet.
Webforms2 tar seg av implementeringen i ikke-støttede nettlesere.
De plassholder Attributt er noe vi har gjort med JavaScript i mange år. Det legger til en del informasjon om feltet, som en kort beskrivelse, som forsvinner når feltet er fokusert.
Dette attributtet støttes av de nyeste nettleserne fra Beta Firefox og Webkit.
For å etterligne oppførselen i eldre nettlesere bruker vi Placehold jQuery-plugin, av Vigis Design Lab.
var initPlaceholder = funksjon () $ ('input [plassholder]'). plassering (); ; hvis (! Modernizr.input.placeholder) $ (dokument) .ready (initPlaceholder); ; De min, maks og skritt Inndataattributter angir begrensninger for bestemte skjemafelt, for eksempel datoperktøren, nummeret og rekkevidden. Du kan sikkert gjette formålet med min og max fra navnene sine. De skritt Attributt angir flerintervallet for hvert klikk eller "trinn". For å oppnå, hvis trinnverdien er 2, kan de aksepterte verdiene være 0, 2, 4 og så videre.
Disse attributter støttes bare av Opera og Webkit nettlesere akkurat nå, og implementeres som tilbakebetaling for andre nettlesere, av Webforms2.
Vi har lært i dag at skape former og gi tilbakebetaling for de fleste av de nye tilleggene er en ganske enkel oppgave. Hvis folk fortsatt prøver å skremme deg fra å bruke HTML5 i dag, må du ikke være oppmerksom på dem; begynn å bruke de fantastiske verktøyene du har til disposisjon akkurat nå!
Pass på at du også sjekker ut Zoltan "Du Lac" Hawryluks flotte html5Widgets, som gir lignende løsninger, med innfødte JavaScript-widgets.
