V tem vodniku boste spoznali vse pomembne vidike polj za vnos e-poštnih naslovov in URL-jev v obrazcih HTML. Cilj je pokazati, kako učinkovito izvesti preverjanje pravilnosti teh vnosov in prilagoditi oblikovanje za različne stanje vnosov. To bo izboljšalo uporabniško izkušnjo in kakovost podatkov, ki jih zbirate.
Najpomembnejše informacije
- Spoznali boste osnovno strukturo in preverjanje e-pošte in URL-jev s pomočjo HTML.
- Poleg tega boste spoznali, kako s CSS zagotoviti vizualno povratno informacijo uporabniku, kadar so vnosi nepravilni.
- Razložena bo uporaba vzorcev za dodatno preverjanje e-poštnih naslovov in URL-jev.
Korak-za-korakom vodnik
1. Ustvarjanje osnovnega polja za vnos e-pošte
Začnite s kreiranjem standardnega polja za vnos e-pošte. Tukaj morate določiti tip kot "email", da brskalnik samodejno preveri vnos.
HTML bo sedaj obravnaval polje za vnos e-pošte izključno kot polje, ki pričakuje e-poštni naslov in ob nepravilnem vnosu omogoča vizualno povratno informacijo. Kadar uporabnik začne z vtipkavanjem, se ozadje spremeni v roza barvo, kar nakazuje, da nekaj ni v redu.
2. Preverjanje pravilnosti e-poštnega naslova
Preverjanje pravilnosti e-pošte poteka preko preprostih pravil. Prisotnega mora biti vsaj eno "@" znak, ki ga mora slediti vsaj eno dodatno znak. To je osnovni NLP preverjanje. Ta pravilo za preverjanje ni dovolj, da bi jamčilo, da e-poštni naslov dejansko obstaja.
Primer neveljavnega e-poštnega naslova bi bil "bla@". V takem primeru se pošiljanje obrazca blokira in uporabnik dobi sporočilo o napaki.
3. Uporaba vzorcev za natančnejše preverjanje
Za dosego natančnejšega preverjanja lahko uporabite atribut "pattern". Z reguljarnim izrazom (Regex) lahko določite, da mora e-poštni naslov izpolnjevati določene zahteve, npr. določeno domeno.
Z dodatnim preverjanjem zagotovite, da bodo sprejeti samo veljavni e-poštni naslovi, kot so na primer le Gmail ali GMX naslovi.
4. Zahtevan vnos in oblikovanje
Za zagotovitev izpolnitve polja za e-pošto lahko dodate atribut "required". Če poskuša uporabnik poslati obrazec brez vnosa, bo takoj prejel vizualno povratno informacijo.
Za oblikovanje neveljavnih vnosov lahko v CSS uporabite selektor ":invalid". Tako se ozadje polja obarva rdeče, da opozori uporabnika, da vnos ni pravilen.
5. Ustvarjanje polja za vnos URL-jev
Podobno kot pri e-pošti je pomembno ustvariti ustrezno vhodno polje tudi za URL-je. Tip nastavite na "url", da bo brskalnik tudi tu preveril vnos.
6. Preverjanje pravilnosti URL-ja
Osnovne zahteve za veljaven URL vključujejo, da se začne z "http://" ali "https://" in ima vsaj en naslednji znak. Če uporabnik vpiše le "https", to ni dovolj.
Isto načelo velja tudi za druge protokole, kot je "ftp". Če vnos ne ustreza pogojem, bo brskalnik ponudil povratne informacije in obrazec ne bo mogel biti poslan.
7. Razširjeno preverjanje z vzorci za URL-je
Za natančnejše preverjanje za določene vzorce, kot je "https://www.example.com", uporabite tudi atribut "pattern", da svojim uporabnikom pomagate vnesti pravilne URL-je.
8. Uporabnost na mobilnih napravah
Velika prednost uporabe tipov "email" in "url" v obrazcih je izboljšana uporabnost na mobilnih napravah. Tipkovnica je optimalno prilagojena, da olajša uporabnikom vnašanje e-poštnih naslovov in URL-jev.
Povzetek
V tem vadnici smo obravnavali najpomembnejše kriterije za validacijo e-poštnih naslovov in URL-jev v spletnih obrazcih. Naučili ste se, kako izvajati preproste in napredne validacije ter prilagajati uporabniško povratno informacijo preko CSS, da izboljšate uporabniško izkušnjo.
Pogosto zastavljena vprašanja
Kaj se zgodi, če je vnešen e-poštni naslov neveljaven?Če je e-poštni naslov neveljaven, obrazec ni mogoče poslati in uporabnik vidi sporočilo o napaki.
Kako lahko zagotovim, da je vnešen URL pravilen?Lahko uporabite atribut "pattern", da določite specifične zahteve za URL, na primer, da se začne s "http://" ali "https://".
Ali lahko v enem polju navedem več e-poštnih naslovov?Da, lahko uporabite atribut "multiple", ki uporabnikom omogoča vnos več e-poštnih naslovov, ločenih z vejicami.
