30 KiB

Raw Blame History Unescape Escape

Vytvorenie bankovej aplikácie, časť 2: Vytvorenie prihlasovacieho a registračného formulára

Kvíz pred prednáškou

Už ste niekedy vyplnili online formulár, ktorý odmietol formát vašej e-mailovej adresy? Alebo ste stratili všetky informácie po kliknutí na tlačidlo odoslať? Všetci sme sa stretli s týmito frustrujúcimi skúsenosťami.

Formuláre sú mostom medzi vašimi používateľmi a funkciami vašej aplikácie. Rovnako ako opatrné protokoly, ktoré používajú leteckí dispečeri na bezpečné navádzanie lietadiel na ich cieľové miesta, dobre navrhnuté formuláre poskytujú jasnú spätnú väzbu a zabraňujú nákladným chybám. Zlé formuláre, na druhej strane, môžu odradiť používateľov rýchlejšie ako nedorozumenie na rušnom letisku.

V tejto lekcii premeníme vašu statickú bankovú aplikáciu na interaktívnu aplikáciu. Naučíte sa vytvárať formuláre, ktoré overujú vstupy používateľov, komunikujú so servermi a poskytujú užitočnú spätnú väzbu. Predstavte si to ako vytvorenie ovládacieho rozhrania, ktoré umožňuje používateľom navigovať funkcie vašej aplikácie.

Na konci budete mať kompletný systém prihlasovania a registrácie s validáciou, ktorý používateľov vedie k úspechu namiesto frustrácie.

Predpoklady

Predtým, než začneme vytvárať formuláre, uistime sa, že máte všetko správne nastavené. Táto lekcia nadväzuje presne tam, kde sme skončili v predchádzajúcej, takže ak ste preskočili dopredu, možno budete chcieť vrátiť sa späť a najskôr nastaviť základy.

Požadované nastavenie

Komponent	Stav	Popis
HTML šablóny	✅ Požadované	Základná štruktúra bankovej aplikácie
Node.js	✅ Požadované	JavaScript runtime pre server
Bankový API server	✅ Požadované	Backendová služba na ukladanie dát

💡 Tip pre vývoj: Budete súčasne spúšťať dva samostatné servery – jeden pre vašu front-end bankovú aplikáciu a druhý pre backendový API. Toto nastavenie odráža reálny vývoj, kde front-end a back-end služby fungujú nezávisle.

Konfigurácia servera

Vaše vývojové prostredie bude zahŕňať:

Frontend server: Poskytuje vašu bankovú aplikáciu (zvyčajne port 3000)
Backend API server: Spracováva ukladanie a získavanie dát (port 5000)
Oba servery môžu bežať súčasne bez konfliktov

Testovanie pripojenia k API:

curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"

Ak vidíte odpoveď s verziou API, môžete pokračovať!

Pochopenie HTML formulárov a ovládacích prvkov

HTML formuláre sú spôsob, akým používatelia komunikujú s vašou webovou aplikáciou. Predstavte si ich ako telegrafný systém, ktorý spájal vzdialené miesta v 19. storočí – sú to komunikačné protokoly medzi úmyslom používateľa a odpoveďou aplikácie. Keď sú navrhnuté premyslene, zachytávajú chyby, usmerňujú formátovanie vstupov a poskytujú užitočné návrhy.

Moderné formuláre sú oveľa sofistikovanejšie ako základné textové vstupy. HTML5 zaviedlo špecializované typy vstupov, ktoré automaticky spracovávajú validáciu e-mailov, formátovanie čísel a výber dátumov. Tieto vylepšenia prospievajú prístupnosti aj mobilným používateľským skúsenostiam.

Základné prvky formulára

Stavebné bloky, ktoré potrebuje každý formulár:

<!-- Basic form structure -->
<form id="userForm" method="POST">
  <label for="username">Username</label>
  <input id="username" name="username" type="text" required>
  
  <button type="submit">Submit</button>
</form>

Čo tento kód robí:

Vytvára kontajner formulára s jedinečným identifikátorom
Určuje HTTP metódu na odoslanie dát
Priraďuje štítky k vstupom pre prístupnosť
Definuje tlačidlo na odoslanie formulára

