Et kig på HTML5 formularer Indtastetyper Dato, farve og rækkevidde

Blanketter findes overalt på hjemmesider. Facebook, Twitter, Google - for blot at nævne nogle få - kræver, at vi logger ind på eller registrerer til webstedet via en formular. Faktisk bruger vi også en formular til tweet og opdatering af status på sociale websteder. Kort sagt, formularen er en meget vigtig del for at kunne interagere på en hjemmeside.

En webformular er bygget med input, tidligere har vi kun få muligheder for inputtyperne; såsom tekst, adgangskode, radio, afkrydsningsfeltet og Indsend. Nu kommer HTML5 med store forbedringer og introducerer mange nye inputtyper i spec.

Så i dette indlæg vil vi grave i nogle af de nye interessante stykker fra HTML5-formularer at vi mener, at du skal prøve dem lad os tjekke dem ud.

Date Picker

Det første vi gerne vil kigge på er datovælgeren. Valg af dato er en almindelig ting, du kan finde i registreringsformularen, især på nogle websteder eller applikationer som fly og hotelbooking.

Der er mange JavaScript-biblioteker til at oprette date picker. Nu kan vi også oprette en på langt nemmere måde med HTML5-input dato, som følger;

Det date picker i HTML5 fungerer stort set meget ligesom JavaScript-bibliotekerne gjorde; Når vi fokuserer på feltet, kommer en kalender frem, og så kan vi navigere gennem måneder og år for at vælge datoen.

Men alle browsere, der i øjeblikket understøtter dato input type, nemlig Chrome, Opera og Safari, viser denne indtastningstype en smule anderledes, hvilket potentielt kan føre til inkonsekvensproblem i brugeroplevelsen, og her er hvordan det ser ud;

Nogle bemærkelsesværdige forskelle, du kan se på et overblik fra ovenstående screenshot Operaen brugte den engelske trebogstavsforkortelse til dagens navn - Sol, Maan, Tue og så videre, mens Chrome brugte mit lokale sprog, Safari - derimod - virker ret mærkeligt, det viser ikke en kalender overhovedet.

Der er også nogle nye input typer til Vælg dato eller klokkeslæt mere specifikt; måned, uge, tid, dato tid og datetime-local, som vi er sikre på, at søgeordet selv er ret desktiptive for at fortælle hvad det gør.

Du kan se alle dem i aktion fra linket herunder, men sørg for at se det i Opera 11 og nyere, da det er den eneste browser, der understøtter alle disse typer input, ved skrivningen..

Datepicker Demo

Farvevælger

Farvevælger er ofte nødvendig i visse web-baserede applikationer, såsom denne CSS3-gradientgenerator, men hele tiden udvikler webudviklere også et JavaScript-bibliotek, såsom jsColor, til at udføre jobbet. Men nu kan vi oprette en native-browser farvevælger med HTML5 farve input type;

Igen gør browserne, i dette tilfælde Chrome og Opera, denne indgangstype lidt anderledes;

Operaen viser for det første den grundlæggende farveindstilling på kliket såvel som hex-formatet for den aktuelle plukket farve i en dropdown, mens Chrome automatisk poper op i farvepaletten i et nyt vindue, når den klikkes.

Desuden kan vi også indstille standardfarven med værdi attribut som følger

På den måde, når den ses i de ikke understøttede browsere, er den input vil nedbrydes i et tekstfelt, og standardværdien vil være synlig, der kan give et slags tip til brugerne, hvad der skal indtastes i feltet.

Vis Farveværdien

I stedet for at åbne Photoshop bare for at kopiere hex farveformat, kan du faktisk lave et simpelt værktøj på denne indtastningstype for at gøre jobbet, da den genererede farve allerede er i hexadecimal ville det være meget nemt;

Først tilføjer vi id colorpicker til input og vi tilføjer også en tom div med id hexcolor ud for at indeholde værdien.

Vi har brug for jQuery knyttet i hoved af vores dokument. Derefter gemmer vi farveværdien og den nyligt tilføjede div i en variabel som sådan;

 var farve = $ ('# colorpicker') .val (); hexcolor = $ ('# hexcolor');

Få den oprindelige værdi fra #colorpicker;

 hexcolor.html (farve);

... og til sidst ændre værdien, når den valgte farve også ændres

 $ ('# colorpicker'). på ('ændre', funktion () hexcolor.html (this.value););

Det er det; Lad os nu se det i aktion.

Colorpicker Demo

Rækkevidde

Det rækkevidde input type giver os mulighed for at tilføje en skyder i browseren for at vælge nummer i en rækkevidde, som vi også kan finde i jQuery UI.

Udsnittet ovenfor er grundlæggende implementeringen af rækkevidde input type. Vi kan også ændre skyderen orientering til lodret ved hjælp af CSS, som følger;

 input [type = interval] bredde: 20px; højde: 200px; -webkit-udseende: skyder-vertikalt

Derudover kan vi indstille min og max rækkevidde af tallene, for eksempel;

I udsnittet nedenfor indstiller vi min til nul og 225 for maksimum. Når de ikke er udtrykkeligt specificeret, vil browseren som standard tage 0 for minimum til 100 for maksimum.

Vis nummeret

Der er dog en begrænsning, men tallet er usynligt, vi kan ikke se det genererede tal / værdi fra skyderen i browseren. For at vise nummeret skal vi tilføje en smule JavaScript eller jQuery, og her er hvordan vi gør det;

Først tilføjer vi en tom div ved siden af input, stil den div tilstrækkeligt så det ligner en boks.

Derefter anbringes følgende kode, som vil gøre det samme som ovenstående kode i stærkvælger, undtagen vi får nu værdien fra skyderen.

 $ (funktion () var val = $ ('# skyder') .val (); output = $ ('# output'); output.html (val); $ ('# skyder'). ) output.html (this.value);););

Nu kan du se demoen. Bare en påmindelse, se demoen i disse browsere - Chrome, Opera og Safari, da Firefox og IE ikke understøtter rækkevidde input type for øjeblikket.

Område Demo

Endelige Ord

Det er klart, at HTML5 gør vores liv meget lettere ved at introducere mange nye inputtyper. Men som andre HTML5-funktioner er støtten meget begrænset, især i ældre browsere, så vi skal bruge disse nye funktioner med forsigtighed, især de nye inputtyper, som vi har diskuteret i dette indlæg. Dato, farve og rækkevidde.

Men i sidste ende håber vi, at du nu har mere indsigt i HTML5-formularer. Tak fordi du læser dette indlæg, og vi håber du har haft det.

Demo
Download kilde

Yderligere læsning

Nedenfor er et par nyttige links til dig til at grave videre i HTML Forms.

Nye formularfunktioner i HTML5 - Opera Dev.
Den aktuelle tilstand af HTML5 Forms - Wufoo
HTML5-formattributter - w3school.org
Hvornår kan jeg bruge HTML5-formularer? - CanIUse.com