Šiame vadove pateikiu jums, kaip į savo internetinius formus galite įtraukti du įvesties laukus - paieškos ir tel. Šie įvesties tipai yra skirti paieškos užklausoms ir telefono numeriams bei suteikia keletą naudingų funkcijų, kurios gali palengvinti jūsų ir jūsų vartotojų gyvenimą. Jūs išmoksite, kaip tinkamai naudoti šias įvestis ir kokie pranašumai joms būdingi.
Svarbiausi atradimai
- Paieškos ir tel įvesties laukai siūlo paprastus būdus paieškos orientuotų ir telefono pagrindu paremtų įvedimų į formus įtraukimui.
- Paieškos funkcija yra palaikoma daugelyje naršyklių ir turi keletą vartotojui draugiškų savybių, o tel yra skirtas specialiai telefono numerių įvedimui.
- Abu neturi specialių patikros funkcijų, tačiau gali būti papildyti reguliariaisiais išraiškomis.
Įvesties lauko tipas "search"
Pirmiausia pažiūrėsime į paieškos įvesties lauką. Jis primena įprastą teksto įvedimo lauką, tačiau su specifiniais prisitaikymais funkcionalumui.
Įvesties lauką įprastai vaizduoja paprastas teksto įvedimo laukas, pavyzdžiui, Chrome naršyklėje rodomas "X", skirtas ištrinti įvestį. Ši funkcija patogi, nes leidžia vartotojams greitai ištrinti įvestą paieškos užklausą ir pradėti naują įvestį.
Taip pat galite nustatyti vietos rezervaciją, kuri vartotojams parodytų, ką reikia įvesti į šį lauką. Pavyzdžiui, jei pridedate pastabą "Paieškos terminas", šis tekstas bus automatiškai paslėptas rašant. Tai suteikia aiškų naudotojo vadovavimą.
Šie įvesties laukai neturi numatytosios patikros. Tačiau galite naudoti reguliariuosius išraiškas (RegEx), jei norite nustatyti specialius įvesties reikalavimus.
Įvesties lauko tipas "tel"
Toliau apsvarstysime telefono numerio įvesties lauką, t. y. tel. HTML struktūra yra panaši, tačiau tikslas yra skirtingas.
Įvedus tipą tel, naršyklė žino, kad vartotojas turi įvesti telefono numerį. Mobilūs įrenginiai dažnai rodo tik skaitmeninę klaviatūrą, kas labai palengvina įvestį.
Nėra didelio skirtumo nuo paprasto teksto įvedimo lauko. Taip pat galite naudoti vietos rezervaciją, kad pateiktumėte pastabas ar nurodytumėte specialius formatus, pvz., šalies telefono kodo formatą, jei reikia.
Dar viena nauda yra ta, kad ekrano skaitytuvai supranta įvesties laukų semantiką. Jūs duodate naršyklės ir ypač judesio ribotumų žmonėms aiškią instrukciją, kad šiame lauke turėtų būti įvestas telefono numeris. Tai gali labai pagerinti jūsų svetainės prieinamumą.
Telefonų numerių patikra
Jei norite užtikrinti, kad vartotojai įrašytų teisingą telefono numerį, patartina naudoti RegEx įvesties patikrai. Galite lengvai prisitaikyti, priklausomai nuo to, ar norite remti nacionalinius ar tarptautinius telefono numerius.
Vokiečių telefono numeriams RegEx būtų geras pradžios taškas. Tarptautiniams numeriams reikia sudėtingesnės patikros, nes skirtingos šalys turi skirtingus telefono numerių formatus. Gera strategija galėtų būti pirmiausia pasirinkti šalį ir tada taikyti konkretų validavimą šiai šaliai.
Santrauka
Dažniausiai užduodami klausimai
Kokie pagrindiniai skirtumai tarp search ir tel?Pagrindinis skirtumas yra semantika: search skirtas paieškos terminams, o tel skirtas telefono numeriams.
Ar tipai search ir tel turi specialios validacijos funkcijas?Ne, abu tipai neturi specialiosios validacijos funkcijų, tačiau gali būti papildyti reguliariomis išraiškomis.
Kaip pridėti vietos rezervaciją prie įvesties lauko?Jūs tai galite padaryti paprastai pridėdami atributą placeholder prie savo įvesties HTML.
Kokius pranašumus turi šie tipai vartotojui?Jie pagerina vartotojo draugiškumą, rodydami tinkamas įvesties klavišų išvaizdas mobiliuose įrenginiuose ir suteikdami vartotojams nedelsiant vizualinius nurodymus.
Ką reikia atsižvelgti, jei noriu palaikyti tarptautinius telefono numerius?Jūs turėtumėte sukurti šalies pasirinkimo laukelį ir tada pagal tos šalies specifikacijas validuoti telefono numerį.