Moderné typy vstupov a atribúty

Typ vstupu	Účel	Príklad použitia
`text`	Všeobecný textový vstup	`<input type="text" name="username">`
`email`	Validácia e-mailu	`<input type="email" name="email">`
`password`	Skrytý textový vstup	`<input type="password" name="password">`
`number`	Číselný vstup	`<input type="number" name="balance" min="0">`
`tel`	Telefónne čísla	`<input type="tel" name="phone">`

💡 Výhoda moderného HTML5: Používanie špecifických typov vstupov poskytuje automatickú validáciu, vhodné mobilné klávesnice a lepšiu podporu prístupnosti bez dodatočného JavaScriptu!

Typy tlačidiel a ich správanie

<!-- Different button behaviors -->
<button type="submit">Save Data</button>     <!-- Submits the form -->
<button type="reset">Clear Form</button>    <!-- Resets all fields -->
<button type="button">Custom Action</button> <!-- No default behavior -->

Čo robí každý typ tlačidla:

Tlačidlá na odoslanie: Spúšťajú odoslanie formulára a posielajú dáta na určený endpoint
Tlačidlá na resetovanie: Obnovujú všetky polia formulára na ich počiatočný stav
Bežné tlačidlá: Neposkytujú žiadne predvolené správanie, vyžadujú vlastný JavaScript na funkčnosť

⚠️ Dôležitá poznámka: Element <input> je samouzatvárací a nevyžaduje uzatváraciu značku. Moderná najlepšia prax je písať <input> bez lomky.

Vytvorenie prihlasovacieho formulára

Teraz vytvoríme praktický prihlasovací formulár, ktorý demonštruje moderné HTML praktiky. Začneme základnou štruktúrou a postupne ju vylepšíme o funkcie prístupnosti a validácie.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm" novalidate>
      <div class="form-group">
        <label for="username">Username</label>
        <input id="username" name="user" type="text" required 
               autocomplete="username" placeholder="Enter your username">
      </div>
      <button type="submit">Login</button>
    </form>
  </section>
</template>

Rozdelenie toho, čo sa tu deje:

Štruktúruje formulár pomocou semantických HTML5 prvkov
Zoskupuje súvisiace prvky pomocou div kontajnerov s významnými triedami
Priraďuje štítky k vstupom pomocou atribútov for a id
Zahŕňa moderné atribúty ako autocomplete a placeholder pre lepší UX
Pridáva novalidate na spracovanie validácie pomocou JavaScriptu namiesto predvolených nastavení prehliadača

Význam správnych štítkov

Prečo sú štítky dôležité pre moderný webový vývoj:

graph TD
    A[Label Element] --> B[Screen Reader Support]
    A --> C[Click Target Expansion]
    A --> D[Form Validation]
    A --> E[SEO Benefits]
    
    B --> F[Accessible to all users]
    C --> G[Better mobile experience]
    D --> H[Clear error messaging]
    E --> I[Better search ranking]

Čo dosahujú správne štítky:

Umožňujú čítačkám obrazovky jasne oznamovať polia formulára
Rozširujú klikateľnú oblasť (kliknutie na štítok zaostrí vstup)
Zlepšujú mobilnú použiteľnosť s väčšími dotykovými cieľmi
Podporujú validáciu formulára s významnými chybovými správami
Zvyšujú SEO tým, že poskytujú semantický význam prvkom formulára

🎯 Cieľ prístupnosti: Každý vstup formulára by mal mať priradený štítok. Táto jednoduchá prax robí vaše formuláre použiteľnými pre všetkých, vrátane používateľov so zdravotným postihnutím, a zlepšuje zážitok pre všetkých používateľov.

Vytvorenie registračného formulára

Registračný formulár vyžaduje podrobnejšie informácie na vytvorenie kompletného používateľského účtu. Vytvorme ho s modernými funkciami HTML5 a vylepšenou prístupnosťou.

