Validácia polí pre zadaní e-mailu a URL v HTML formulároch

V tomto návode sa naučíte všetky dôležité aspekty polí pre zadaní e-mailových adries a URL adries v formulároch HTML. Cieľom je ukázať vám, ako efektívne implementovať validáciu týchto vstupov a prispôsobiť štýlovanie pre rôzne stavy vstupov. Toto nielen zlepší používateľskú skúsenosť, ale aj kvalitu dát, ktoré zachytíte.

Najdôležitejšie poznatky

• Dozviete sa základné štruktúry a validácie pre e-mail a URL pomocou HTML.
• Taktiež sa dozviete, ako pomocou CSS poskytnúť vizuálny spätnú väzbu pre používateľov, keď sú vstupy neplatné.
• Je vysvetlené použitie vzorov na ďalšiu validáciu e-mailových adries a URL adries.

Krok za krokom návod

1. Vytvorenie základného poľa pre e-mail

Začnite vytvorením štandardného vstupného prvku pre e-mail. Tu musíte typ nastaviť ako "email", aby prehliadač automaticky validoval vstup.

HTML teraz spracováva vstupné pole tak, že očakáva e-mailovú adresu a pri nesprávnom vstupe poskytuje vizuálnu spätnú väzbu. Pri začatí zadávania sa pozadie mení na ružovú farbu, aby upozornilo, že niečo nie je v poriadku.

2. Validácia e-mailovej adresy

Validácia e-mailu prebieha pomocou jednoduchých pravidiel. Musí byť aspoň jeden znak „@“, nasledovaný aspoň jedným ďalším znakom. Toto je základná NLP validácia. Toto pravidlo validácie však nestačí na zaručenie existencie e-mailovej adresy.

Príkladom neplatnej e-mailovej adresy by mohlo byť „bla@“. V takejto situácii je odoslanie formulára blokované a používateľ uvidí upozornenie na chybu.

3. Použitie vzorov pre presnejšiu validáciu

Na dosiahnutie presnejšej validácie môžete použiť atribút "pattern". Pomocou regulárneho výrazu (Regex) môžete určiť, že e-mailová adresa spĺňa určité požiadavky, napríklad konkrétnu doménu.

Týmto dodatočným overením sa uistíte, že budú prijímané iba platné e-mailové adresy, napríklad iba adresy Gmailu alebo GMX.

4. Požadovaný vstup a štýlovanie

Pre zabezpečenie vyplnenia e-mailového poľa môžete pridať atribút "required". Ak sa pokúsite odoslať formulár bez vstupu, okamžite získate vizuálnu spätnú väzbu.

Na štýlovanie neplatných vstupov môžete v CSS použiť selektor ":invalid". To znamená, že sa pozadie pola zafarbí na červeno, aby sa používateľ upozornil, že vstup nie je správny.

5. Vytvorenie poľa pre URL adresy

Rovnako ako v prípade e-mailu, je dôležité vytvoriť príslušný vstupný prvok aj pre URL adresy. Nastavte typ na "url", aby prehliadač validoval aj tu vstup.

6. Validácia URL adresy

Základné požiadavky pre platnú URL adresu zahŕňajú, že musí začínať s "http://" alebo "https://" a mať aspoň jeden nasledujúci znak. Ak používateľ zadá iba „https“, nie je to dostatočné.

Rovnaký princíp platí aj pre ďalšie protokoly ako „ftp“. Ak vstup nespĺňa podmienky, prehliadač poskytne spätnú väzbu a neumožní odoslanie formulára.

7. Rozšírená validácia pomocou vzorov pre URL adresy

Na presnejšie nastavenie validácie aj pre určité vzory ako „https://www.example.com“ by ste mali použiť tiež atribút "pattern", aby ste pomohli svojim používateľom zadať správne URL adresy.

8. Používateľská priateľnosť na mobilných zariadeniach

Veľkou výhodou použitia typov "email" a "url" vo formulároch je zlepšená používateľská priateľnosť na mobilných zariadeniach. Klávesnica sa optimálne prispôsobuje, aby uľahčila používateľom zadávanie emailových adries a URL adries.

Zhrnutie

V tomto návode sme sa zaoberali hlavnými kritériami pre validáciu emailových adries a URL adries vo webových formulároch. Naučil si sa, ako vykonávať jednoduchú aj pokročilú validáciu a ako prispôsobiť používateľskú spätnú väzbu pomocou CSS s cieľom vytvoriť lepšie používateľské skúsenosti.