Selles õpetuses saate teada kõik olulisemad aspektid e-posti aadresside ja URL-ide sisestusväljade kohta HTML vormides. Eesmärk on näidata sulle, kuidas neid sisestusi tõhusalt valideerida ja kuidas erinevaid sisestamise olekuid kohandada. See mitte ainult ei paranda kasutajakogemust, vaid ka andmete kvaliteeti, mida sa kogud.
Olulisemad järeldused
- Saad aru e-posti ja URL-ide põhiolemusest ja valideerimisest HTML abil.
- Sa õpid, kuidas CSS abil pakkuda visuaalset tagasisidet kasutaja jaoks, kui sisendid pole kehtivad.
- Seletatakse lahti mustrite kasutamine e-posti aadresside ja URL-ide täiendavaks valideerimiseks.
Samm-sammuline juhend
1. E-posti sisestamise põhivälja loomine
Alusta standardse e-posti sisendi elemendi loomisega. Sul tuleb määrata tüüp "email", et brauser saaks sisendi automaatselt valideerida.
HTML töötleb nüüd sisendivälja nii, et see ootab e-posti aadressi ja annab vale sisendi korral visuaalset tagasisidet. Niipea kui kasutaja hakkab sisestama, muutub taust roosaks, et näidata midagi pole korras.
2. E-posti aadressi valideerimine
E-posti aadressi valideerimine toimub lihtsate reeglite abil. Seal peab olema vähemalt üks "@" märk, millele järgneb vähemalt üks täht. See on põhiline NLP valideerimine. Kuigi see valideerimisreegel ei taga, et e-posti aadress tegelikult eksisteerib.
Üks ebatäieliku e-posti aadressi näide oleks „bla@“. Sellisel juhul blokeeritakse vormi esitamine ja kasutaja näeb veateadet.
3. Mustrite kasutamine URL-ide täpsemaks valideerimiseks
Et saavutada täpsem valideerimine, saad kasutada atribuuti "muster". Regulaarse avaldisega saad määrata, et URL vastaks teatud nõuetele, näiteks konkreetsele domeenile.
Selle lisavalideerimisega tagad, et aktsepteeritakse ainult kehtivaid e-posti aadresse, näiteks ainult Gmaili või GMX-i aadresse.
4. Nõutav sisestus ja stiil
Tagamaks, et e-posti väli oleks täidetud, saad lisada atribuudi "nõutav". Kui kasutaja proovib vormi esitada ilma sisendita, saab ta kohe visuaalset tagasisidet.
Kehtetute sisestuste stiilimiseks CSS-is saad kasutada valijat ":kehtetu". Nii saab välja tausta punaselt, et hoiatada kasutajat, et sisestus pole õige.
5. URL-ide lisamise sisestusvälja loomine
Samamoodi nagu e-posti puhul, on oluline luua vastav sisendelement ka URL-ide jaoks. Määra tüüp „url“, et brauser valideeriks ka siin sisendi.
6. URL-ide valideerimine
Kehtivate URL-ide põhinõuded hõlmavad seda, et need peaksid algama „http://“ või „https://“ ning neil peaks olema vähemalt üks järgnev täht. Kui kasutaja sisestab ainult „https“, siis see pole piisav.
Sama põhimõte kehtib ka teiste protokollide, nagu „ftp“, puhul. Kui sisend ei vasta nõuetele, annab brauser tagasisidet ega lase vormi esitada.
7. Täpsema URL-de valideerimise jaoks mustrite kasutamine
Et valideerida ka teatud mustreid, näiteks „https://www.example.com“, täpsemalt, peaksid kasutama ka "muster" atribuuti, et aidata kasutajatel sisestada õigeid URL-e.
8. Kasutajasõbralikkus mobiilsetel seadmetel
Suureks eeliseks "email" ja "url" tüüpide kasutamisel vormides on parem kasutajasõbralikkus mobiilsetel seadmetel. Klaviatuur on optimaalselt kohandatud, et hõlbustada kasutajatele e-posti aadresside ja URL-ide sisestamist.
Kokkuvõte
Antud juhendis käsitlesime olulisemaid kriteeriume e-posti aadresside ja URL-ide valideerimiseks veebi vormides. Oled õppinud, kuidas teostada lihtsaid ja täiustatud valideerimisi ning kohandada kasutajate tagasisidet CSS-iga parema kasutajakogemuse loomiseks.
Korduma kippuvad küsimused
Mis juhtub, kui sisestatud e-posti aadress on vigane?Kui e-posti aadress on vigane, siis vormi ei saa esitada ning kasutaja näeb veateadet.
Kuidas saan olla kindel, et sisestatud URL on õige?Saad kasutada „pattern“ atribuuti, et esitada konkreetseid nõudeid URL-ile, näiteks selle kohta, et see algab „http://“ või „https://“-iga.
Kas ma saan sisestada ühte välja mitu e-posti aadressi?Jah, saad kasutada atribuuti „multiple“, et lubada kasutajatel sisestada mitu e-posti aadressi, mis on eraldatud komadega.
