Od autora: nepochybně každý den komunikujete s alespoň jedním formulářem na webu. Ať už provádíte průzkum obsahu nebo se přihlašujete na svou stránku na Facebooku, používání online formulářů je jedním z nejběžnějších úkolů na webu. Pro designéry a vývojáře je vytváření formulářů poněkud monotónní, zejména psaní skriptů pro ověřování dat pro ně. HTML5 zavádí mnoho nových atributů, typů vstupu a dalších prvků značkovacích nástrojů.
V tomto článku se zaměříme na seznámení s novými atributy a v příštím článku se podíváme na typy vstupů.
Ukáže se, že nové funkce nám výrazně usnadní život při zapůsobení na uživatele. Co je zde nejatraktivnější? Nyní je můžete uplatnit. Začneme velmi stručnou historií formulářů HTML5.
Tento článek je výňatek z kapitoly 6 knihy Beginning HTML5 and CSS3: The Web Evolved od Christophera Murphyho, Oli Studholme, Richarda Clarka a Divya Manian vydané nakladatelstvím Apress.
Poznámka: Vzhledem k tomu, že tento článek je úryvkem z knihy, mohlo se chování prohlížeče s atributy a typy vstupů od pořízení snímků obrazovky změnit. Od zveřejnění se také mohla rozšířit podpora prohlížeče, takže aktuální stav najdete v odkazech na konci tohoto článku.
Historie formulářů HTML5
Sekce formuláře v HTML5 byla původně specifikací nazvanou Web Forms 2.0, která přidala nové typy nástrojů pro správu formulářů. Začal v Opeře a editoval tehdejší zaměstnanec Opery Ian Hickson, byl schválen W3C na začátku roku 2005. Práce byla původně provedena W3C. Poté byla sloučena se specifikací Web Applications 1.0 a vytvořila základ pro specifikaci HTML5 odštěpitelné pracovní skupiny Web Hypertext Application Technology Working Group (WHATWG).
Použití principů návrhu HTML5
Jednou z nejlepších věcí na formulářích HTML5 je, že téměř všechny nové typy a atributy vstupu lze okamžitě použít. Nevyžadují žádné další čipy, hacky a další záplaty. Není to tak, že by všechny už byly „podporovány“, ale v moderních prohlížečích, které je podporují, dokážou dělat skvělé věci – a pěkně degradovat v prohlížečích, které jim nerozumí. To vše je způsobeno principy návrhu HTML5. V tomto případě konkrétně odkazujeme na princip krásné degradace. Obecně je neodpustitelné nezačít tyto funkce hned využívat. Ve skutečnosti to bude znamenat, že jste před ostatními.
Atributy formuláře HTML5
V tomto článku se podíváme na následujících 14 nových atributů.
zástupný symbol
Prvním je atribut placeholder, který nám umožňuje nastavit text zástupného symbolu, což se donedávna v HTML4 dělalo s atributem value. Lze jej použít pouze pro krátké popisy. Pro delší použijte atribut title. Rozdíl oproti HTML4 je v tom, že text se zobrazuje pouze tehdy, když je pole prázdné a není zaostřené. Jakmile se pole zaostří (například když na pole kliknete nebo na něj ukážete) a začnete psát, text jednoduše zmizí. Velmi podobné vyhledávacímu poli v Safari.
Podívejme se, jak implementovat atribut zástupného symbolu.
< input type = "text" name = "user-name" id = "user-name" placeholder = "alespoň 3 znaky" > |
Takhle! Slyším, jak si myslíš: „Co je na něm tak zvláštního? Celý život jsem to dělal v JavaScriptu.“ Ano to je správně. S HTML5 se však stává součástí prohlížeče, což znamená, že k dosažení přístupnějšího řešení pro různé prohlížeče (i s vypnutým JavaScriptem) je potřeba méně skriptování. Obrázek ukazuje, jak funguje atribut zástupného textu v prohlížeči Chrome.
Prohlížeče, které nepodporují zástupný atribut, jej budou ignorovat, takže se nespustí. Jeho povolením však zlepšujete zkušenosti těch uživatelů, jejichž prohlížeče to podporují, a také zaručujete vyhlídky vašich stránek. Všechny moderní prohlížeče podporují zástupný text.
autofokus
Autofocus dělá přesně to, co znamená. Přidáním do vstupu se pole při vykreslování stránky automaticky zaostří. Stejně jako u zástupných symbolů jsme v minulosti používali pro automatické ostření JavaScript.
Tradiční metody JavaScriptu však mají vážné problémy s použitelností. Pokud například uživatel začne vyplňovat formulář ještě před úplným načtením skriptu, bude po načtení (nepříjemně) vrácen do prvního pole formuláře. Atribut autofocus v HTML5 řeší tento problém tím, že zaostřuje při načítání dokumentu, aniž byste museli čekat na načtení JavaScriptu. Doporučujeme jej však používat, abyste předešli problémům s použitelností pouze u stránek, jejichž jediným účelem je formulář (jako je Google).
Toto je booleovský atribut (kromě případů, kdy píšete XHTML5; viz poznámka) a provádí se takto:
< input type = "text" name = "first-name" id = "first-name" autofocus > |
Podporují jej všechny moderní prohlížeče a jako zástupný symbol jej prohlížeče bez automatického ostření jednoduše ignorují.
Poznámka: Některé z nových atributů formuláře HTML5 jsou logické. Jednoduše to znamená, že jsou nainstalovány, pokud jsou přítomny, a nejsou nainstalovány, pokud nejsou přítomny. V HTML5 je lze zapsat několika různými způsoby.
autofocus autofocus="" autofocus="autofocus"
autofokus autofocus="" autofocus="autofocus" |
Při psaní XHTML5 byste však měli používat styl autofocus="autofocus".
automatické doplňování
Atribut autocomplete pomáhá uživatelům vyplňovat formuláře na základě předchozího vstupu. Tento atribut existuje již od IE5.5, ale nakonec byl standardizován jako součást HTML5. Ve výchozím nastavení je aktivní. To znamená, že jej v podstatě nebudeme muset používat. Pokud však chcete trvat na zadávání do pole formuláře pokaždé, když je vyplněno (na rozdíl od automatického vyplňování pole prohlížečem), udělejte to takto:
< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" > |
Stav automatického dokončování pole přepíše jakýkoli stav automatického dokončování nastavený na prvku formuláře, který obsahuje.
Požadované
Požadovaný atribut nevyžaduje reprezentaci; stejně jako autofokus dělá přesně to, co od něj očekáváte. Po přidání do pole formuláře prohlížeč vyžaduje, aby uživatel před odesláním formuláře zadal data do tohoto pole. Nahrazuje základní ověřování formulářů, které se v současnosti provádí pomocí JavaScriptu, díky čemuž je vše pohodlnější a šetří nám další čas na vývoj. vyžadován je booleovský atribut, stejně jako autofocus. Podívejme se na to v akci.
< input type = "text" id = "given-name" name = "given-name" required > |
V současné době je požadováno implementováno pouze v Opeře 9.5+, Firefoxu 4+, Safari 5+, Internet Exploreru 10 a Chrome 5+, takže prozatím budete muset pokračovat v psaní ověřovacích skriptů na straně klienta pro ostatní prohlížeče. (*kašel- khe*IE!). Opera, Chrome a Firefox zobrazí uživateli při odesílání formuláře chybovou zprávu. Ve většině prohlížečů jsou pak chyby lokalizovány na základě deklarovaného jazyka. Safari při odesílání nezobrazí chybovou zprávu, ale místo toho zaostří na toto pole.
Výchozí zobrazení „povinné“ chybové zprávy závisí na konkrétním prohlížeči; V současné době nelze „bublinu“ s chybovou hláškou ve všech prohlížečích stylizovat pomocí CSS. Chrome má však svou vlastní vlastnost, kterou lze použít ke stylizaci chybové zprávy. Vstup můžete také upravit pomocí pseudotřídy :required. Alternativou je přepsat znění a styly v JavaScriptu pomocí metody setCustomValidity(). Je také velmi důležité si uvědomit, že toto ověření založené na prohlížeči nenahrazuje ověření na straně serveru.
vzor
Atribut vzoru je obvykle velkým problémem pro mnoho vývojářů (no, stejně jako jakýkoli atribut formuláře). Definuje regulární výraz JavaScriptu pro pole, jehož hodnota má být kontrolována. Vzor nám usnadňuje použití samostatných kontrol kódů, čísel účtů a tak dále. Možnosti vzoru jsou rozsáhlé a zde je jen jeden jednoduchý příklad s použitím produktového čísla.
< label >Číslo produktu : < input pattern = "{3}" name = "product" type = "text" title = "Jedna číslice následovaná třemi velkými písmeny."/ > < / label > |
Tato šablona stanoví, že číslo produktu musí být jednočíslo následované třemi velkými písmeny (3). Další šablony najdete na webu HTML5 Templates, který obsahuje seznam běžných regulárních výrazů šablon stylů, které vám pomohou začít s nimi.
Jak je požadováno, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 a Chrome 5+ jsou jediné prohlížeče, které aktuálně podporují šablony. Zbytek však brzy dožene díky rychlému pokroku na trhu prohlížečů.
prvky seznamu a datalistu
Atribut seznamu umožňuje uživateli přiřadit seznam voleb ke konkrétnímu poli. Hodnota atributu list musí být stejná jako ID prvku datalist ve stejném dokumentu. Prvek datalist pro HTML5 je nový a představuje předdefinovaný seznam možností ovládání formuláře. Funguje podobně jako vyhledávací pole v prohlížeči, která automaticky doplňují slova při psaní.
Následující příklad ukazuje, jak jsou kombinovány seznam a seznam dat.
< label >Vaše oblíbené ovoce: < datalist id = "fruits" > < option value = "ostružina" >ostružina< / option > < option value = "Černý rybíz" >Černý rybíz< / option > < option value = "borůvka" >borůvka< / option > < ! -- …-- > < / datalist > Jiné, uveďte prosím : < input type = "text" name = "fruit" list = "fruits" > < / label > |
Přidáním prvku select do seznamu dat můžete zajistit velkou degradaci jednoduchým použitím prvku volby. Zde je elegantní šablona značek vytvořená Jeremym Keithem, která dokonale zapadá do principů postupné degradace HTML5.
< label >Vaše oblíbené ovoce: < datalist id = "fruits" > < select name = "fruits" > < option value = "ostružina" >ostružina< / option > < option value = "Černý rybíz" >Černý rybíz< / option > < option value = "borůvka" >borůvka< / option > < ! -- …-- > < / select > Jiné, uveďte prosím : < / datalist > < input type = "text" name = "fruit" list = "fruits" > < / label > |
Podpora prohlížeče pro seznam a seznam dat je aktuálně omezena na Opera 9.5+, Chrome 20+, Internet Explorer 10 a Firefox 4+.
násobek
Svůj seznam a datový seznam můžete posunout o krok dále použitím boolean multiple atributu, takže můžete ze seznamu dat zadat více než jednu hodnotu. Zde je příklad.
< label >Vaše oblíbené ovoce: < datalist id = "fruits" > < select name = "fruits" > < option value = "ostružina" >ostružina< / option > < option value = "Černý rybíz" >Černý rybíz< / option > < option value = "borůvka" >borůvka< / option > < ! -- …-- > < / select > Jiné, uveďte prosím : < / datalist > < input type = "text" name = "fruit" list = "fruits" multiple > < / label > |
Vícenásobné se však nepoužívá výhradně u datalistu. Dalším příkladem použití více položek by byly e-mailové adresy při přeposílání položek příteli nebo přikládání souborů, jak je znázorněno zde:
< label >Nahrát soubory : < input type = "file" multiple name = "upload" > < / label > |
více je podporováno ve Firefoxu 3.6+, Safari 4+, Opeře 11.5+, Internet Exploreru 10 a Chrome 4+.
novalidate a formnovalidate
Atributy novalidate a formnovalidate označují, že při odeslání formuláře není vyžadováno žádné ověření. Oba jsou to booleovské atributy. formnovalidate lze použít na vstupy typu submit nebo image. Atribut novalidate lze nastavit pouze u prvku formuláře.
Příklad použití atributu formnovalidate lze vidět na tlačítku "uložit koncept", kde formulář obsahuje pole, která jsou vyžadována pro odeslání konceptu, ale nejsou vyžadována pro uložení konceptu. novalidate se použije, když nepotřebujete provádět ověřování formuláře, ale chcete využít výhod lepšího uživatelského rozhraní, které nabízejí nové typy vstupů.
Použití formnovalidate lze vidět v následujícím příkladu:
< form action = "process.php" > < label for = "email" >E-mailem :< / label > < input type = "text" name = "email" value = "[e-mail chráněný]" > < input type = "submit" formnovalidate value = "Předložit" > < / form > |
A tento příklad ukazuje použití novalidate:
< form action = "process.php" novalidate > |
Kdysi dávno, v dobách XHTML/HTML4, měli vývojáři jen několik možností, které mohli použít k ukládání libovolných dat souvisejících s DOM. Mohli jste si vymyslet své vlastní atributy, ale to bylo riskantní – váš kód by nebyl platný, prohlížeče mohly vaše data ignorovat, a to by mohlo způsobit problémy, pokud by název odpovídal standardním atributům HTML.
To je důvod, proč většina vývojářů zůstala u atributů class nebo rel, protože to byl jediný rozumný způsob, jak uložit další řetězce. Řekněme například, že vytváříme widget pro zobrazení zpráv, jako je časová osa Twitteru. V ideálním případě by měl být JavaScript konfigurovatelný bez nutnosti přepisování kódu, takže definujeme ID uživatele v atributu class takto:
Náš kód JavaScript bude hledat prvek s ID msglist. Pomocí skriptu vyhledáme třídy začínající na uživatel_, a "bob" v našem případě bude ID uživatele a zobrazíme všechny příspěvky tohoto uživatele.
Řekněme, že bychom také chtěli nastavit maximální počet zpráv a přeskočit zprávy starší než šest měsíců (180 dní):
Náš atribut třída se velmi rychle zaneřádí – je snazší udělat chybu a analýza řetězců v JavaScriptu je stále obtížnější.
Atributy dat HTML5
Naštěstí HTML5 zavedlo možnost používat vlastní atributy. Můžete použít jakýkoli název s malými písmeny s předponou data-, například:
Atributy vlastních dat:
- jsou to řetězce – do nich můžete uložit jakékoli informace, které lze reprezentovat nebo zakódovat jako řetězec, například JSON. Přetypování typu musí být provedeno pomocí JavaScriptu
- by měl být použit v případech, kdy neexistují žádné vhodné prvky nebo atributy HTML5
- odkazovat pouze na stránku. Na rozdíl od mikroformátů by je měly externí systémy, jako jsou vyhledávače a prohledávače, ignorovat.
Příklad zpracování JavaScriptu č. 1: getAttribute a setAttribute
Všechny prohlížeče umožňují získávat a měnit atributy dat pomocí metod getAttribute a setAttribute:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("velikost-seznamu-dat", +show+3);
To funguje, ale mělo by se používat pouze pro zachování kompatibility se staršími prohlížeči.
Příklad zpracování JavaScriptu č. 2: metoda jQuery data().
Od jQuery 1.4.3 zpracovává metoda data() datové atributy HTML5. Předponu nemusíte explicitně specifikovat data- takže kód jako tento by fungoval:
Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("velikost-seznamu", show+3);
Ale ať je to jakkoli, mějte na paměti, že jQuery se snaží převést hodnoty takových atributů na příslušné typy (booleovské, čísla, objekty, pole nebo null) a ovlivní DOM. Na rozdíl od setAttribute, metoda data() nebude fyzicky nahrazovat atribut data-list-size- pokud zkontrolujete jeho hodnotu mimo jQuery - bude to stále 5.
Příklad zpracování JavaScriptu č. 3: API pro práci s datovými sadami
A nakonec tu máme API datové sady HTML5, které vrací objekt DOMStringMap. Je třeba mít na paměti, že atributy dat jsou mapovány na objekt bez předpon data-, pomlčky jsou ze jmen odstraněny a samotná jména jsou převedena na camelCase, například:
| Název atributu | Název v rozhraní API datové sady |
| data-uživatel | uživatel |
| data-maxage | maxage |
| data-list-size | listSize |
Náš nový kód:
Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Toto rozhraní API podporují všechny moderní prohlížeče, nikoli však IE10 a nižší. Pro tyto prohlížeče existuje řešení, ale pravděpodobně je praktičtější použít jQuery, pokud píšete pro starší prohlížeče.
Chcete-li zobrazit popis a příklad použití globálního atributu, který vás zajímá, klikněte na něj nebo přejděte na stránce dolů k jeho popisu.
přístupový klíč
Atribut accesskey používají prohlížeče jako vodítko k vytvoření klávesové zkratky, která aktivuje nebo přenese fokus na prvek.
Poznámka: Před HTML5 bylo možné atribut accesskey použít pouze s následujícími značkami: . ,