HTML5 vormide sisestamise tüübid Kuupäev, värv ja ulatus

Vormid on kõikjal veebisaitidel. Facebook, Twitter, Google - lihtsalt mõne nime nimetamine - nõuavad, et me logime sisse või registreerume veebilehe kaudu vormi kaudu, tegelikult kasutame ka vormi sotsiaalse saidi staatuse esitamiseks ja staatuse uuendamiseks. Lühidalt, vorm on väga oluline osa veebisaidiga suheldes.

Veebivorm ehitatakse sisenditega, minevikus on sisenditüüpide jaoks vaid mõned võimalused; nagu näiteks teksti, parool, raadio, märkeruut ja Esita. Nüüd on HTML5-l suured täiustused ja paljud uued sisenditüübid.

Niisiis, sellel ametikohal kaevame mõned uued huvitavad tükid HTML5 vormid me arvame, et peaksite neid proovima; vaatame need välja.

Kuupäeva valija

Esimene asi, mida tahaksime vaadata, on kuupäeva valija. Kuupäeva valimine on üldine asi, mida võite registreerimisvormis leida, eriti mõnedes saitides või rakendustes, nagu lennu- ja hotelli broneerimine.

Kuupäeva valiku loomiseks on palju JavaScripti raamatukogusid. Nüüd on võimalik luua ka HTML5 sisendiga palju lihtsam viis kuupäev, järgnevalt;

The kuupäeva valija HTML5-s töötab põhiliselt väga sarnaselt JavaScripti raamatukogude toimimisega; kui me keskendume põllule, ilmub välja kalender ja siis saame navigeerida kuude ja aastate vahel, et valida kuupäev.

Kuid iga brauser, mis praegu toetab kuupäev sisenditüüp nimelt Chrome, Opera ja Safari näitavad seda sisendit veidi erinevalt, mis võib viia kasutajate kogemuste ebajärjekindluse probleemini, ja siin näeb see välja;

Mõned märkimisväärsed erinevused, mida näete ülaltoodud pildil lühidalt; Opera kasutas inglise keele kolmekohalist lühendit päevade nimele - Sun, Mon, Thu jne., samas kui Chrome kasutas minu kohalikku keelt, Safari - teisalt - töötab üsna kummaline, ei näita kalendrit üleüldse.

On ka uusi sisend tüübid valige täpsemalt kuupäev või kellaaeg; kuus, nädal, aega, kuupäev Kellaaeg ja datetime-local, me oleme kindlad, et märksõna ise on üsna tühine, et öelda, mida ta teeb.

Kõiki neid saab vaadata allolevast lingist, kuid veenduge, et vaatate seda Opera 11-s ja uuemates versioonides, sest kirja kirjutamise ajal on see ainus brauser, mis toetab kõiki neid sisenditüüpe.

• Datepicker Demo

Värvivalija

Värvivalija on sageli vajalik teatud veebipõhistes rakendustes, nagu see CSS3 gradientgeneraator, kuid kogu selle aja jooksul toetuvad veebiarendajad ikkagi JavaScripti raamatukogule, nagu näiteks jsColor. Aga nüüd saame luua HTML5-ga naturaalse brauseri värvivaliku värv sisenditüüp;

Veelgi enam, brauserid, antud juhul Chrome ja Opera, muudavad selle sisendit veidi erinevaks;

Opera kuvab kõigepealt rippmenüüst klõpsamisel põhivärvivaliku ja praeguse valitud värvi kuuekordse vormingu, samal ajal kui Chrome ilmub klõpsamisel otse uues aknas värvipaleti..

Lisaks saame ka vaikevärviga seadistada väärtus atribuut järgmiselt;

Nii, kui seda ei toetata toetatud brauserites, sisend hakkab tekstiväljal halvenema ja vaikeväärtus on nähtav, mis võib anda kasutajatele teatava vihje, mis tuleks väljale sisestada.

Kuva värvi väärtus

Selle asemel, et avada Photoshop lihtsalt kopeerida hex värvivorming, saate selle sisenditüübi jaoks tegelikult luua lihtsa tööriista, sest genereeritud värv on juba kuueteistkümnendal, see oleks väga lihtne;

Esiteks, me lisame id värvikunstnik sisendile ja lisame ka tühja div ID-ga hexcolor selle kõrvale väärtust.

Meil on vaja jQueryt, mis on seotud pea meie dokumendi kohta. Seejärel salvestame värvi väärtuse ja äsja lisatud div muutujana, nagu nii;

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

Hangi algväärtus väärtusest #colorpicker;

 hexcolor.html (värv); 

… Ja muutke ka väärtust, kui valitud värvi muudetakse;

 $ ('# colorpicker') on sisse lülitatud ('muuta', funktsioon () hexcolor.html (this.value);); 

See ongi see; vaatame nüüd seda tegevuses.

• Colorpicker Demo

Vahemik

The vahemikus sisenditüüp võimaldab meil lisada brauseris liuguri numbri valimiseks vahemikus, mida leiame ka jQuery kasutajaliideses.

Ülaltoodud väljavõte on programmi rakendamise põhiline vahemikus sisenditüüp. CSS-i abil on võimalik muuta ka liuguri suunda vertikaalseks, järgmiselt;

 sisend [tüüp = vahemik] laius: 20 px; kõrgus: 200 px; -webkit-välimus: liugur-vertikaalne;  

Lisaks saame määrata min ja max näiteks numbrid;

Allpool olevas fragmentis seadistame min nullini ja 225 maksimaalselt. Kui neid pole selgesõnaliselt määratud, võtab brauser vaikimisi 0 miinimumini 100 maksimaalselt.

Kuva number

Siiski on üks piirang, arv on nähtamatu, me ei näe brauseris olevast liugurist genereeritud numbrit / väärtust. Arvu kuvamiseks peame lisama veidi JavaScripti või jQuery, ja siin on, kuidas me seda teeme;

Esmalt lisame tühja div sisendi kõrvale stiili div piisavalt, et see näeks välja nagu kast.

Seejärel pange järgmine kood, mis teeb sama, mis ülaltoodud koodiga, tugeva värvi valijaga, välja arvatud saame nüüd väärtuse liugurilt.

 $ (funktsioon () var val = $ ('# liugur') .val (); väljund = $ ('# väljund'); väljund.html (val); $ ('# liugur'). ) output.html (this.value););); 

Nüüd näete demot. Lihtsalt meeldetuletus, vaadake demot nendes brauserites - Chrome, Opera ja Safari, kuna Firefox ja IE ei toeta vahemikus sisendi tüüp.

• Range demo

Lõplikud sõnad

On selge, et HTML5 muudab paljude uute sisenditüüpide kasutamisega meie elu palju lihtsamaks. Kuid nagu kõik muud HTML5-funktsioonid, on tugi väga piiratud, eriti vanemates brauserites, nii et me peaksime neid uusi funktsioone kasutama ettevaatlikult, eriti uusi sisenditüüpe, mida oleme selles postituses arutanud; Kuupäev, värv ja ulatus.

Aga lõpuks loodame, et nüüd on teil rohkem teavet HTML5 vormid. Täname teid selle postituse lugemise eest ja loodame, et see meeldis.

• Demo
• Allalaadimise allikas

Lisalugemist

Allpool on mõned kasulikud lingid, mis võimaldavad teil HTML-vormidesse edasi kaevata.

• Uued vormid HTML5-s - Opera Dev.
• HTML5 vormide praegune olek - Wufoo
• HTML5 vormi atribuudid - w3school.org
• Millal saab HTML5 vorme kasutada? - CanIUse.com