„HTML5“ formų įvedimo tipai Data, spalva ir diapazonas

Formos yra visur svetainėse. „Facebook“, „Twitter“, „Google“ - tai tik keletas pavadinimų - reikalaujame, kad prisijungtumėte prie svetainės arba užsiregistruotumėte per formą, iš tikrųjų mes taip pat naudojame formą, kad galėtume keisti ir atnaujinti būseną socialinėse svetainėse. Trumpai tariant,, forma yra labai svarbi dalis, kad galėtumėte bendrauti su svetaine.

Žiniatinklio forma sukurta su įvestimis, praeityje mes turime tik keletą galimybių įvesties tipams; toks kaip tekstą, Slaptažodis, radijo, žymimasis langelis ir Pateikti. Dabar HTML5 ateina su dideliais patobulinimais ir pristato daug naujų įvesties tipų.

Taigi, šiame poste mes iškirsime keletą naujų įdomių kūrinių iš HTML5 formos kad mes manome, kad turėtumėte juos išbandyti; patikrinkime juos.

Datos parinkiklis

Pirmas dalykas, kurį norėtume pažvelgti, yra datos parinkiklis. Pasirinkimo data yra įprastas dalykas, kurį galite rasti registracijos formoje, ypač kai kuriose svetainėse ar programose, pvz., Skrydžio ir viešbučio užsakyme.

Yra daug „JavaScript“ bibliotekų, kad sukurtumėte datos rinkiklį. Dabar galime sukurti ir daug lengviau, naudojant HTML5 įvestį data, taip:

The datos rinkiklis HTML5 iš esmės veikia labai panašiai kaip „JavaScript“ bibliotekose; kai mes sutelkiame dėmesį į lauką, pasirodys kalendorius, o po to galėsime pereiti per mėnesius ir metus, kad pasirinktume datą.

Tačiau kiekviena naršyklė, kuri šiuo metu palaiko data įvesties tipas, būtent „Chrome“, „Opera“ ir „Safari“ šiek tiek skiriasi šio įvesties tipo, kuris gali sukelti nesuderinamumo problemą naudotojo patirtyje, ir kaip tai atrodo;

Kai kurie pastebimi skirtumai, kuriuos galite matyti iš pirmo ekrano; „Opera“ naudojo anglišką trijų raidžių santrumpą dienų pavadinime „Saulė“, „Mon“, „Thu“ ir pan., o „Chrome“ naudojo mano vietinę kalbą, o „Safari“, kita vertus, veikia gana keista, ji nerodo kalendoriaus iš viso.

Taip pat yra keletas naujų įvesties tipai tiksliau pasirinkite datą ar laiką; mėnesį, savaitę, laikas, datetime ir datetime-local, mes esame įsitikinę, kad pats raktinis žodis yra visiškai nepagrįstas pasakyti, ką jis daro.

Visus juos galite peržiūrėti iš toliau pateiktos nuorodos, tačiau įsitikinkite, kad jį peržiūrite operacijoje 11 ir naujesnėje versijoje, nes rašymo metu tai yra vienintelė naršyklė, palaikanti visus šiuos įvesties tipus.

• Datepicker Demo

Spalvų parinkiklis

Spalvų rinkiklis dažnai reikalinga tam tikroje žiniatinklio programoje, pvz., šis CSS3 gradientų generatorius, tačiau visuomet žiniatinklio kūrėjai vis dar remiasi „JavaScript“ biblioteka, pvz., „jsColor“. Bet dabar mes galime sukurti vietinį naršyklės spalvų rinkiklį su HTML5 spalva įvesties tipas;

Dar kartą, naršyklės, šiuo atveju „Chrome“ ir „Opera“, šį įvesties tipą šiek tiek skiriasi;

„Opera“ pirmiausia parodo pagrindinę spalvų parinktį, kai spustelėjote ir šešių formatų dabartinę pasirinktą spalvą išplečiamajame meniu, o „Chrome“ tiesiogiai spustelės spalvų paletę naujame lange spustelėjus.

Be to, taip pat galime nustatyti numatytąjį spalvą su vertė atributas, taip;