<hr/>
<h2>Register</h2>
<form id="registerForm" novalidate>
  <div class="form-group">
    <label for="user">Username</label>
    <input id="user" name="user" type="text" required 
           autocomplete="username" placeholder="Choose a username">
  </div>
  
  <div class="form-group">
    <label for="currency">Currency</label>
    <input id="currency" name="currency" type="text" value="$" 
           required maxlength="3" placeholder="USD, EUR, etc.">
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" placeholder="Personal savings, checking, etc.">
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" value="0" 
           min="0" step="0.01" placeholder="0.00">
  </div>
  
  <button type="submit">Create Account</button>
</form>

V uvedenom kóde sme:

Organizovali každé pole v kontajnerových divoch pre lepšie štýlovanie a rozloženie
Pridali vhodné atribúty autocomplete pre podporu automatického vyplňovania prehliadača
Zahrnuli užitočný text v placeholder na usmernenie vstupu používateľa
Nastavili rozumné predvolené hodnoty pomocou atribútu value
Použili validačné atribúty ako required, maxlength a min
Použili type="number" pre pole zostatku s podporou desatinných čísel

Preskúmanie typov vstupov a ich správania

Moderné typy vstupov poskytujú vylepšenú funkčnosť:

Funkcia	Výhoda	Príklad
`type="number"`	Číselná klávesnica na mobilných zariadeniach	Jednoduchšie zadávanie zostatku
`step="0.01"`	Kontrola presnosti desatinných čísel	Umožňuje centy v mene
`autocomplete`	Automatické vyplňovanie prehliadača	Rýchlejšie vyplňovanie formulára
`placeholder`	Kontextové nápovedy	Usmerňuje očakávania používateľa

🎯 Výzva prístupnosti: Skúste navigovať formuláre iba pomocou klávesnice! Použite Tab na presun medzi poliami, Space na zaškrtnutie políčok a Enter na odoslanie. Táto skúsenosť vám pomôže pochopiť, ako čítačky obrazovky interagujú s vašimi formulármi.

Pochopenie metód odosielania formulára

Keď niekto vyplní váš formulár a klikne na odoslanie, tieto dáta musia niekam ísť – zvyčajne na server, ktorý ich uloží. Existuje niekoľko rôznych spôsobov, ako sa to môže stať, a vedieť, ktorý z nich použiť, vám môže ušetriť neskoršie problémy.

Pozrime sa, čo sa vlastne stane, keď niekto klikne na tlačidlo odoslať.

Predvolené správanie formulára

Najprv si všimnime, čo sa stane pri základnom odoslaní formulára:

Otestujte svoje aktuálne formuláre:

Kliknite na tlačidlo Registrovať vo vašom formulári
Sledujte zmeny v adresnom riadku vášho prehliadača
Všimnite si, ako sa stránka obnoví a dáta sa zobrazia v URL

Porovnanie HTTP metód

graph TD
    A[Form Submission] --> B{HTTP Method}
    B -->|GET| C[Data in URL]
    B -->|POST| D[Data in Request Body]
    
    C --> E[Visible in address bar]
    C --> F[Limited data size]
    C --> G[Bookmarkable]
    
    D --> H[Hidden from URL]
    D --> I[Large data capacity]
    D --> J[More secure]

Pochopenie rozdielov:

Metóda	Použitie	Miesto dát	Úroveň bezpečnosti	Limit veľkosti
`GET`	Vyhľadávacie dotazy, filtre	Parametre URL	Nízka (viditeľné)	~2000 znakov
`POST`	Používateľské účty, citlivé dáta	Telo požiadavky	Vyššia (skryté)	Žiadny praktický limit

Pochopenie základných rozdielov:

GET: Pridáva dáta formulára do URL ako parametre dotazu (vhodné pre vyhľadávacie operácie)
POST: Zahrňuje dáta do tela požiadavky (nevyhnutné pre citlivé informácie)
Obmedzenia GET: Obmedzenia veľkosti, viditeľné dáta, trvalá história prehliadača
Výhody POST: Veľká kapacita dát, ochrana súkromia, podpora nahrávania súborov

💡 Najlepšia prax: Používajte GET pre vyhľadávacie formuláre a filtre (získavanie dát), používajte POST pre registráciu používateľov, prihlasovanie a vytváranie dát.

