Formulář je v HTML prvkem, protože nám umožňuje zadávat data a proto také interagují s webem a jeho databází, což vyžaduje ovládání z hlediska zabezpečení, protože z formuláře můžeme odesílat soubory na server, zpracovávat objednávku nebo platbu, vybírat různé prvky a ovládací prvky formuláře, které pak budou zpracovány událostí javascriptu nebo jiným webovým programovacím jazykem.
Aby mohli vývojáři provádět úkoly ve formulářích, aby mohli kontrolovat události, musí vývojáři mnohokrát používat různé knihovny a v některých případech se musíme uchýlit k některým nežádoucím metodám kódu pro odesílání dat, ovládání zadávaného kódu, vyhýbání se vkládání kódu nebo útokům XSS.
Pokud chceme provádět všechny tyto ovládací prvky a události, můžeme najít velké množství javascriptových souborů, které v kb podstatně zvyšují váhu webu a zpomalují stránku. Je to také nejisté, protože pokud někdo zakáže používání Javascriptu, všechny ovládací prvky přestanou fungovat.
Prvky formuláře a atributy v HTML5 poskytují vyšší míru kontroly a sémantického značení než jeho předchozí verze, byly přidány atributy a vlastnosti, které eliminují potřebu provádět ovládací prvky externě prostřednictvím skriptů. Funkce formulářů v HTML5 poskytují lepší kontrolu a nezávisí na tom, zda je ve vašem prohlížeči povolen nebo zakázán Javascript.
Atributy formuláře HTML5 - zástupný symbol
Prostřednictvím zástupný majetek Můžeme uvést příklad typu údajů, které mají být registrovány, což nám umožňuje poskytnout uživateli informace, které budou sloužit jako vodítko. Tento text, který uvedeme v ovládacím prvku, zmizí poté, co uživatel zadá znak.
Atribut zástupného symbolu lze použít pouze v textových polích nebo v textových oblastech.
Vzory s regulárními výrazy ve formách
Atribut pattern nám umožňuje definovat naše pravidla pro ověření dat, která uživatel zadává pomocí regulárních výrazů. Regulární výraz je posloupnost znaků, která definuje datový vzor, například vzor [a-z] označuje, že uživatel může zadávat pouze malá písmena, nebo vzor [0-9] naznačuje, že lze zadat pouze čísla.
HTML5 vám umožňuje používat vzory, takže pokud zadané znaky neodpovídají automaticky definovanému vzoru, vygeneruje to chybu.
Budeme definujte některá pravidla pomocí vzorů a stylů změnit barvu ohraničení, pokud dojde k neplatné události, tj. to, co uživatel zadá, neodpovídá tomu, co je definováno v určitém vzoru.
Vytvoříme soubor Example01.html a napíšeme následující kód:
Vzory s regulárními výrazy
Uživatel
Klíč:
E-mailem:
datum
Cena
Pokud odešleme formulář, ověří každé pole s ohledem na definovaný vzor a pokud není splněn, zobrazí zprávu, kterou definujeme v tagu názvu, použije také styly definované ve vlastnostech pravidla a CSS neplatné třídy, kterou HTML5 používá.
Například zadáme nesprávný e -mail:
Také zadáme nesprávné datum a uvidíme, že to neumožňuje odeslat formulář. Pokud chceme vylepšit nebo přidat vizuální efekt, můžeme pomocí CSS přidat ikonu pozadí do ovládacího prvku, kde dojde k selhání. Například k těm, které jsme již měli, přidáme následující styly css, změníme vstup na vstup [typ = 'text'], aby šablony stylů ovlivňovaly pouze textová pole, nikoli tlačítko.
Používáme následující ikony:
Vedle každého ovládacího prvku přidáme požadovanou vlastnost, například:
Při provádění příkladu vidíme, že pokud odešleme formulář s prázdnými poli, zobrazí nám požadovaná a platná pole.
Výhodou vzorů je, že nepoužíváme JQuery ani žádný jiný typ ověřování a pokud je tato možnost v prohlížeči deaktivována, omezení a pravidla, která definujeme, budou nadále fungovat. To neznamená, že odesláním formuláře se vyhneme kontrolám při zpracování dat, ať už je uložíme do databáze nebo je pošleme poštou nebo provedeme jakoukoli operaci.
Formulář s více podáními
Něco, co bylo složité udělat, je odešlete stejný formulář na dvě různé stránkyPředpokládejme jeden přihlašovací formulář, který po kliknutí na tlačítko přejde na různé stránky, kde se změní dotazy a informační proces. To se provádí definováním formační vlastnost, kde ve výchozím nastavení označujeme akci jinou možnost zpracování.
Formulář s více podáními
Uživatel:
Klíč:
Není pochyb o tom, že interakce s těmito typy vlastností a atributů výrazně usnadňuje vývoj webových stránek, aniž by bylo nutné používat externí knihovny a složité kódy javascriptu.
Jako návrháři a vývojáři obvykle zjistíme, že skript má určitou monotónnost ke strukturování html a ověřování, zejména k psaní ověřovacích pravidel a následnému zobrazení uživatele v případě selhání. HTML 5 zavádí tyto nové atributy, vstupní typy a další prvky, takže musíme psát méně kódu a více se soustředit na sémantiku než syntaxi.
Tato pravidla fungují ve všech prohlížečích, nezávisle na operačním systému a k přizpůsobení různým systémům nebo zařízením nepotřebujeme používat jiné knihovny nebo hacky. Viděli jsme několik atributů formuláře, které pomáhají zlepšit uživatelské prostředí a ušetřit čas na vývoj. Některé atributy zatím nefungují ve všech prohlížečích.
