V tem navodilu vam bom pokazal, kako v svojih spletnih obrazcih implementirati polji za iskanje in telefonsko številko. Ti dve vrsti vnosov sta posebej namenjeni iskanju in telefonskim številkam ter ponujata nekaj koristnih funkcij, ki vam in vašim uporabnikom lahko olajšajo življenje. Spoznali boste, kako pravilno uporabiti ti vnosni polji in kakšne prednosti prinašata.
Najpomembnejša spoznanja
- Vnosna polja search in tel ponujata preproste načine za implementacijo iskalnih in telefonskih vnosov v obrazce.
- Funkcionalnost search je podprta v mnogih brskalnikih in ima nekaj uporabniku prijaznih lastnosti, medtem ko je tel posebej primeren za vnos telefonskih številk.
- Obe vrsti vnosov nimata posebnih funkcij za validacijo, vendar ju lahko dopolnimo z rednimi izrazi.
Vrsta vnosnega polja "search"
Najprej si oglejmo vnosno polje za iskanje. Podobno je običajnemu polju za vnos besedila, vendar z določenimi prilagoditvami pri funkcionalnosti.
Vnosno polje je običajno prikazano kot preprosto polje za vnos besedila, pri čemer se na primer v brskalniku Chrome prikaže "X" za brisanje vnosa. Ta funkcionalnost je praktična, saj uporabnikom omogoča hitro brisanje vnosa iskanja in začetek novega vnosa.
Prav tako lahko določite označevalec, ki uporabnikom pokaže, kaj naj vnesejo v to polje. Če na primer dodate napotek "Išči pojem", se ta besedilo samodejno skrije med tipkanjem. To zagotavlja jasno uporabniško izkušnjo.
Validacija ni privzeto podana pri vnosnih poljih teh vrst. Lahko pa uporabite redni izraz (RegEx), če imate posebne zahteve glede vnosov.
Vrsta vnosnega polja "tel"
Nato si oglejmo vnosno polje za telefonske številke, torej tel. Struktura v HTML je podobna, vendar je namera drugačna.
Z vtipom tel spletni brskalnik ve, da mora uporabnik vnesti telefonsko številko. Na mobilnih napravah je pogosto prikazana le numerična tipkovnica, kar precej olajša vnos.
Ni velike razlike v primerjavi s standardnim poljem za besedilo. Tudi tukaj bi lahko uporabili označevalec, da bi dali napotke ali nakazali posebne formate, na primer državno klicno številko, če je potrebno.
Še ena prednost je, da bralniki zaslona razumejo semantiko vnosnih polj. S tem dajete jasna navodila brskalniku in še posebej ljudem z oviranostmi, da bi v tem polju morali vnesti telefonsko številko. To lahko bistveno izboljša dostopnost vaše spletne aplikacije.
Validacija za telefonske številke
Če želite zagotoviti, da uporabniki vnašajo pravilne telefonske številke, priporočamo uporabo RegEx za vnos. Lahko enostavno prilagodite glede na to, ali želite podpirati nacionalne ali mednarodne telefonske številke.
RegEx za nemške telefonske številke bi bil dobro izhodišče. Za mednarodne številke postane bolj zapleteno, saj imajo različne države različne formate telefonskih številk. Dobra strategija bi bila najprej izbrati državo in nato uporabiti specifično validacijo za to izbrano državo.
Povzetek
Skupno rečeno, vnosni polji search in tel sta v spletne obrazce relativno preprosto implementirati. Čeprav ne ponujata obsežnih funkcij, pa s svojo semantiko in uporabniku prijaznostjo prepričata. Z implementacijo teh vrst lahko bistveno izboljšate uporabniško izkušnjo vaše spletne strani.
Pogosto zastavljena vprašanja
Kakšne so glavne razlike med search in tel?Glavna razlika je v semantiki: search je namenjen iskalnim poizvedbam, medtem ko se za tel uporablja za telefonske številke.
Ali vrsti search in tel ponujata posebne funkcije za validacijo?Ne, nobena od vrst ne ponuja posebnih funkcij za validacijo, lahko pa ju dopolnite z rednimi izrazi.
Kako dodam označevalec v vnosno polje?To lahko enostavno storite z dodajanjem atributa označevalec v vaš vnos v HTML.
Kakšne prednosti imata ti vrsti glede uporabniške izkušnje?Izboljšujeta uporabniško izkušnjo s prikazovanjem ustreznih tipkovnic na mobilnih napravah in nudenjem takojšnjih vizualnih napotkov uporabnikom.
Kaj moram upoštevati, če želim podpreti mednarodne telefonske številke?Ustvarite polje za izbiro države in nato validirajte telefonsko številko glede na specifikacije te izbrane države.
