En titt på HTML5 Forms Input Typer Datum, Färg och Räckvidd
Blanketter finns överallt på webbplatser. Facebook, Twitter, Google - för att bara nämna några - kräver att vi loggar in eller registrerar till webbplatsen via ett formulär. Vi använder faktiskt även ett formulär för tweet och uppdatering av status på sociala webbplatser. Kortfattat, formuläret är en mycket viktig del för att kunna interagera med en webbplats.
En webbformulär är byggd med ingångar, tidigare har vi bara ett fåtal alternativ för ingångstyperna; som text, Lösenord, radio, checkbox och lämna. Nu kommer HTML5 med stora förbättringar och introducerar många nya ingångstyper i specifikationen.
Så, i detta inlägg gräver vi i några av de nya intressanta bitarna från HTML5 formulär att vi tycker att du borde försöka dem låt oss kolla in dem.
Datumväljare
Det första vi vill titta på är datumväljaren. Val av datum är en vanlig sak som du kan hitta i registreringsblankett, särskilt på vissa webbplatser eller applikationer som flyg och hotellbokning.
Det finns många JavaScript-bibliotek för att skapa datumväljare. Nu kan vi också skapa ett på mycket enklare sätt med HTML5-inmatning datum, som följer;
De Datumväljare i HTML5 fungerar i grunden mycket likartat hur JavaScript-biblioteken gjorde det; När vi fokuserar på fältet kommer en kalender att dyka upp och då kan vi navigera genom månader och år för att välja datum.
Men alla webbläsare som för närvarande stöder datum Inmatningstypen, nämligen Chrome, Opera och Safari, visar denna ingångstyp lite annorlunda vilket kan leda till inkonsekvensfrågor i användarupplevelsen, och här ser det ut hur det ser ut.
Några anmärkningsvärda skillnader du kan se på en överblick från ovanstående skärmdump; Operaen använde den engelska tre bokstäverförkortningen för dagens namn - Sun, Mån, Thu och så vidare, medan Chrome använde mitt lokala språk, Safari - å andra sidan - fungerar ganska udda, det visar inte en kalender alls.
Det finns också några nya inmatning typer till välj datum eller tid mer specifikt; månad, vecka, tid, datum Tid och datetime-lokal, som vi är säkra på att själva sökordet är ganska desktiptivt för att berätta vad det gör.
Du kan se alla dem i åtgärd från länken nedan, men se till att du ser den i Opera 11 och senare, eftersom det är den enda webbläsaren som stöder alla dessa typer av inmatning.
- Datepicker Demo
Färgväljare
Färgväljare behövs ofta i vissa webbaserade applikationer, till exempel denna CSS3-gradientgenerator, men hela tiden utvecklar webutvecklare fortfarande ett JavaScript-bibliotek, till exempel jsColor, för att göra jobbet. Men nu kan vi skapa en färgväljare med inbyggd webbläsare med HTML5 Färg ingångstyp;
Återigen gör webbläsarna, i detta fall Chrome och Opera, den här inmatningstypen något annorlunda.
Operaen visar först det grundläggande färgalternativet på klicket såväl som hexformatet för den aktuella valda färgen i en rullgardinsmeny, medan Chrome direkt dyker upp färgpalett i ett nytt fönster när det klickas.
Dessutom kan vi också ställa in standardfärgen med värde attribut, enligt följande;
På så sätt, när den ses i de icke-stödda webbläsarna, inmatning kommer att bryta ned i ett textfält och standardvärdet kommer att vara synligt som kan ge ett slags tips till användarna vad som ska anges i fältet.
Visa färgvärdet
Snarare än att öppna Photoshop bara för att kopiera hex färgformat kan du faktiskt skapa ett enkelt verktyg för denna ingångstyp för att göra jobbet, eftersom den genererade färgen redan är i hexadecimal så skulle det vara väldigt enkelt;
Först lägger vi till id färgväljare till inmatningen och vi lägger också till en tom div med id hexcolor bredvid det för att innehålla värdet.
Vi behöver jQuery länkad i huvud av vårt dokument. Därefter lagrar vi färgvärdet och den nyligen tillagda div i en variabel, som så;
var färg = $ ('# colorpicker') .val (); hexcolor = $ ('# hexcolor'); Hämta startvärdet från #färgväljare;
hexcolor.html (färg);
... och slutligen ändra värdet när den valda färgen ändras också;
$ ('# colorpicker'). På ('ändra', funktion () hexcolor.html (this.value);); Det är allt; låt oss nu se det i aktion.
- Colorpicker Demo
Räckvidd
De räckvidd Inmatningstypen tillåter oss att lägga till en reglage i webbläsaren för att välja nummer i ett intervall som vi också kan hitta i jQuery UI.
Biten ovan är grundläggande implementeringen av räckvidd inmatningstyp. Vi kan också ändra skjutreglaget orientering till vertikal med hjälp av CSS, enligt följande;
inmatning [typ = intervall] bredd: 20px; höjd: 200px; -webkit-utseende: reglaget vertikalt
Dessutom kan vi ställa in min och max Nummerintervallet, till exempel;
I utdraget nedan ställer vi in min till noll och 225 för maximalt. När de inte explicit anges, kommer webbläsaren som standard att ta 0 för minst till 100 för maximalt.
Visa numret
Det finns en begränsning men numret är osynligt, vi kan inte se det genererade talet / värdet från reglaget i webbläsaren. För att visa numret behöver vi lägga till lite JavaScript eller jQuery, och här är hur vi gör det;
Först lägger vi till en tom div bredvid ingången, utforma div tillräckligt så det ser ut som en låda.
Lägg sedan följande kod som kommer att göra samma sak som ovanstående kod i starkfärgsväljaren, förutom vi får nu värdet från reglaget.
$ (funktion () var val = $ ('# slider') .val (); output = $ ('# output'); output.html (val); $ ('# slider'). ) output.html (this.value););); Nu kan du se demoen. Bara en påminnelse, se demoen i dessa webbläsare - Chrome, Opera och Safari, eftersom Firefox och IE inte stöder räckvidd ingångstyp för tillfället.
- Range Demo
Slutord
Det är uppenbart att HTML5 gör våra liv mycket enklare genom att introducera många nya insatsformer. Men som andra HTML5-funktioner är stödet väldigt begränsat, särskilt i äldre webbläsare, så vi bör använda de nya funktionerna med försiktighet, särskilt de nya inmatningstyperna som vi har diskuterat i det här inlägget. Datum, Färg och Räckvidd.
Men i slutändan hoppas vi att du nu har mer insikt om HTML5 formulär. Tack för att du läste det här inlägget, och vi hoppas att du haft det.
- demo
- Hämta källa
Vidare läsning
Nedan följer några användbara länkar för dig att gräva vidare i HTML Forms.
- Nya formulärfunktioner i HTML5 - Opera Dev.
- Den nuvarande staten HTML5 Forms - Wufoo
- HTML5-formattribut - w3school.org
- När kan jag använda HTML5-formulär? - CanIUse.com