Konfigurácia odosielania formulára

Nastavme váš registračný formulár tak, aby správne komunikoval s backendovým API pomocou metódy POST:

<form id="registerForm" action="//localhost:5000/api/accounts" 
      method="POST" novalidate>

Čo táto konfigurácia robí:

Smeruje odoslanie formulára na váš API endpoint
Používa metódu POST na bezpečný prenos dát
Zahŕňa novalidate na spracovanie validácie pomocou JavaScriptu

Testovanie odoslania formulára

Postupujte podľa týchto krokov na testovanie vášho formulára:

Vyplňte registračný formulár svojimi údajmi
Kliknite na tlačidlo "Vytvoriť účet"
Sledujte odpoveď servera vo vašom prehliadači

Čo by ste mali vidieť:

Prehliadač presmeruje na URL endpointu API
JSON odpoveď obsahujúca vaše novo vytvorené údaje účtu
Potvrdenie servera, že účet bol úspešne vytvorený

🧪 Čas na experiment: Skúste sa zaregistrovať znova s rovnakým používateľským menom. Akú odpoveď dostanete? To vám pomôže pochopiť, ako server spracováva duplicitné dáta a chybové podmienky.

Pochopenie JSON odpovedí

Keď server úspešne spracuje váš formulár:

{
  "user": "john_doe",
  "currency": "$",
  "description": "Personal savings",
  "balance": 100,
  "id": "unique_account_id"
}

Táto odpoveď potvrdzuje:

Vytvorenie nového účtu s vašimi špecifikovanými údajmi
Priradenie jedinečného identifikátora na budúce použitie
Vrátenie všetkých informácií o účte na overenie
Indikáciu úspešného uloženia do databázy

Moderné spracovanie formulárov pomocou JavaScriptu

Tradičné odosielanie formulárov spôsobuje úplné obnovenie stránky, podobne ako skoré vesmírne misie vyžadovali úplné resetovanie systému na korekciu kurzu. Tento prístup narúša používateľskú skúsenosť a stráca stav aplikácie.

Spracovanie formulárov pomocou JavaScriptu funguje ako nepretržité navigačné systémy používané modernými kozmickými loďami – umožňuje robiť úpravy v reálnom čase bez straty navigačného kontextu. Môžeme zachytiť odoslanie formulára, poskytnúť okamžitú spätnú väzbu, elegantne spracovať chyby a aktualizovať rozhranie na základe odpovedí servera, pričom zachováme pozíciu používateľa v aplikácii.

Prečo sa vyhnúť obnovovaniu stránky?

sequenceDiagram
    participant User
    participant SPA
    participant Server
    
    User->>SPA: Submits form
    SPA->>Server: AJAX request
    Server-->>SPA: JSON response
    SPA->>User: Updates interface
    
    Note over User,SPA: No page reload!

Výhody spracovania formulárov pomocou JavaScriptu:

Zachováva stav aplikácie a kontext používateľa
Poskytuje okamžitú spätnú väzbu a indikátory načítania
Umožňuje dynamické spracovanie chýb a validáciu
Vytvára plynulé, aplikáciám podobné používateľské skúsenosti
Umožňuje podmienenú logiku na základe odpovedí servera

Prechod z tradičných na moderné formuláre

Výzvy tradičného prístupu:

Presmerovanie používateľov mimo vašu aplikáciu
Strata aktuálneho stavu aplikácie a kontextu
Vyžaduje úplné obnovenie stránky pre jednoduché operácie
Poskytuje obmedzenú kontrolu nad spätnou väzbou používateľa

Výhody moderného prístupu pomocou JavaScriptu:

Udržuje
Poskytuje podrobné chybové hlásenia na ladenie
Vracia konzistentnú štruktúru dát pre úspešné aj chybové prípady

Sila moderného Fetch API

Výhody Fetch API oproti starším metódam:

