HTML5 a jeho atributy pro ověřování formulářů. Užitečné úryvky HTML5

Nejběžnější značka používaná ve formulářích je . Nemá uzavírací značku. Veškeré informace, které prohlížeč potřebuje zpracovat, jsou obsaženy přímo v tagu a je specifikován pomocí různých atributů. Sémantika se výrazně liší v závislosti na hodnotě atributu typ.

Atributy značek

type Hlavní atribut, který určuje typ prvku. Pokud atribut není zadán, použije se výchozí hodnota text.
Možné hodnoty:

Ne všechny prohlížeče podporují typy přidané v HTML5.
Pokud prohlížeč nepodporuje některý z nových typů, bude předpokládat, že se jedná o .

Jak organizovat podporu pro starší prohlížeče je popsáno na příkladu data. ... ... Autocomplete="off" Zakáže automatické doplňování pro toto pole. Velmi užitečné pro jednorázová pole pro zadání kódu, captcha atd.
.setAttribute("autocomplete","off"); autofocus Automaticky přijme zaostření při načtení stránky. Hodnotu lze nastavit třemi způsoby: ... Příklad emulace vlastnosti autofocus pro starší prohlížeče. vypnuto Znepřístupní prvek. Nepřístupné položky nejsou odesílány na server. ... Příklad emulace vlastnosti autofocus pro starší prohlížeče. jméno Název pole. Každé vstupní pole, které vytvoříte, musí mít svůj jedinečný název, jinak skript neurčuje, na která pole se výsledné hodnoty vztahují. Název vstupního pole se samozřejmě musí shodovat s názvem, který je pro něj popsán ve zpracovatelském programu. ... Příklad emulace vlastnosti autofocus pro starší prohlížeče. hodnota Výchozí hodnota pole nebo štítku na tlačítku.
velikost Velikost typového pole.

maxlength Omezení počtu znaků, které lze zadat do pole typu . readonly="readonly" nebo "" Zabraňuje úpravě prvku. povinné Automaticky zkontroluje, zda je pole vyplněno.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

číslo
Tento seznam je zpočátku skrytý a zpřístupní se, když pole získá fokus nebo zadá text.

Typy prvků INPUT

Tlačítko BUTTON

Tlačítko TLAČÍTKO je určen pro ty případy, kdy potřebujete spustit nějaký skript. To znamená, že k tlačítku je připojena událost OnСlick a zavolá se požadovaná funkce. Atribut hodnota nastaví popisek na tlačítku. Atribut onclick

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

jméno

slouží pro JavaScript pojmenování tlačítka (nepřenáší se na server).

Příklad hodnota Tlačítko tlačítko SUBMIT Toto tlačítko slouží k odeslání formuláře. Ve většině prohlížečů je téměř k nerozeznání od tlačítka. Ta se sama nepřenáší, ale slouží pouze ke kontrole. Atribut pro tlačítko

PŘEDLOŽIT tlačítko SUBMIT se prakticky nepoužívá, protože je lepší použít obsluhu události onsubmit, specifikované ve značce

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

Příklad a zavolá se požadovaná funkce. Aby bylo možné přenést údaje zadané do formuláře, není v obecném případě vůbec nutné kliknout na tlačítko

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

Příklad To způsobí přenos dat. Přijmout objednávku

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

Odmítnout

Přijmout jako pozorovatel

formnovalidat lze použít k zabránění ověření hodnot formuláře. Zkouška

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

tlačítko RESET

Toto je tlačítko jasného formuláře. Po kliknutí se všechny změněné prvky vrátí na výchozí hodnotu. Používá se poměrně zřídka. V některých případech to však může být docela užitečné. Tip: Při výběru štítku tlačítka buďte opatrní RESETOVAT. Něco jako „Vymazat“, „Začít znovu“, „Vymazat vstup“ atd. by bylo zcela jasné (a hlavně intuitivní i pro figuríny). Obecně je nutné, aby uživatel neměl ani stín pochybností o účelu tohoto klíče. Resetovat
Vstupní pole TEXT Atribut, je vždy vyžadován, protože na základě tohoto parametru prohlížeč předá skriptu pár jméno=hodnota.

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

