Úvod do overenia obmedzenia HTML5

Interaktívne webové stránky a aplikácie sa nedajú predstaviť bez formulárov, ktoré nám umožňujú spojiť s našimi používateľmi, a získať údaje potrebujeme, aby sme s nimi zabezpečili hladké transakcie. Potrebujeme platný vstup používateľa, ale musíme ho nadobudnúť takým spôsobom neporušuje našich používateľov príliš veľa.

Zatiaľ čo môžeme zlepšiť použiteľnosť našich formulárov pomocou inteligentne vybraných návrhových vzorov UX, HTML5 má tiež natívny mechanizmus na overovanie platnosti, ktorý nám umožňuje chyby vstupného chyby priamo v prednej časti.

V tomto príspevku sa budeme sústreďovať preverovanie obmedzenia poskytované prehliadačom, a pozrite sa, ako môžu vývojári frontendu zabezpečiť platný vstup používateľa pomocou HTML5.

Prečo potrebujeme validáciu vstupného rozhrania

Vstupné overenie má dva hlavné ciele. Obsah, ktorý dostávame, musí byť:

1. Užitočné

Potrebujeme použiteľné dáta, s ktorými môžeme pracovať. Musíme prinútiť ľudí vstúpiť realistické údaje v správnom formáte. Napríklad nikto, kto žije dnes, sa narodil pred 200 rokmi. Získanie takýchto údajov sa môže na prvýkrát zdajú byť zábavné, ale z dlhodobého hľadiska je to nepríjemné a našu databázu obsadzuje zbytočnými dátami.

2. Zabezpečte

Pri odvolávaní sa na bezpečnosť to znamená, že musíme zabrániť vniknutiu škodlivého obsahu - či už úmyselne alebo náhodou.

Je možné dosiahnuť užitočnosť (získavanie primeraných údajov) len na strane klienta, tím backendov nemôže príliš pomôcť. Dosiahnuť zabezpečenia, vývojári na front a backend potrebujú spolupracovať.

Ak vývojári frontend správne overujú vstup na strane klienta, backendový tím sa bude musieť zaoberať oveľa menej zraniteľnými miestami. Hackovanie (stránka) často zahŕňa odosielanie ďalších údajov, alebo údaje v nesprávnom formáte. Vývojári môžu bojovať s bezpečnostnými dierami, ako sú tieto, úspešne bojovať z front-end.

Napríklad táto bezpečnostná príručka PHP odporúča skontrolovať všetko, čo môžeme na strane klienta. Zdôrazňujú dôležitosť validácie vstupu frontend pomocou mnohých príkladov, ako napríklad:

"Overovanie vstupov funguje najlepšie s extrémne obmedzenými hodnotami, napríklad keď niečo musí byť celé číslo alebo alfanumerický reťazec alebo HTTP URL."

Pri overovaní vstupov frontend je našou úlohou ukladať primerané obmedzenia na vstup používateľa. Funkcia overenia obmedzenia HTML5 nám poskytuje prostriedky na to.

Validácia obmedzenia HTML5

Pred vývojom HTML5 boli vývojári frontend obmedzené na overenie vstupného užívateľa pomocou jazyka JavaScript, čo bolo zdĺhavé a náchylné na chyby. Na zlepšenie validácie formulára na strane klienta HTML5 zaviedol a overenie obmedzenia algoritmus, ktorý beží v moderných prehliadačoch a kontroluje platnosť odoslaného vstupu.

