A HTML5 formátumú beviteli típusok dátuma, színe és tartománya

Az űrlapok mindenhol megtalálhatók a weboldalakon. A Facebook, a Twitter, a Google - csak azért, hogy csak néhányat említsünk - megköveteli, hogy jelentkezzen be vagy regisztráljon a webhelyre egy formanyomtatványon keresztül, sőt formát használunk a társadalmi webhelyek állapotának szerkesztéséhez és frissítéséhez. Röviden, az űrlap nagyon fontos szerepet tölt be ahhoz, hogy képes legyen egy weboldalra lépni.

A webes űrlap a bemenetekből épül fel, a múltban csak néhány lehetőség van a beviteli típusokhoz; mint például szöveg, Jelszó, rádió, négyzetet és beküldése. Most a HTML5 nagy fejlesztésekkel rendelkezik, és számos új beviteli típust vezet be a specifikációban.

Tehát ebben a hozzászólásban az új, érdekes darabokba fogunk ásni HTML5 űrlapok úgy gondoljuk, hogy meg kell próbálnod őket; nézzük meg őket.

Dátumválasztó

Az első dolog, amit szeretnénk megnézni a dátumválasztó. A dátum kiválasztása gyakori dolog, amit a regisztrációs űrlapon találhat, különösen néhány webhelyen vagy alkalmazásban, mint például a repülés és a szállodai foglalás.

Sok JavaScript könyvtár található a dátumválasztó létrehozásához. Most már sokkal könnyebb módon is létrehozhatunk egyet a HTML5 bemenettel dátum, alábbiak szerint;

A dátumválasztó a HTML5-ben alapvetően nagyon hasonló a JavaScript könyvtárakhoz; amikor a mezőre összpontosítunk, egy naptár kinyílik, majd a hónapok és évek között navigálhatunk a dátum kiválasztásához.

Ugyanakkor minden olyan böngésző, amely jelenleg támogatja a dátum a bemeneti típus, nevezetesen a Chrome, az Opera és a Safari egy kicsit másképp jeleníti meg ezt a bemeneti típust, ami potenciálisan inkonzisztencia-problémához vezethet a felhasználói élményben, és itt néz ki;

Néhány figyelemre méltó különbség látható a fenti képernyőről; az Opera az angol háromnapos rövidítést használta a napok nevére - Sun, Mon, Thu és így tovább, míg a Chrome a helyi nyelvet használta, a Safari viszont - meglehetősen furcsa - nem mutat naptárat egyáltalán.

Van még néhány új is bemenet típusok pontosabban válassza ki a dátumot vagy az időt; hónap, hét, idő, dátum idő és datetime helyi, biztosak vagyunk benne, hogy maga a kulcsszó meglehetősen megfogalmazható, hogy elmondja, mit csinál.

Az összes linket az alábbi linkről tekintheti meg, de győződjön meg róla, hogy az Opera 11-es vagy annál magasabb verzióját tekintheti meg, mivel az írás közben az egyetlen böngésző, amely támogatja az összes ilyen bemeneti típust.

• Datepicker Demo

Színválasztó

Színválasztó gyakran szükség van bizonyos webalapú alkalmazásokban, mint például a CSS3 gradiens generátor, de ez idő alatt a webfejlesztők még mindig a JavaScript könyvtárra támaszkodnak, mint például a jsColor. De most létrehozhatunk egy natív böngésző színválasztót HTML5-tel szín bemeneti típus;

Ismét a böngészők, ebben az esetben a Chrome és az Opera, ezt a bemeneti típust kissé eltérővé teszik;

Az Opera először a legördülő menüben megjeleníti az alapértelmezett színt a kattintással, valamint az aktuálisan kiválasztott szín hexadiagramjával, míg a Chrome közvetlenül rákattint egy új ablakban, amikor rákattint..

Továbbá az alapértelmezett színt is beállíthatjuk a érték attribútum;

Ily módon, ha a nem támogatott böngészőkben látják, a bemenet egy szövegmezőben romlik, és az alapértelmezett érték látható lesz, ami egyfajta tippet adhat a felhasználóknak, hogy mit kell a mezőbe beírni.