Text "Ivanov" je umístěn do vytvořeného pole jako počáteční hodnota.

Pokud uživatel neprovede žádné změny nebo klikne na tlačítko, bude skriptu odeslána hodnota Ivanov jako příjmení uživatele.

Pole pro zadání čísla ČÍSLO

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

Po zadání lze zlomkovou část oddělit buď tečkou (2.5) nebo čárkou (2.5).

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

Pokud uživatel zadá písmena, formulář nebude odeslán na server. Poslat.

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Chcete-li zvýraznit správně vyplněné povinné pole, můžete použít následující konstrukci stylu:

Můžete nastavit minimální a maximální hodnoty pole a krok změny čísla. ... Příklad emulace vlastnosti autofocus pro starší prohlížeče. Hodnota kroku může být kladná nebo záporná, ale musí být větší než 0. Pokud číslo zadané do pole nesplňuje zadaná omezení, k odeslání na server nedojde.

Chcete-li zadat libovolný krok, použijte

step="any"

Pole

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

se zobrazuje jinak: některé prohlížeče vždy zobrazují šipky, některé pouze při najetí kurzorem myši nebo aktivaci kurzoru.

Heslo

Skryté pole HIDDEN

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Jedná se o speciální (skrytý) typ textového pole. Pokud jeden skript zpracovává několik různých formulářů, můžete ve skrytém poli na každém formuláři zadat identifikátor, který vám umožní identifikovat, se kterým formulářem máte co do činění. ...Další prvky formuláře.......Další prvky formuláře...

Prohlížeč nezobrazuje skryté pole, i když jej lze zjistit, pokud prohlížeč přepnete do režimu zobrazení souboru HTML a analyzujete text webové stránky. Skrytá pole jsou užitečná, když chcete poskytnout informace, které jsou vyžadovány pro skript, ale nechcete, aby je uživatel mohl změnit. Uvědomte si však, že zkušený uživatel může uložit váš formulář do souboru, upravit jej a poté odeslat upravený formulář na server. Proto byste se při vytváření jakéhokoli zabezpečení neměli spoléhat na skrytá pole.

Skript obdrží proměnnou s názvem FormVersion, kterému bude přiřazena hodnota 1.2. Tyto informace lze použít k určení, jak zpracovat zbytek informací přijatých z formuláře. Pokud uživatel změní tuto hodnotu, může se skriptový program chovat neočekávaným způsobem.

určuje obslužnou rutinu JavaScriptu, která je volána po kliknutí na tlačítko.

Pole pro zadání e-mailové adresy

násobek

Máme tedy k dispozici různé prvky, které můžeme na formuláři použít. Můžeme do nich zadat různé hodnoty. Uživatelé však často zadávají hodnoty, které nejsou zcela správné: například se očekává zadání čísel, ale uživatel zadá písmena atd. A k prevenci a kontrole nesprávného vstupu v HTML5 existuje ověřovací mechanismus.

Výhodou použití validace v HTML5 je, že uživatel po nesprávném zadání může okamžitě obdržet chybové hlášení a provést příslušné změny zadaných údajů.

K vytvoření ověření pro prvky formuláře HTML5 se používá řada atributů:

povinné : Vyžaduje zadání hodnoty. Pro prvky textarea vyberte, zadejte (s typem text, heslo, zaškrtávací políčko, rádio, soubor, datum a čas-místní, datum, měsíc, čas, týden, číslo, e-mail, adresa URL, hledání, tel)

min a max : minimální a maximální povolené hodnoty. Pro vstupní prvek typu datetime-local, datum, měsíc, čas, týden, číslo, rozsah

vzor : Určuje vzor, ​​kterému se musí vstupní data shodovat. Pro vstupní prvek s typem textu, hesla, e-mailu, adresy URL, vyhledávání, tel

povinný atribut

