Pohled do vstupních typů HTML5 formulářů Datum, barva a rozsah

Formuláře se nacházejí všude na webových stránkách. Facebook, Twitter, Google - jen abychom jmenovali alespoň některé - vyžadují, abychom se přihlásili nebo se zaregistrovali na webu prostřednictvím formuláře, ve skutečnosti také používáme formulář pro tweetování a aktualizaci stavu v sociálních sítích. Ve zkratce, formulář je velmi důležitou součástí, abyste mohli komunikovat s webovou stránkou.

Webový formulář je postaven se vstupy, v minulosti máme jen několik možností pro typy vstupů; jako text, Heslo, rádio, zaškrtávací políčko a Předložit. Nyní, HTML5 přichází s velkými vylepšeními a zavádí mnoho nových typů vstupů v spec.

Takže v tomto příspěvku budeme kopat do některých nových zajímavých kousků z Formuláře HTML5 že si myslíme, že byste je měli vyzkoušet; Podívejme se na ně.

Výběr data

První věc, kterou bychom se chtěli podívat, je data. Výběr data je běžná věc, kterou můžete najít v registračním formuláři, zejména na některých stránkách nebo v aplikaci, jako je rezervace letů a hotelů.

Existuje mnoho JavaScript knihoven pro vytvoření data picker. Nyní můžeme také vytvořit jeden v mnohem jednodušším způsobem s HTML5 vstupem datum, jak následuje;

data v HTML5 funguje v podstatě velmi podobně, jako to dělaly knihovny JavaScript; Když se zaměříme na pole, vyskočí z něj kalendář a pak můžeme projít měsíce a roky, abychom vybrali datum.

Nicméně, každý prohlížeč, který v současné době podporuje datum typ vstupu, a to Chrome, Opera a Safari zobrazují tento typ vstupu trochu jinak, což může vést k nekonzistenci v uživatelské spokojenosti, a jak to vypadá;

Některé pozoruhodné rozdíly můžete vidět na první pohled z výše uvedeného obrázku; Opera použila anglickou třípísmennou zkratku pro název dní - Slunce, Po, Čt, a tak dále, zatímco Chrome používal můj místní jazyk, Safari - na druhé straně - funguje spíše divně, nezobrazuje kalendář vůbec.

Existují také nové vstup typy specifikovat datum nebo čas; Měsíc, týden, čas, čas schůzky a datetime-local, jsme si jisti, že klíčové slovo samo o sobě je docela desctiptive říct, co to dělá.

Všechny z nich můžete zobrazit v akci z níže uvedeného odkazu, ale ujistěte se, že si je prohlížíte v Opera 11 a vyšší, protože v okamžiku psaní je to jediný prohlížeč, který podporuje všechny tyto typy vstupů.

• Datepicker Demo

Výběr barvy

Výběr barvy je často potřeba v určitých webových aplikacích, jako je například tento generátor přechodu na CSS3, ale po celou dobu se weboví vývojáři stále spoléhají na knihovnu JavaScriptu, jako je například jsColor, aby tuto práci provedli. Nyní však můžeme vytvořit nativní prohlížeč barev s HTML5 barva Typ vstupu;

Opět platí, že prohlížeče, v tomto případě Chrome a Opera, činí tento typ vstupu mírně odlišným;

Opera nejprve zobrazí základní možnost barev na kliknutí a také hexadecimální formát aktuální vybrané barvy v rozevíracím seznamu, zatímco prohlížeč Chrome po kliknutí přímo zobrazí paletu barev v novém okně..

Dále můžeme nastavit výchozí barvu pomocí hodnota atributu;

Tímto způsobem se při prohlížení v nepodporovaných prohlížečích vstup bude degradovat v textovém poli a bude viditelná výchozí hodnota, která může uživatelům poskytnout cosi, co by mělo být zadáno do pole.

Zobrazení hodnoty barev

Spíše než otevírání Photoshopu jen pro kopírování hex barevný formát, můžete ve skutečnosti vytvořit jednoduchý nástroj na tento typ vstupu, aby práci, protože generovaná barva je již v šestnáctkové soustavě by to bylo opravdu snadné;

Nejprve přidáme id colorpicker na vstup a přidáme také prázdný div s id hexcolor vedle ní obsahovat hodnotu.

Potřebujeme jQuery propojené v hlava našeho dokumentu. Poté uložíme hodnotu barvy a nově přidanou hodnotu div podobně jako v proměnné;

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

Získat počáteční hodnotu z #colorpicker;

 hexcolor.html (barva); 

… A nakonec změňte hodnotu i při změně vyzvednuté barvy;

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

A je to; Podívejme se na to v akci.

• Colorpicker Demo

Rozsah

rozsah typ vstupu nám umožňuje přidat posuvník do prohlížeče pro výběr čísla v rozsahu, který můžeme také najít v uživatelském rozhraní jQuery.

Výše uvedený úryvek je základní implementací rozsah Typ vstupu. Můžeme také změnit orientaci posuvníku na vertikální pomocí CSS následujícím způsobem;

 input [type = range] width: 20px; výška: 200px; -webk-vzhled: slider-vertikální;  

Navíc můžeme nastavit min a max rozsah čísel, například;

V úryvku níže jsme nastavili min na nulu a 225 pro maximum. Pokud nejsou výslovně zadány, prohlížeč bude standardně přijímat 0 pro minimální 100 pro maximum.

Zobrazí číslo

Existuje však jedno omezení, číslo je neviditelné, generované číslo / hodnotu nevidíme v posuvníku v prohlížeči. Chcete-li zobrazit číslo musíme přidat trochu JavaScript nebo jQuery, a zde je, jak to děláme;

Nejprve přidáme prázdný div vedle vstupu, styl div dostatečně, takže to vypadá jako krabička.

Pak vložte následující kód, který bude stejný jako výše uvedený kód v silném výběru, kromě nyní získáme hodnotu z posuvníku.

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

Nyní si můžete prohlédnout demo. Stačí připomenout, zobrazit demo v těchto prohlížečích - Chrome, Opera a Safari, protože Firefox a IE nepodporují rozsah typ vstupu.

• Rozsah Demo

Závěrečná slova

Je jasné, že HTML5 činí naše životy mnohem snadnějším zavedením mnoha nových typů vstupů. Ale stejně jako ostatní funkce HTML5 je podpora velmi omezená, zejména ve starších prohlížečích, proto bychom měli tyto nové funkce používat s opatrností, zejména s novými typy vstupů, o nichž jsme v tomto příspěvku hovořili; Datum, barva a rozsah.

Ale nakonec doufáme, že nyní máte více informací Formuláře HTML5. Děkujeme za přečtení tohoto příspěvku a doufáme, že se vám to líbilo.

• Demo
• Stáhněte si zdroj

Další čtení

Níže je uvedeno několik užitečných odkazů, pomocí kterých můžete kopírovat do HTML formulářů.

• Nové funkce formuláře v HTML5 - Opera Dev.
• Aktuální stav HTML5 formulářů - Wufoo
• HTML5 Atributy formuláře - w3school.org
• Kdy mohu použít formuláře HTML5? - CanIUse.com