Funkcia	Výhoda	Implementácia
Založené na Promise	Čistý asynchrónny kód	`await fetch()`
Prispôsobenie požiadaviek	Plná kontrola nad HTTP	Hlavičky, metódy, telo
Spracovanie odpovedí	Flexibilné parsovanie dát	`.json()`, `.text()`, `.blob()`
Spracovanie chýb	Komplexné zachytávanie chýb	Bloky Try/catch

🎥 Viac informácií: Tutoriál o Async/Await - Pochopenie asynchrónnych JavaScript vzorcov pre moderný webový vývoj.

Kľúčové koncepty pre komunikáciu so serverom:

Asynchrónne funkcie umožňujú pozastaviť vykonávanie a čakať na odpovede zo servera
Kľúčové slovo await robí asynchrónny kód čitateľným ako synchronný
Fetch API poskytuje moderné, na Promise založené HTTP požiadavky
Spracovanie chýb zabezpečuje, že vaša aplikácia reaguje elegantne na problémy so sieťou

Dokončenie funkcie registrácie

Spojme všetko dohromady s kompletnou, produkčne pripravenou funkciou registrácie:

async function register() {
  const registerForm = document.getElementById('registerForm');
  const submitButton = registerForm.querySelector('button[type="submit"]');
  
  try {
    // Show loading state
    submitButton.disabled = true;
    submitButton.textContent = 'Creating Account...';
    
    // Process form data
    const formData = new FormData(registerForm);
    const jsonData = JSON.stringify(Object.fromEntries(formData));
    
    // Send to server
    const result = await createAccount(jsonData);
    
    if (result.error) {
      console.error('Registration failed:', result.error);
      alert(`Registration failed: ${result.error}`);
      return;
    }
    
    console.log('Account created successfully!', result);
    alert(`Welcome, ${result.user}! Your account has been created.`);
    
    // Reset form after successful registration
    registerForm.reset();
    
  } catch (error) {
    console.error('Unexpected error:', error);
    alert('An unexpected error occurred. Please try again.');
  } finally {
    // Restore button state
    submitButton.disabled = false;
    submitButton.textContent = 'Create Account';
  }
}

Táto vylepšená implementácia zahŕňa:

Poskytuje vizuálnu spätnú väzbu počas odosielania formulára
Deaktivuje tlačidlo odoslania, aby sa zabránilo duplicitným odoslaním
Spracováva očakávané aj neočakávané chyby elegantne
Zobrazuje užívateľsky prívetivé správy o úspechu a chybách
Resetuje formulár po úspešnej registrácii
Obnovuje stav UI bez ohľadu na výsledok

Testovanie vašej implementácie

Otvorte nástroje pre vývojárov v prehliadači a otestujte registráciu:

Otvorte konzolu prehliadača (F12 → karta Console)
Vyplňte registračný formulár
Kliknite na "Vytvoriť účet"
Pozorujte správy v konzole a spätnú väzbu pre používateľa

Čo by ste mali vidieť:

Stav načítania sa zobrazí na tlačidle odoslania
Logy v konzole zobrazujú podrobné informácie o procese
Správa o úspechu sa zobrazí, keď sa účet úspešne vytvorí
Formulár sa automaticky resetuje po úspešnom odoslaní

🔒 Bezpečnostné upozornenie: Momentálne dáta cestujú cez HTTP, čo nie je bezpečné pre produkciu. V reálnych aplikáciách vždy používajte HTTPS na šifrovanie prenosu dát. Viac informácií o bezpečnosti HTTPS a prečo je dôležitá na ochranu údajov používateľov.

Komplexná validácia formulára

Validácia formulára zabraňuje frustrujúcemu zážitku z objavenia chýb až po odoslaní. Podobne ako viacnásobné redundantné systémy na Medzinárodnej vesmírnej stanici, efektívna validácia využíva viac vrstiev bezpečnostných kontrol.

Optimálny prístup kombinuje validáciu na úrovni prehliadača pre okamžitú spätnú väzbu, validáciu pomocou JavaScriptu pre lepší užívateľský zážitok a validáciu na strane servera pre bezpečnosť a integritu dát. Táto redundancia zabezpečuje spokojnosť používateľov aj ochranu systému.

Pochopenie vrstiev validácie