Povinný atribut vyžaduje, aby byla přítomna hodnota:

Přihlášení:

Heslo:

Pokud do těchto polí nezadáme žádná data, necháme je prázdná a klikneme na tlačítko Odeslat, prohlížeč nám zobrazí chybové zprávy a data nebudou odeslána na server:

V závislosti na prohlížeči se vykreslování zprávy může mírně lišit. Okraje nesprávného vstupního pole mohou být také zbarveny červeně. Například chování při odesílání prázdných zpráv ve Firefoxu:

Atributy max. a min

Chcete-li omezit rozsah vstupních hodnot, použijte atributy max a min:

Stáří:

atribut vzoru

Atribut vzor určuje vzor, ​​se kterým by se data měla shodovat. Chcete-li definovat šablonu, jazyk tzv. . Podívejme se na nejjednodušší příklady:

Telefon:

Zde se pro zadání telefonního čísla používá regulární výraz \+\d-\d(3)-\d(3)-\d(4). To znamená, že první prvek v čísle by měl být znaménko plus +. Výraz \d představuje jakoukoli číslici od 0 do 9. Výraz \d(3) představuje tři po sobě jdoucí číslice a \d(4) představuje čtyři po sobě jdoucí číslice. To znamená, že tento výraz bude odpovídat telefonnímu číslu ve formátu „+1-234-567-8901“.

Pokud zadáme údaje, které neodpovídají tomuto vzoru, a klikneme na odeslat, prohlížeč zobrazí chybu:

Deaktivace ověřování

Ověření není vždy žádoucí; někdy je třeba jej zakázat. A v tomto případě můžeme použít buď atribut novalidate na prvku formuláře, nebo atribut formnovalidate na tlačítku Odeslat:

Telefon:

Poznámka: Protože pole jen pro čtení nemůže mít hodnotu, povinné nemá žádný vliv na vstupy se zadaným atributem jen pro čtení.

velikost

Atribut size je číselná hodnota udávající, kolik znaků má být vstupní pole široké. Hodnota musí být číslo větší než nula a výchozí hodnota je 20. Vzhledem k tomu, že šířky znaků se liší, může nebo nemusí být přesné a nemělo by se na to spoléhat; výsledný vstup může být užší nebo širší než zadaný počet znaků, v závislosti na znacích a písmu (používané nastavení písma).

Tohle ano ne nastavit limit, kolik znaků může uživatel zadat do pole. Určuje pouze přibližně, kolik jich lze najednou vidět. Chcete-li nastavit horní limit délky vstupních dat, použijte atribut.

Nestandardní atributy

Pro vstupní pole telefonního čísla jsou k dispozici následující nestandardní atributy. Obecným pravidlem je, že byste se měli vyhnout jejich používání, pokud tomu nelze pomoci.

Atribut	Popis
	Zda povolit nebo nepovolit automatické opravy při úpravách tohoto vstupního pole. Pouze Safari.
	Řetězec označující typ akce, která bude provedena, když uživatel při úpravě pole stiskne klávesu Enter nebo Return; toto se používá k určení vhodného označení pro tuto klávesu na virtuální klávesnici. Firefox pouze pro Android.

automatické opravy

Rozšíření Safari, atribut autocorrect je řetězec, který označuje, zda aktivovat automatickou opravu, když uživatel upravuje toto pole. Povolené hodnoty jsou:

Zapnuto Povolit automatickou opravu překlepů a také zpracování nahrazování textu, pokud jsou nějaké nakonfigurovány.

vypnuto Zakázat automatické opravy a nahrazování textu.

mozactionhint

Rozšíření Mozilly podporované Firefoxem pro Android, které poskytuje nápovědu, jaká akce bude provedena, pokud uživatel při úpravě pole stiskne klávesu Enter nebo Return. Tyto informace se používají k rozhodnutí, jaký typ štítku použít na klávesu Enter na virtuální klávesnici.

Povolené hodnoty jsou: go , done , next , search a send . Prohlížeč se pomocí této nápovědy rozhodne, jaký štítek umístí na klávesu Enter.

