Pogled v oblike obrazcev za vnose v HTML5 Datum, barva in obseg

Obrazci so na voljo povsod na spletnih mestih. Facebook, Twitter, Google - samo da navedemo nekaj - zahtevajo, da se prijavimo ali registriramo na spletno mesto s pomočjo obrazca, pravzaprav pa uporabimo tudi obrazec za objavo in posodabljanje statusa v družabnih spletnih mestih. V kratkem, Obrazec je zelo pomemben del za interakcijo s spletnim mestom.

Spletni obrazec je zgrajen z vnosi, v preteklosti imamo samo nekaj možnosti za vnosne tipe; kot naprimer besedilo, geslo, radio, potrditveno polje in predložiti. Zdaj, HTML5 prihaja z veliko izboljšav in uvaja veliko novih vrst vnosa v spec.

Torej, v tem prispevku bomo kopali v nekaj novih zanimivih delcev Obrazci HTML5 da mislimo, da bi jih morali preizkusiti; Preglejmo jih.

Izbira datuma

Prva stvar, ki bi jo radi pogledali, je izbirnik datuma. Izbira datuma je običajna stvar, ki jo lahko najdete v obrazcu za registracijo, zlasti na nekaterih spletnih mestih ali aplikacijah, kot so rezervacije letov in hotelov.

Obstaja veliko knjižnic JavaScript za ustvarjanje izbirnika datuma. Zdaj lahko ustvarimo tudi veliko lažjega načina z vnosom HTML5 datum, kot sledi;

The izbirnik datuma v HTML5 v bistvu deluje zelo podobno kot knjižnice JavaScript; ko se osredotočimo na polje, se bo izpisal koledar, nato pa se bomo lahko pomikali po mesecih in letih, da bi izbrali datum.

Vendar pa vsak brskalnik, ki trenutno podpira datum vrsta vnosa, in sicer Chrome, Opera in Safari prikazujejo ta tip vnosa nekoliko drugače, kar lahko povzroči nedoslednost v uporabniški izkušnji, in tukaj je, kako izgleda;

Nekaj opaznih razlik, ki jih lahko vidite na prvi pogled iz zgornjega posnetka zaslona; Opera je uporabila angleško tri-črkovno okrajšavo za ime dneva - Sonce, Pon, Čet, in tako naprej, medtem ko je Chrome uporabljal moj lokalni jezik, Safari - po drugi strani - dela precej čudno, ne prikazuje koledarja nasploh.

Obstaja tudi nekaj novih vnos vrste natančneje izberite datum ali čas; mesec, tedna, čas, Datum čas in datetime-local, za katere smo prepričani, da je sama ključna beseda povsem desiptipna, da pove, kaj počne.

Vse je mogoče videti v akciji na spodnji povezavi, vendar se prepričajte, da si jo ogledate v Opera 11 in novejših, saj je ob pisanju edini brskalnik, ki podpira vse te vrste vnosov..

Datepicker Demo

Izbirnik barv

Izbirnik barv je pogosto potreben v določeni spletni aplikaciji, kot je ta generator gradientov CSS3, vendar se ves čas spletni razvijalci še vedno zanašajo na knjižnico JavaScript, kot je jsColor. Zdaj pa lahko ustvarimo barvni izbirnik izvornega brskalnika z HTML5 barve vrsta vnosa;

Še enkrat, brskalniki, v tem primeru Chrome in Opera, naredijo ta vnos nekoliko drugačen;

Opera najprej prikaže osnovno barvno možnost ob kliku in šestnajstiško obliko trenutne izbrane barve v spustnem meniju, medtem ko bo Chrome neposredno kliknil barvno paleto v novem oknu..

Poleg tega lahko s privzeto nastavimo tudi barvo vrednost atribut, kot sledi;

Na ta način, ko se prikaže v nepodprtih brskalnikih, bo vnos se bo v besedilnem polju poslabšalo in privzeta vrednost bo vidna, kar uporabnikom lahko naredi kakšen namig, kaj je treba vnesti v polje.

Prikaži barvno vrednost

Namesto odpiranja Photoshopa samo za kopiranje hex barvno obliko, lahko dejansko ustvarite preprosto orodje za to vrsto vnosa, da opravite delo, saj je ustvarjena barva že v šestnajstiški obliki, kar bi bilo zelo enostavno;

Najprej dodamo id barvnik na vnos in dodamo tudi prazno div z ID hexcolor poleg nje, da vsebuje vrednost.

Potrebujemo jQuery povezan v glavo našega dokumenta. Nato shranimo barvno vrednost in novo dodano vrednost div v spremenljivki, kot je to;

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

Pridobite začetno vrednost iz #colorpicker;

 hexcolor.html (barva);

… In nazadnje spremeni vrednost, ko se spremeni tudi izbrana barva;

 $ ('# colorpicker'). on ('change', funkcija () hexcolor.html (this.value););

To je to; zdaj si jo oglejte v akciji.

Colorpicker Demo

Območje

The območju tip vnosa nam omogoča, da v brskalniku dodamo drsnik za izbiro številke v obsegu, ki ga lahko najdemo tudi v uporabniškem vmesniku jQuery..

Zgornji odrezek je osnovna izvedba območju vrsto vnosa. Usmerjenost drsnika lahko spreminjamo tudi na navpično z uporabo CSS, kot sledi;

 vhod [tip = obseg] širina: 20px; višina: 200px; -webkit-videz: drsnik-navpično;

Poleg tega lahko nastavimo min in maks številke, na primer;

V spodnjem odseku nastavimo min na nič in 225 za največ. Ko niso izrecno določeni, bo brskalnik privzeto privzel 0 za minimum do 100 za največ.

Prikažite številko

Obstaja pa ena omejitev, vendar je število nevidno, ne moremo videti generirane številke / vrednosti iz drsnika v brskalniku. Za prikaz števila moramo dodati malo JavaScripta ali jQuery, in tukaj je, kako to naredimo;

Najprej dodamo prazno div poleg vnosa slog div dovolj, tako da izgleda kot škatla.

Nato vnesite naslednjo kodo, ki bo naredila enako kot zgornjo kodo v orodju za barvanje, razen zdaj dobimo vrednost iz drsnika.

 $ (function () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider'). ) output.html (this.value);););

Sedaj lahko vidite demo. Samo opomnik, si oglejte demo v teh brskalnikih - Chrome, Opera in Safari, ker Firefox in IE ne podpirata območju trenutno vrsto vnosa.

Demo območja

Končne besede

Jasno je, da HTML5 veliko bolj olajša naše življenje z uvedbo številnih novih vrst vnosov. Kot vse druge funkcije HTML5 pa je podpora zelo omejena, zlasti v starejših brskalnikih, zato moramo te nove funkcije uporabljati previdno, zlasti nove vrste vnosov, o katerih smo razpravljali v tem prispevku; Datum, barva in obseg.

Toda na koncu upamo, da imate zdaj več vpogleda Obrazci HTML5. Hvala, ker ste prebrali to objavo, in upamo, da vam je bilo všeč.

Demo
Prenesi vir

Nadaljnje branje

Spodaj je nekaj koristnih povezav, ki jih lahko najdete v obliki obrazcev HTML.

Nove funkcije obrazca v HTML5 - Opera Dev.
Trenutno stanje obrazcev HTML5 - Wufoo
Atributi obrazca HTML5 - w3school.org
Kdaj lahko uporabim obrazce HTML5? - CanIUse.com