Selles juhendis näitan sulle, kuidas saad implementeerida oma veebivormidesse kaks sisendivälja otsing ja tel. Need sisestustüübid on mõeldud eriti otsingupäringute ja telefoninumbrite jaoks ning pakuvad mitmeid kasulikke funktsioone, mis võivad teie ja teie kasutajate elu lihtsustada. Sa õpid, kuidas neid sisendeid õigesti kasutada ja milliseid eeliseid need kaasa toovad.
Olulisemad järeldused
- Otsing ja tel sisestusväljad pakuvad lihtsaid võimalusi otsingule ja telefonil põhinevate sisestuste lisamiseks vormidesse.
- Otsingufunktsionaalsus on toetatud paljudes brauserites ja omab mõningaid kasutajasõbralikke omadusi, samas kui tel on spetsiaalselt ette nähtud telefoninumbrite sisestamiseks.
- Mõlemal puuduvad spetsiaalsed valideerimisfunktsioonid, kuid neid saab täiendada regulaaravaldistega.
Sisestusvälja tüüp "search"
Esmalt uurime sisendväli otsingu jaoks. See sarnaneb tavalise tekstisisendiväljaga, kuid oma funktsionaalsuses on kohandatud.
Sisendväli kuvatakse tavaliselt lihtsa tekstisisendina, kus näiteks Chrome'is kuvatakse sisestuse kustutamiseks "X". See funktsioon on praktiline, kuna võimaldab kasutajatel kiiresti kustutada sisestatud otsingupäring ja alustada uue sisestusega.
Sa saad lisada ka kohatäite, mis näitab kasutajatele, mida sellesse välja sisestada. Näiteks kui lisad vihjeks "Otsingusõna", siis see tekst kustub automaatselt kirjutamise ajal. See tagab selge kasutajaliidese.
Valideerimine ei ole selliste sisendtüüpide puhul vaikevalik. Saad aga kasutada regulaaravaldist (RegEx), kui soovid panna spetsiaalseid nõudeid sisestusele.
Sisestusvälja tüüp "tel"
Järgmisena vaatame telefoni numbri sisestusvälja ehk tel. HTML-is ülesehitus on sarnane, kuid eesmärk on erinev.
Tüübiga tel teab veebilehitseja, et kasutaja peaks sisestama telefoni numbri. Mobiilseadmetel kuvatakse tavaliselt ainult numbriline klaviatuur, mis lihtsustab oluliselt sisestamist.
Suur erinevus tavalisest tekstiväljast puudub. Ka siin saad kasutada kohatäidet, et anda vihjeid või näidata spetsiaalseid vorminguid, nagu ka riigieelvalikuvorming, kui vaja.
Teine eelis on see, et ekraanilugejad mõistavad sisendväli semantikat. Sina ja ka kasutajad, kellel on piirangud, saavad selge juhise, et selles väljas tuleks sisestada telefoninumber. See võib oluliselt parandada teie veebirakenduse ligipääsetavust.
Telefoninumbrite valideerimine
Kui soovid tagada, et kasutajad sisestavad õige telefoninumbri, soovitame kasutada sisendi valideerimiseks RegEx-i. Saad kohandada seda kergesti, olenevalt sellest, kas soovid toetada riiklikke või rahvusvahelisi telefoninumbreid.
RegEx Saksamaa telefoninumbritele oleks hea lähtekoht. Rahvusvaheliste numbrite puhul muutub see keerulisemaks, kuna erinevad riigid kasutavad telefoninumbrite jaoks erinevaid vorminguid. Hea strateegia võiks olla kõigepealt riigi valimine ja seejärel konkreetse riigi jaoks valida valideerimine.
Kokkuvõte
Kokkuvõttes võib öelda, et tüüpide search ja tel implementeerimine veebivormides on suhteliselt lihtne. Kuigi nad ei paku ulatuslikke funktsioone, suudavad nad oma semantika ja kasutajasõbralikkuse abil veenda. Nende tüüpide rakendamisega saate märgatavalt parandada oma veebisaidi kasutajakogemust.
Korduma kippuvad küsimused
Mis on peamised erinevused search'i ja tel'i vahel?Peamine erinevus seisneb semantikas: search on mõeldud otsinguterminite jaoks, samal ajal kui tel on ette nähtud telefoninumbrite jaoks.
Kas tüübid search ja tel pakuvad spetsiaalseid valideerimisfunktsioone?Ei, mõlemad tüübid ei paku spetsiaalseid valideerimisfunktsioone, kuid neid saab täiendada regulaaravaldistega.
Kuidas lisada sisendväljale kohatäide?Seda saab teha lihtsalt lisades HTML-sõnumile sisendi atribuudi kohatäide.
Milliseid eeliseid pakuvad need tüübid kasutajakogemuse osas?Nad parandavad kasutajasõbralikkust, kuvades mobiilsetel seadmetel sobivad sisestusklahvid ja pakkudes kasutajatele kohest visuaalset tagasisidet.
Millele tuleks tähelepanu pöörata, kui soovin toetada rahvusvahelisi telefoninumbreid?Peaksite looma riigi valimise välja ja seejärel kontrollima telefoni numbri vastavust selle riigi spetsifikatsioonidele.