Tokiu būdu, kai jis peržiūrimas nepalaikomose naršyklėse, įvesties bus pablogėjęs teksto lauke ir bus matoma numatytoji vertė, kuri gali suteikti naudotojams tam tikrą užuominą, ką reikėtų įvesti lauke.

Rodyti spalvų vertę

Užuot atidarę „Photoshop“ tik norėdami nukopijuoti hex spalvų formatas, jūs galite iš tikrųjų sukurti paprastą įrankį šiam įvesties tipui, kad atliktumėte darbą, nes sukurta spalva jau yra šešioliktainis, tai būtų tikrai paprasta;

Pirma, pridedame ID spalva į įvestį ir mes taip pat pridėjome tuščią div su ID hexcolor šalia jo, kad būtų pateikta reikšmė.

Mums reikia jQuery, susieto su galva mūsų dokumento. Tada išsaugome spalvos vertę ir naujai pridėtą div kintamajame;

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

Gaukite pradinę vertę iš #colorpicker;

 hexcolor.html (spalva); 

… Ir galiausiai pakeiskite vertę, kai pakeisite spalvą;

 $ („# colorpicker“). („keisti“, funkcija () hexcolor.html (this.value);); 

Viskas; dabar žiūrėkime į jį.

• „Colorpicker“ demonstracija

diapazonas

The diapazonas įvesties tipas leidžia pridėti naršyklėje slankiklį, kad pasirinktumėte skaičių diapazone, kurį galime rasti ir jQuery UI.

Pirmiau minėtas fragmentas yra pagrindinis programos įgyvendinimas diapazonas įvesties tipas. Taip pat galime keisti slankiklio orientaciją į vertikalią, naudojant CSS;

 įvestis [tipas = diapazonas] plotis: 20px; aukštis: 200px; -webkit-išvaizda: slankiklis-vertikalus;  

Be to, galime nustatyti min ir maks numerių diapazonas;

Žemiau esančiame fragmente nustatėme min iki nulio ir 225 maksimaliai. Kai jie nėra aiškiai nurodyti, pagal nutylėjimą naršyklė imsis 0 už minimalų 100 maksimaliai.

Rodyti numerį

Tačiau yra vienas suvaržymas, skaičius yra nematomas, mes negalime matyti sugeneruoto skaičiaus / vertės iš naršyklės slankiklio. Jei norite rodyti skaičių, kurį turime pridėti „JavaScript“ ar „jQuery“ bitų, ir kaip tai padaryti;

Pirmiausia pridedame tuščią div šalia įvesties stiliaus div pakankamai, kad jis atrodytų kaip langelis.

Tada įdėkite šį kodą, kuris darys tą patį, kaip pirmiau nurodytas kodas „strongcolor“ rinkikliu, išskyrus dabar gauname vertę iš slankiklio.

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

Dabar galite matyti demonstraciją. Tik priminimas, peržiūrėkite demonstraciją šiose naršyklėse - „Chrome“, „Opera“ ir „Safari“, nes „Firefox“ ir „IE“ nepalaiko diapazonas įvesties tipą.

• Diapazono demonstracija

Galutiniai žodžiai

Akivaizdu, kad HTML5 palengvina mūsų gyvenimą įvedant daug naujų įvesties tipų. Tačiau, kaip ir bet kurios kitos HTML5 funkcijos, palaikymas yra labai ribotas, ypač senesnėse naršyklėse, todėl turėtume naudoti šias naujas funkcijas atsargiai, ypač naujas įvesties rūšis, kurias aptarėme šiame pranešime; Data, spalva ir diapazonas.

Bet galiausiai tikimės, kad dabar jūs turite daugiau įžvalgų HTML5 formos. Dėkojame, kad skaitote šį įrašą, ir tikimės, kad jums tai patiko.

• Demo
• Atsisiųsti šaltinį

Papildoma literatūra

Žemiau pateikiamos kelios naudingos nuorodos, kad galėtumėte toliau įterpti į HTML formas.

• Naujos formos funkcijos HTML5 - „Opera Dev“.
• Dabartinė HTML5 formų būsena - Wufoo
• HTML5 formos atributai - w3school.org
• Kada galiu naudoti HTML5 formas? - CanIUse.com