En titt på HTML5 skjemaer Inputtyper Dato, farge og rekkevidde
Skjemaer finnes overalt på nettsteder. Facebook, Twitter, Google - bare for å nevne noen - krever at vi logger på eller registrerer deg på nettstedet via et skjema, faktisk bruker vi også et skjema for å tweet og oppdatere status på sosiale nettsteder. Kort oppsummert, skjemaet er en svært viktig del for å kunne kommunisere til et nettsted.
Et webskjema er bygd med innganger, i det siste har vi bare noen få muligheter for inngangstyper; som for eksempel tekst, passord, radio, avkrysnings og sende inn. Nå kommer HTML5 med flotte forbedringer og introduserer mange nye innspillstyper i spesifikasjonen.
Så i dette innlegget vil vi grave inn i noen av de nye, interessante brikkene fra HTML5 skjemaer at vi tror du burde prøve dem på; la oss sjekke dem ut.
Datovelger
Det første vi ønsker å ta en titt på er datovelgeren. Valg av dato er en vanlig ting du kan finne i registreringsskjema, spesielt på enkelte nettsteder eller applikasjoner som fly og hotellbestilling.
Det er mange JavaScript-biblioteker for å lage date picker. Nå kan vi også lage en på mye enklere måte med HTML5-inngang Dato, som følger;
De Datovelger i HTML5 fungerer i utgangspunktet veldig likt hvordan JavaScript-bibliotekene gjorde det; Når vi fokuserer på feltet, vil en kalender komme frem, og vi kan navigere gjennom månedene og årene for å velge dato.
Men hver nettleser som for øyeblikket støtter Dato Inndatatype, nemlig Chrome, Opera og Safari, viser denne inntastingen litt annerledes, noe som potensielt kan føre til inkonsekvensproblemer i brukeropplevelsen, og her er hvordan det ser ut.
Noen bemerkelsesverdige forskjeller du kan se på et øyeblikk fra ovenstående skjermbilde; Operaen brukte den engelske trebrikkens forkortelse for dagens navn - Sol, Mør, Tue og så videre, mens Chrome brukte mitt lokale språk, Safari - derimot - virker ganske rart, det viser ikke en kalender i det hele tatt.
Det er også noe nytt inngang typer til velg dato eller klokkeslett mer spesifikt; måned, uke, tid, dato tid og datetime-local, som vi er sikre på at søkeordet selv er ganske desktiptive for å fortelle hva det gjør.
Du kan se alle dem i aksjon fra linken under, men sørg for at du ser den i Opera 11 og over, siden, ved skriving, er det den eneste nettleseren som støtter alle disse inngangstyper.
- Datepicker Demo
Fargevelger
Fargevelger er ofte nødvendig i visse nettbaserte applikasjoner, for eksempel denne CSS3-gradientgeneratoren, men hele tiden utvikler webutviklere også et JavaScript-bibliotek, for eksempel jsColor, for å gjøre jobben. Men nå kan vi lage en opprinnelig nettleserfargeplukker med HTML5 farge inngangstype;
Igjen, gjør nettleserne, i dette tilfellet Chrome og Opera, denne innspillingen litt annerledes;
Operaen viser for det første det grunnleggende fargevalget på klikket, så vel som hex-formatet for den nåværende plukket fargen i en rullegardinmeny, mens Chrome automatisk vil dukke opp fargepaletten i et nytt vindu når du klikker.
Videre kan vi også angi standardfarge med verdi attributt, som følger;
På den måten, når den vises i de støttede nettleserne, inngang vil nedbrytes i et tekstfelt og standardverdien vil være synlig som kan gi et slags hint for brukere hva som skal skrives inn i feltet.
Vis fargeverdien
Snarere enn å åpne Photoshop bare for å kopiere hex fargeformat, kan du faktisk lage et enkelt verktøy på denne inntypetypen for å gjøre jobben, siden den genererte fargen allerede er i heksadesimal, vil dette være veldig enkelt;
Først legger vi til id fargevelger til inngangen, og vi legger også til en tom div med id hexcolor ved siden av det å inneholde verdien.
Vi trenger jQuery knyttet i hode av dokumentet vårt. Deretter lagrer vi fargeværdien og den nylig lagt til div i en variabel, slik som
var farge = $ ('# colorpicker') .val (); hexcolor = $ ('# hexcolor'); Få startverdien fra #fargevelger;
hexcolor.html (farge);
... og til slutt endre verdien når den valgte fargen endres også;
$ ('# colorpicker') på ('endre', funksjon () hexcolor.html (this.value);); Det er det; La oss nå se det i aksjon.
- Colorpicker Demo
Område
De område inngangstype lar oss legge til en glidebryter i nettleseren for å velge nummer i et område som vi også kan finne i jQuery UI.
Utsnittet ovenfor er grunnleggende implementeringen av område inngangstype. Vi kan også endre skyveretningen til vertikal ved hjelp av CSS, som følger;
input [type = rekkevidde] bredde: 20px; høyde: 200px; -webkit-utseende: glidebryter-vertikal;
I tillegg kan vi sette min og max rekkevidde av tallene, for eksempel;
I utsnittet nedenfor setter vi inn min til null og 225 for maksimum. Når de ikke er spesifikt angitt, vil nettleseren som standard ta 0 for minimum til 100 for maksimum.
Vis nummeret
Det er en begrensning skjønt, tallet er usynlig, vi kan ikke se det genererte nummeret / verdien fra skyvekontrollen i nettleseren. For å vise nummeret må vi legge til litt av JavaScript eller jQuery, og her er hvordan vi gjør det;
Først legger vi til en tom div ved siden av inngangen, stil på div tilstrekkelig slik at det ser ut som en boks.
Legg deretter følgende kode som vil gjøre det samme som koden ovenfor i sterkfarget plukker, bortsett fra vi får nå verdien fra skyveknappen.
$ (funksjon () var val = $ ('# skyve') .val (); output = $ ('# output'); output.html (val); $ ('# skyvekontroll') ) output.html (this.value););); Nå kan du se demoen. Bare en påminnelse, se demoen i disse nettleserne - Chrome, Opera og Safari, da Firefox og IE ikke støtter område inngangstype for øyeblikket.
- Range Demo
Endelige ord
Det er klart at HTML5 gjør livet enklere ved å introdusere mange nye innspillstyper. Men som andre HTML5-funksjoner, er støtten svært begrenset, spesielt i eldre nettlesere, så vi bør bruke disse nye funksjonene med forsiktighet, spesielt de nye inntastningstyper som vi har diskutert i dette innlegget. Dato, farge og rekkevidde.
Men i det siste håper vi at du nå har mer innsikt i HTML5 skjemaer. Takk for at du leser dette innlegget, og vi håper du likte det.
- Demo
- Last ned kilde
Videre lesning
Nedenfor er noen nyttige lenker for deg å grave videre inn i HTML Forms.
- Nye skjemafunksjoner i HTML5 - Opera Dev.
- Den nåværende tilstanden for HTML5 Forms - Wufoo
- HTML5-formattributter - w3school.org
- Når kan jeg bruke HTML5-skjemaer? - CanIUse.com