Telefonní čísla jsou velmi často shromažďovaným typem dat na webu. Při vytváření jakéhokoli druhu registrace nebo webu elektronického obchodu, například, budete pravděpodobně muset požádat uživatele o telefonní číslo, ať už pro obchodní účely nebo pro účely nouzového kontaktu. Vzhledem k tomu, jak běžně se zadávají telefonní čísla, je nešťastné, že řešení „jedna velikost pro všechny“ pro ověřování telefonních čísel není praktické.

Naštěstí můžete zvážit požadavky svého vlastního webu a sami implementovat odpovídající úroveň ověření. Podrobnosti viz níže.

Vlastní klávesnice

Jednou z hlavních výhod spočívá v tom, že mobilní prohlížeče zobrazují speciální klávesnici pro zadávání telefonních čísel. Zde je například ukázka toho, jak vypadají klávesnice na několika zařízeních.

Příklady vlastních klávesnic na mobilních zařízeních.

Firefox pro Android	WebKit iOS (Safari/Chrome/Firefox)

Jednoduchý tel. vstup

Ve své nejzákladnější podobě lze tel vstup implementovat takto:

telefonní číslo:

Tady se neděje nic magického. Při odeslání na server budou výše uvedená vstupní data reprezentována jako například telNo=+12125553151 .

Zástupné symboly

Někdy je užitečné nabídnout kontextovou nápovědu, jakou formu by měla mít vstupní data. To může být zvláště důležité, pokud design stránky nenabízí popisné štítky pro každý prvek se používá k vytváření interaktivních ovládacích prvků pro web založené formuláře za účelem přijímání dat od uživatele; k dispozici je široká škála typů vstupních dat a ovládacích widgetů v závislosti na zařízení a uživatelském agentovi."> . Toto je místo zástupné symboly vstoupit Zástupný symbol je hodnota, která demonstruje formu, jakou by hodnota měla mít, a to uvedením příkladu platné hodnoty, která se zobrazí v editačním poli, když je hodnota prvku "" . Jakmile jsou do pole vložena data, zástupný symbol zmizí. ; pokud se pole vyprázdní, zástupný symbol se znovu objeví.

Zde máme tel vstup se zástupným symbolem 123-4567-8901. Všimněte si, jak zástupný symbol mizí a znovu se objevuje při manipulaci s obsahem editačního pole.

Ovládání velikosti vstupu

Můžete ovládat nejen fyzickou délku vstupního pole, ale také minimální a maximální povolené délky pro samotný vstupní text.

Velikost fyzického vstupního prvku

Fyzickou velikost vstupního pole lze ovládat pomocí atributu size. Pomocí něj můžete určit počet znaků, které může vstupní pole zobrazit najednou. V tomto příkladu je například textové pole tel 20 znaků široké:

Délka hodnoty prvku

Velikost je oddělena od omezení délky na zadaném telefonním čísle. Pomocí atributu minlength můžete zadat minimální délku ve znacích pro zadané telefonní číslo; obdobně použijte maxlength pro nastavení maximální délky zadaného telefonního čísla.

Níže uvedený příklad vytvoří pole pro zadání telefonního čísla o šířce 20 znaků, které vyžaduje, aby obsah nebyl kratší než 9 znaků a delší než 14 znaků.

Nabízí navrhované hodnoty

Když to uděláte o krok dále, můžete poskytnout seznam výchozích hodnot telefonních čísel, ze kterých si uživatel může vybrat. Chcete-li to provést, použijte atribut seznamu. To neomezuje uživatele na tyto možnosti, ale umožňuje mu rychleji vybrat běžně používaná telefonní čísla. Nabízí také nápovědu k automatickému doplňování . Atribut seznamu určuje ID prvku, který obsahuje sadu prvky, které představují hodnoty dostupné pro jiné ovládací prvky.">

S prvkem obsahuje sadu prvky, které představují hodnoty dostupné pro jiné ovládací prvky.">