graph TD
    A[User Input] --> B[HTML5 Validation]
    B --> C[Custom JavaScript Validation]
    C --> D[Client-Side Complete]
    D --> E[Server-Side Validation]
    E --> F[Data Storage]
    
    B -->|Invalid| G[Browser Error Message]
    C -->|Invalid| H[Custom Error Display]
    E -->|Invalid| I[Server Error Response]

Stratégia viacvrstvovej validácie:

HTML5 validácia: Okamžité kontroly na úrovni prehliadača
JavaScript validácia: Vlastná logika a užívateľský zážitok
Serverová validácia: Konečná kontrola bezpečnosti a integrity dát
Progresívne vylepšenie: Funguje aj keď je JavaScript deaktivovaný

HTML5 validačné atribúty

Moderné nástroje na validáciu, ktoré máte k dispozícii:

Atribút	Účel	Príklad použitia	Správanie prehliadača
`required`	Povinné polia	`<input required>`	Zabraňuje prázdnemu odoslaniu
`minlength`/`maxlength`	Limity dĺžky textu	`<input maxlength="20">`	Uplatňuje obmedzenia počtu znakov
`min`/`max`	Číselné rozsahy	`<input min="0" max="1000">`	Validuje hranice čísel
`pattern`	Vlastné pravidlá regex	`<input pattern="[A-Za-z]+">`	Zhoduje sa so špecifickými formátmi
`type`	Validácia typu dát	`<input type="email">`	Validácia špecifická pre formát

CSS validácia štýlovania

Vytvorte vizuálnu spätnú väzbu pre validačné stavy:

/* Valid input styling */
input:valid {
  border-color: #28a745;
  background-color: #f8fff9;
}