Ak chcete vykonať hodnotenie, algoritmus používa validačné atribúty vstupných prvkov, ako napr , </code>, a <code><select></code>. Ak chcete vedieť, ako sa stane krok za krokom validácia obmedzenia v prehliadači, prečítajte si tento dokument WhatWG.</p> <p>Vďaka funkcii overovania pravidiel HTML5 môžeme vykonať všetky <strong>štandardné úlohy overovania vstupov</strong> na strane klienta <strong>bez jazyka JavaScript, iba s HTML5</strong>.</p> <p>Ak chcete vykonať zložitejšie úlohy súvisiace s validáciou, HTML5 nám poskytuje a <strong>Rozhranie API pre validáciu obmedzení JavaScript</strong> môžeme použiť na nastavenie vlastných skriptov na overenie.</p> <h4>Overenie pomocou sémantických typov vstupov</h4> <p>HTML5 predstavil <strong>sémantických typov vstupov</strong> ktoré okrem uvedenia významu prvku pre užívateľských agentov môžu byť tiež použité <strong>overiť vstup používateľa</strong> obmedzením používateľov na určitý vstupný formát.</p> <p>Okrem typov vstupov, ktoré už existovali pred HTML5 (<code>text</code>, <code>heslo</code>, <code>Predložiť</code>, <code>resetovať</code>, <code>rádio</code>, <code>checkbox</code>, <code>gombík</code>, <code>skrytý</code>), môžeme použiť aj nasledujúce <strong>sémantické typy vstupov HTML5</strong>: <code>e-mail</code>,<code>tel</code>,<code>url</code>,<code>číslo</code>,<code>čas</code>,<code>dátum</code>,<code>Dátum Čas</code>,<code>datetime-local</code>, <code>mesiac</code>,<code>týždeň</code>, <code>rozsah</code>, <code>Vyhľadávanie</code>,<code>farba</code>.</p> <p>Môžeme bezpečne použiť vstupné typy HTML5 so staršími prehliadačmi, pretože sa budú chovať ako <code><input type="text"></code> v prehliadačoch, ktoré ich nepodporujú.</p> <p>Pozrime sa, čo sa stane, keď používateľ zadá nesprávny typ vstupu. Povedzme, že sme vytvorili e-mailové pole s nasledujúcim kódom:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Tvoj email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Keď používateľ zadá reťazec, ktorý nepoužíva formát e-mailu, algoritmus overenia obmedzenia <strong>formulár nepredloží</strong>, a <strong>zobrazí chybové hlásenie</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Rovnaké pravidlo platí aj pre iné typy vstupov, napríklad pre <code>type = "url"</code> môžu používatelia odoslať iba vstup, ktorý nasleduje po formáte URL (začína sa protokolom, ako je napr <code>http: //</code> alebo <code>ftp: //</code>).</p> <p>Niektoré typy vstupov používajú dizajn <strong>neumožňuje ani používateľom zadávať nesprávny vstupný formát</strong>, napríklad <code>farba</code> a <code>rozsah</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Farba pozadia:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Ak použijeme <code>farba</code> typ vstupu je používateľ obmedzený buď na výber farby zo výberu farieb alebo na zostavení s predvolenou čiernou farbou. Vstupné pole je <strong>obmedzené konštrukciou</strong>, preto neopúšťa veľkú šancu na chybu používateľa.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Keď je to vhodné, stojí za to zvážiť použitie <code><select></code> Značka HTML, ktorá funguje podobne ako tie typy vstupov obmedzené podľa návrhu; umožňuje používateľom vybrať si z rozbaľovacieho zoznamu.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Váš obľúbený ovocie:</label> <select name="fruit"> <option value="apple">jablko</option> <option value="pear">hruška</option> <option value="orange">oranžový</option> <option value="raspberry">malina</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Použite atribúty Validácia HTML5</h4> <p>Použitie typov sémantických vstupov nastavuje určité obmedzenia na to, čo môžu používatelia odosielať, ale v mnohých prípadoch chceme ísť trochu ďalej. Toto je prípad, kedy <strong>atribúty súvisiace s validáciou</strong> z <code><input></code> značka nám môže pomôcť.</p> <p>Atribúty súvisiace s validáciou patria k určitým typom vstupov (nemôžu byť použité na <em>všetko</em> typy), na ktoré ukladajú ďalšie obmedzenia.</p> <h5>1. <code>požadovaný</code> na získanie platného vstupu všetkými prostriedkami</h5> <p> <code>požadovaný</code> atribút je najznámejší atribút validácie HTML. Je to <strong>booleovský atribút</strong> čo to znamená <strong>nemá žiadnu hodnotu</strong>, jednoducho ju musíme vložiť do vnútra <code><input></code> značku, ak ju chceme použiť:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Ak používateľ zabudne zadať hodnotu do požadovaného vstupného poľa, prehliadač <strong>zobrazí chybové hlásenie</strong> že ich varuje, aby vyplnili pole, a oni <strong>nemôže odoslať formulár</strong> kým neposkytnú platný vstup. Preto je dôležité vždy <strong>vizuálne</strong> povinné polia používateľom.</p> <p> <code>požadovaný</code> atribút môže byť <strong>použitý spolu s nasledujúcimi vstupnými typmi</strong>: <code>text</code>, <code>Vyhľadávanie</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code>, <code>heslo</code>, <code>dátum</code>, <code>Dátum Čas</code>, <code>datetime-local</code>, <code>mesiac</code>, <code>týždeň</code>,<code>čas</code>, <code>číslo</code>, <code>checkbox</code>, <code>rádio</code>, <code>súbor</code>, plus s <code><textarea></code>a <code><select></code> HTML tagy.</p> <h5>2. <code>min</code>, <code>max</code> a <code>krok</code> pre overovanie čísel</h5> <p> <code>min</code>, <code>max</code> a <code>krok</code> atribúty nám umožňujú <strong>obmedzenia počtu vstupných polí</strong>. Môžu byť použité spolu s <code>rozsah</code>, <code>číslo</code>, <code>dátum</code>, <code>mesiac</code>, <code>týždeň</code>, <code>Dátum Čas</code>, <code>datetime-local</code>, a <code>čas</code> typy vstupov.</p> <p> <code>min</code> a <code>max</code> atribúty poskytujú skvelý spôsob, ako ľahko <strong>vylúčiť neprimerané údaje</strong>. Napríklad uvedený príklad núti používateľov, aby predložili vek medzi 18 a 120 rokov.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tvoj vek:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Keď algoritmus validácie obmedzenia narazí na vstup používateľa menšie ako <code>min</code>, alebo väčší ako <code>max</code> hodnotu, zabraňuje tomu, aby sa dostal k zadnej strane a vráti chybové hlásenie.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>krok</code> atribút <strong>určuje číselný interval</strong> medzi zákonnými hodnotami vstupného poľa. Napríklad, ak chceme, aby používatelia zvolili iba z prechodných rokov, môžeme ich pridať <code>krok = "4"</code> atribút do poľa. V nižšie uvedenom príklade som použil <code>číslo</code> typ vstupu, pretože neexistuje žiadny <code>type = "year"</code> v HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Váš obľúbený prestupný rok:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Vďaka prednastaveným obmedzeniam môžu užívatelia vybrať len z prechodných rokov medzi rokmi 1972 a 2016, ak používajú malú šípku nahor, ktorá prichádza s <code>číslo</code> typ vstupu. Môžu tiež zadávať hodnotu manuálne do vstupného poľa, ale v prípade, že nespĺňa obmedzenia, prehliadač vráti chybovú správu.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maximálna dĺžka</code> pre overenie dĺžky textu</h5> <p> <code>maximálna dĺžka</code> atribút umožňuje <strong>nastavte maximálnu dĺžku znakov</strong> pre textové vstupné polia. Môže byť použitý spolu s <code>text</code>, <code>Vyhľadávanie</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code> a <code>heslo</code> typy vstupov a <code><textarea></code> Značku HTML.</p> <p> <code>maximálna dĺžka</code> atribút môže byť vynikajúcim riešením pre polia telefónneho čísla, ktoré nemôžu mať viac ako určitý počet znakov, alebo pre formuláre kontaktov, kde nechceme, aby používatelia písali viac ako určitú dĺžku.</p> <p>Útržok kódu ukazuje príklad pre druhý, obmedzuje používateľské správy na 500 znakov. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Správa (max. 500 znakov):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

maximálna dĺžka atribút nevracia chybové hlásenie, ale prehliadač jednoducho neumožňuje používateľom písať viac ako zadané číslo znaku. Preto je veľmi dôležité informovať používateľov o obmedzení, inak nechápu, prečo nemôžu pokračovať v písaní.

 
 * Tvoje heslo: