Pogled u HTML5 obrasce vrsta unosa Datum, boja i raspon

Obrasci se nalaze posvuda na web-lokacijama. Facebook, Twitter, Google - samo da spomenemo nekoliko - od nas se zahtijeva da se prijavimo ili registriramo na web-mjesto putem obrasca, u stvari, također koristimo obrazac za slanje i ažuriranje statusa na društvenim web-lokacijama. Ukratko, Obrazac je vrlo važan dio za interakciju s web-lokacijom.

Web obrazac je izgrađen s ulazima, u prošlosti, imamo samo nekoliko opcija za vrste unosa; kao što su tekst, zaporka, radio, okvir i podnijeti. Sada, HTML5 dolazi s velikim poboljšanjima i uvodi mnoge nove vrste unosa u specifikaciji.

Dakle, u ovom postu ćemo kopati u neke od novih zanimljivih komada iz Obrasci HTML5 za koje mislimo da biste ih trebali isprobati; provjerimo ih.

Odabir datuma

Prva stvar koju bismo željeli pogledati je birač datuma. Odabir datuma uobičajena je stvar koju možete pronaći u obrascu za registraciju, osobito na nekim web-lokacijama ili aplikacijama kao što su rezervacije letova i hotela.

Postoje mnogi JavaScript biblioteke za izradu birača datuma. Sada ga također možemo stvoriti na mnogo lakši način s HTML5 unosom datum, kako slijedi;

odabir datuma u HTML5 u osnovi radi vrlo slično onome kako su JavaScript biblioteke učinile; kada se usredotočimo na polje, pop će se kalendar, a onda ćemo se kretati kroz mjesece i godine za odabir datuma.

Međutim, svaki preglednik koji trenutno podržava datum vrstu unosa, naime Chrome, Opera i Safari prikazuju taj tip unosa malo drugačije što potencijalno može dovesti do nedosljednosti u korisničkom iskustvu, a evo kako to izgleda;

Neke značajne razlike koje možete vidjeti na prvi pogled s gornje slike zaslona; Opera je koristila englesku skraćenicu od tri slova za ime dana - Sun, Mon, Čet, i tako dalje, dok je Chrome koristio moj lokalni jezik, Safari - s druge strane - djeluje prilično čudno, ne prikazuje kalendar uopće.

Tu su i neke nove ulazni vrste do preciznije odaberite datum ili vrijeme; mjesec, tjedan, vrijeme, Datum vrijeme i datetime-lokalne, za koje smo sigurni da je sama ključna riječ prilično očajna da bi znala što radi.

Sve ih možete pogledati u akciji na donjoj vezi, ali provjerite jeste li je pogledali u Opera 11 i novijim verzijama, budući da je u trenutku pisanja to jedini preglednik koji podržava sve te vrste unosa.

• Demo za odabir datuma

Birač boja

Birač boja često je potrebno u određenim web-baziranim aplikacijama, kao što je ovaj CSS3 generator gradijenta, ali sve to vrijeme web programeri se još uvijek oslanjaju na JavaScript knjižnicu, kao što je jsColor, za obavljanje posla. Ali sada možemo stvoriti izvorni preglednik boja s HTML5 boja tip ulaza;

Još jednom, preglednici, u ovom slučaju Chrome i Opera, čine ovaj tip unosa malo drugačijim;

Opera prvo prikazuje osnovnu opciju boje na kliku, kao i hex format trenutne odabrane boje u padajućem izborniku, dok će Chrome izravno kliknuti paletu boja u novom prozoru kada se klikne.

Nadalje, možemo postaviti zadanu boju s oznakom vrijednost atribut, kako slijedi;

Na taj način, kada se gleda u nepodržanim preglednicima, ulazni degradirat će se u tekstnom polju i zadana vrijednost bit će vidljiva koja može dati neku vrstu savjeta korisnicima što treba unijeti u polje.

Prikaz vrijednosti boje

Umjesto otvaranja Photoshopa samo za kopiranje hex u formatu boje, zapravo možete stvoriti jednostavan alat za taj tip ulaza da biste obavili posao, budući da je generirana boja već u heksadecimalnom obliku, to bi bilo stvarno jednostavno;

Prvo, dodamo id birač boja na ulaz i dodamo prazno div s id hexcolor pored njega da sadrži vrijednost.

Trebamo jQuery povezan u glava našeg dokumenta. Zatim pohranjujemo vrijednost boje i novo dodano div u varijabli, kao što je to slučaj;

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

Nabavite početnu vrijednost iz #birač boja;

 hexcolor.html (boja); 

… I na kraju promijenite vrijednost kada se promijeni i odabrana boja;

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

To je to; sada ćemo je vidjeti na djelu.

• Colorpicker Demo

opseg

opseg tip unosa omogućuje nam dodavanje klizača u pregledniku za odabir broja u rasponu koji također možemo pronaći u jQuery UI.

Gornji isječak je osnovna implementacija opseg vrstu unosa. Također možemo promijeniti orijentaciju klizača na okomitu pomoću CSS-a, kako slijedi;

 ulaz [tip = raspon] širina: 20px; visina: 200px; -webkit-izgled: klizač-okomito;  

Osim toga, možemo postaviti min i maksimum raspon brojeva, na primjer;

U nastavku ispod postavljamo min na nulu i 225 za maksimum. Kada nisu izričito navedeni, preglednik će prema zadanim postavkama preuzeti 0 za minimum do 100 za maksimum.

Prikaz broja

Međutim, postoji jedno ograničenje, broj je nevidljiv, ne možemo vidjeti generirani broj / vrijednost iz klizača u pregledniku. Za prikaz broja koji trebamo dodati malo JavaScripta ili jQuery, i evo kako to radimo;

Prvo dodamo prazno div pored ulaza, stilizirajte div dovoljno da izgleda kao kutija.

Zatim stavite sljedeći kod koji će učiniti isto kao i gornji kod u snažnom izboru boja, osim sada dobivamo vrijednost iz klizača.

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

Sada možete vidjeti demo. Samo podsjetnik, pogledajte demo u tim preglednicima - Chrome, Opera i Safari, budući da Firefox i IE ne podržavaju opseg tip unosa u ovom trenutku.

• Demo raspona

Završne riječi

Jasno je da HTML5 čini naš život mnogo lakšim uvodeći mnoge nove vrste unosa. No, kao i sve druge HTML5 značajke, podrška je vrlo ograničena, posebno u starijim preglednicima, pa bismo te nove značajke trebali koristiti s opreznim, posebno novim vrstama unosa o kojima smo raspravljali u ovom postu; Datum, boja i raspon.

Ali na kraju se nadamo da ćete sada imati više uvida Obrasci HTML5. Hvala vam što ste pročitali ovaj post i nadamo se da ste uživali.

• Demo
• Preuzimanje izvora

Daljnje čitanje

U nastavku se nalaze nekoliko korisnih veza za daljnje kopanje u HTML obrasce.

• Nove značajke obrasca u HTML5 - Opera Dev.
• Trenutno stanje HTML5 obrazaca - Wufoo
• Atributi HTML5 obrasca - w3school.org
• Kada mogu koristiti HTML5 obrasce? - CanIUse.com