/* Invalid input styling */
input:invalid {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* Focus states for better accessibility */
input:focus:valid {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

input:focus:invalid {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

Čo tieto vizuálne podnety dosahujú:

Zelené okraje: Označujú úspešnú validáciu, ako zelené svetlá na riadiacom stredisku
Červené okraje: Signalizujú chyby validácie, ktoré vyžadujú pozornosť
Zvýraznenie zamerania: Poskytuje jasný vizuálny kontext pre aktuálnu polohu vstupu
Konzistentné štýlovanie: Vytvára predvídateľné vzory rozhrania, ktoré sa používateľ môže naučiť

💡 Tip: Použite CSS pseudo-triedy :valid a :invalid na okamžitú vizuálnu spätnú väzbu počas písania, čím vytvoríte responzívne a užitočné rozhranie.

Implementácia komplexnej validácie

Vylepšime váš registračný formulár robustnou validáciou, ktorá poskytuje vynikajúci užívateľský zážitok a kvalitu dát:

<form id="registerForm" method="POST" novalidate>
  <div class="form-group">
    <label for="user">Username <span class="required">*</span></label>
    <input id="user" name="user" type="text" required 
           minlength="3" maxlength="20" 
           pattern="[a-zA-Z0-9_]+" 
           autocomplete="username"
           title="Username must be 3-20 characters, letters, numbers, and underscores only">
    <small class="form-text">Choose a unique username (3-20 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="currency">Currency <span class="required">*</span></label>
    <input id="currency" name="currency" type="text" required 
           value="$" maxlength="3" 
           pattern="[A-Z$€£¥₹]+" 
           title="Enter a valid currency symbol or code">
    <small class="form-text">Currency symbol (e.g., $, €, £)</small>
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" 
           placeholder="Personal savings, checking, etc.">
    <small class="form-text">Optional description (up to 100 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" 
           value="0" min="0" step="0.01" 
           title="Enter a positive number for your starting balance">
    <small class="form-text">Initial account balance (minimum $0.00)</small>
  </div>
  
  <button type="submit">Create Account</button>
</form>

Pochopenie vylepšenej validácie:

Kombinuje indikátory povinných polí s užitočnými popismi
Zahŕňa atribúty pattern na validáciu formátu
Poskytuje atribúty title pre prístupnosť a tooltipy
Pridáva pomocný text na usmernenie vstupu používateľa
Používa semantickú HTML štruktúru pre lepšiu prístupnosť

Pokročilé pravidlá validácie

Čo každé pravidlo validácie dosahuje:

Pole	Pravidlá validácie	Výhoda pre používateľa
Užívateľské meno	`required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"`	Zabezpečuje platné, unikátne identifikátory
Mena	`required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"`	Akceptuje bežné symboly mien
Zostatok	`min="0"`, `step="0.01"`, `type="number"`	Zabraňuje negatívnym zostatkom
Popis	`maxlength="100"`	Rozumné limity dĺžky

Testovanie správania validácie

Vyskúšajte tieto scenáre validácie:

Odošlite formulár s prázdnymi povinnými poliami
Zadajte užívateľské meno kratšie ako 3 znaky
Skúste špeciálne znaky v poli pre užívateľské meno
Zadajte zápornú hodnotu zostatku

Čo budete pozorovať:

Prehliadač zobrazuje natívne správy o validácii
Zmeny štýlov na základe stavov :valid a :invalid
Odoslanie formulára je zablokované, kým všetky validácie neprejdú
Zameranie sa automaticky presunie na prvé neplatné pole

Validácia na strane klienta vs na strane servera

graph LR
    A[Client-Side Validation] --> B[Instant Feedback]
    A --> C[Better UX]
    A --> D[Reduced Server Load]
    
    E[Server-Side Validation] --> F[Security]
    E --> G[Data Integrity]
    E --> H[Business Rules]
    
    A -.-> I[Both Required]
    E -.-> I

Prečo potrebujete obe vrstvy:

Validácia na strane klienta: Poskytuje okamžitú spätnú väzbu a zlepšuje užívateľský zážitok
Validácia na strane servera: Zabezpečuje bezpečnosť a rieši komplexné obchodné pravidlá
Kombinovaný prístup: Vytvára robustné, užívateľsky prívetivé a bezpečné aplikácie
Progresívne vylepšenie: Funguje aj keď je JavaScript deaktivovaný

🛡️ Bezpečnostná pripomienka: Nikdy sa nespoliehajte iba na validáciu na strane klienta! Zlomyseľní používatelia môžu obísť kontroly na strane klienta, takže validácia na strane servera je nevyhnutná pre bezpečnosť a integritu dát.

Výzva GitHub Copilot Agent 🚀

Použite režim Agent na splnenie nasledujúcej výzvy:

Popis: Vylepšite registračný formulár komplexnou validáciou na strane klienta a spätnou väzbou pre používateľa. Táto výzva vám pomôže precvičiť validáciu formulára, spracovanie chýb a zlepšenie užívateľského zážitku pomocou interaktívnej spätnej väzby.

Úloha: Vytvorte kompletný systém validácie formulára pre registračný formulár, ktorý zahŕňa: 1) Validáciu v reálnom čase pre každé pole počas písania, 2) Vlastné správy o validácii, ktoré sa zobrazujú pod každým vstupným poľom, 3) Pole na potvrdenie hesla s validáciou zhody, 4) Vizuálne indikátory (ako zelené zaškrtávacie políčka pre platné polia a červené varovania pre neplatné), 5) Tlačidlo odoslania, ktoré sa aktivuje iba vtedy, keď všetky validácie prejdú. Použite HTML5 validačné atribúty, CSS na štýlovanie validačných stavov a JavaScript na interaktívne správanie.

Viac informácií o režime agent nájdete tu.

🚀 Výzva

Zobrazte chybovú správu v HTML, ak užívateľ už existuje.

Tu je príklad, ako môže vyzerať konečná prihlasovacia stránka po menšej úprave štýlov:

Kvíz po prednáške

Prehľad a samostatné štúdium

Vývojári sa stali veľmi kreatívnymi vo svojich snahách o vytváranie formulárov, najmä pokiaľ ide o stratégie validácie. Zistite viac o rôznych prístupoch k formulárom prehliadaním CodePen; nájdete tam zaujímavé a inšpiratívne formuláre?

Zadanie

Štylizujte svoju bankovú aplikáciu

Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

30 KiB Raw Blame History Unescape Escape