A színérték megjelenítése

Ahelyett, hogy a Photoshopot csak a másoláshoz szeretné megnyitni hex színes formátumban, egy egyszerű eszközt hozhat létre ehhez a bemeneti típushoz a feladat elvégzéséhez, mivel a generált szín már hexadecimális, ez nagyon könnyű lenne;

Először id színválasztó a bemenethez, és egy üreset is adunk hozzá div azonosítóval hexcolor mellette az értéket.

Szükségünk van a jQuery-hez, melyet a fej dokumentumunkat. Ezután tároljuk a színértéket és az újonnan hozzáadott értéket div egy változóban, mint így;

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

Szerezd meg a kezdeti értéket a #színválasztó;

 hexcolor.html (szín); 

… És végül változtassa meg az értéket, ha a választott szín is megváltozik;

 $ ('# colorpicker') be ('változás', funkció () hexcolor.html (this.value);); 

Ez az; most nézzük meg a műveletet.

• Colorpicker Demo

Hatótávolság

A hatótávolság A beviteli típus lehetővé teszi számunkra, hogy egy csúszkát adjunk hozzá a böngészőben a szám kiválasztásához olyan tartományban, amelyet a jQuery felhasználói felületen is megtalálhatunk.

A fenti részlet az alap végrehajtása hatótávolság bemeneti típus. A CSS segítségével a csúszka tájolását függőlegesre is módosíthatjuk, az alábbiak szerint;

 bemenet [típus = tartomány] szélesség: 20px; magasság: 200px; -webkit-megjelenés: csúszka-függőleges;  

Ezenkívül beállíthatjuk a min és max például a számok tartománya;

Az alábbi részletben a min nullára és 225 maximálisan. Ha nincsenek kifejezetten megadva, a böngésző alapértelmezés szerint fog 0 a minimumra 100 maximálisan.

Jelenítse meg a számot

Van azonban egy korlátozás, a szám láthatatlan, a böngésző csúszkájából nem látható a generált szám / érték. Ahhoz, hogy megjelenítsük a számot, hozzá kell adnunk egy kicsit a JavaScript-et vagy a jQuery-t, és itt van, hogyan csináljuk;

Először üreset adunk hozzá div a bemenet mellett, a stílus a div kellőképpen úgy néz ki, mint egy doboz.

Ezután tegye a következő kódot, amely ugyanaz lesz, mint a fenti kódot, erős színekben, kivéve most kapjuk az értéket a csúszkából.

 $ (függvény () var val = $ ('# slider'). val (); output = $ ('# output'); output.html (val); $ ('# slider'). ) output.html (this.value););); 

Most láthatjuk a demót. Csak egy emlékeztető, nézd meg a demót ezekben a böngészőkben - Chrome, Opera és Safari, mivel a Firefox és az IE nem támogatja a hatótávolság bemenet típusa.

• Range Demo

Végső szavak

Nyilvánvaló, hogy a HTML5 sokkal könnyebbé teszi életünket, ha sok új beviteli típust vezetünk be. De mint bármely más HTML5 szolgáltatás, a támogatás nagyon korlátozott, különösen a régebbi böngészőkben, ezért ezeket az új funkciókat óvatosan kell használnunk, különösen az új hozzászólási típusokat, amelyeket ebben a hozzászólásban megvitattunk; Dátum, szín és tartomány.

De végül reméljük, hogy most már több betekintést nyer HTML5 űrlapok. Köszönjük, hogy elolvasta ezt a bejegyzést, és reméljük, hogy élvezted.

• Demó
• Letöltés forrása

További irodalom

Az alábbiakban néhány hasznos link található a HTML űrlapok továbbfejlesztéséhez.

• Új formai funkciók a HTML5-ben - Opera Dev.
• A HTML5 formák jelenlegi állapota - Wufoo
• HTML5 űrlap attribútumok - w3school.org
• Mikor használhatok HTML5 űrlapokat? - CanIUse.com