Tässä ohjeessa näytän sinulle, miten voit toteuttaa kaksi syöttökenttää, hakukentän ja puhelinnumeron, web-lomakkeisiin. Nämä syöttötyypit on tarkoitettu erityisesti hakukyselyille ja puhelinnumeroille, ja ne tarjoavat joitain hyödyllisiä ominaisuuksia, jotka voivat helpottaa sinun ja käyttäjiesi elämää. Opit, miten käytät näitä syötteitä oikein ja mitä etuja ne tuovat mukanaan.
Tärkeimmät havainnot
- Hakukenttä ja puhelinnumero tarjoavat yksinkertaiset tavat toteuttaa haku- ja puhelinpohjaiset syötöt lomakkeisiin.
- Hakutoimintoa tuetaan useissa selaimissa ja sillä on joitain käyttäjäystävällisiä ominaisuuksia, kun taas puhelinnumero on erityisesti tarkoitettu puhelinnumeroiden syöttöön.
- Kummallakaan ei ole erityisiä validointitoimintoja, mutta niitä voidaan täydentää säännöllisillä lausekkeilla.
Syöttökenttätyyppi "search"
Ensinnäkin tarkastelemme hakukenttää. Se muistuttaa normaalia tekstinsyöttökenttää, mutta sen toiminnallisuudessa on tiettyjä mukautuksia.
Syöttökenttä näyttää yleensä yksinkertaiselta tekstikentältä, jossa esimerkiksi Chromessa näytetään "X" syötön poistamiseen. Tämä ominaisuus on kätevä, koska se mahdollistaa käyttäjille nopeasti poistaa syötetyn hakukyselyn ja aloittaa uuden syötön.
Voit myös määrittää paikkamerkin, joka näyttää käyttäjille, mitä tähän kenttään pitäisi syöttää. Jos esimerkiksi lisäät vihjeeksi "Hakusana", tämä teksti piilotetaan automaattisesti kirjoittaessasi. Tämä luo selkeän käyttökokemuksen.
Validointi ei ole määritetty näille syöttökenttätyypeille. Voit kuitenkin käyttää säännöllisiä lausekkeita (RegEx), jos haluat asettaa erityisvaatimuksia syötteille.
Syöttökenttätyyppi "tel"
Seuraavaksi tarkastelemme puhelinnumerokenttää, eli tel. HTML-rakenne on samankaltainen, mutta tarkoitus on erilainen.
Tyyppi tel kertoo selaimelle, että käyttäjän pitäisi syöttää puhelinnumero. Mobiililaitteissa näytetään usein vain numeerinen näppäimistö, mikä helpottaa huomattavasti syöttämistä.
Eroa normaaliin tekstisyöttökenttään ei ole merkittävästi. Myös tässä voit käyttää paikkamerkkiä antamaan vinkkejä tai viittaamaan erityisiin muotoihin, kuten maatunnusmuotoon tarvittaessa.
Toinen etu on, että ruudunlukijat ymmärtävät syöttökenttien semantiikan. Annat selaimelle ja erityisesti myös henkilöille, joilla on haasteita, selkeän ohjeen siitä, että tähän kenttään tulisi syöttää puhelinnumero. Tämä voi merkittävästi parantaa verkkosivustosi saavutettavuutta.
Puhelinnumeroiden validointi
Jos haluat varmistaa, että käyttäjät syöttävät oikean puhelinnumeron, suositeltavaa on käyttää RegExiä syötettäessä. Voit helposti tehdä muutoksia riippuen siitä, haluatko tukea kansallisia vai kansainvälisiä puhelinnumeroita.
Saksalaisia puhelinnumeroita varten RegEx olisi hyvä lähtökohta. Kansainvälisille numeroille tilanne on monimutkaisempi, koska eri mailla on erilaiset puhelinnumeromuodot. Hyvä strategia voi olla valita ensin maa ja sitten soveltaa maan valitsemaa erityistä validointia.
Yhteenveto
Lopuksi voidaan todeta, että search- ja tel-tyyppien käyttö web-lomakkeissa on melko helppoa toteuttaa. Ne eivät tarjoa kattavia toimintoja, mutta ne vakuuttavat semantiikallaan ja käyttäjäystävällisyydellään. Näiden tyyppien käyttöönotolla voit merkittävästi parantaa verkkosivustosi käyttäjäkokemusta.
Usein kysytyt kysymykset
Mikä on pääero searchin ja telin välillä?Pääero on semantiikassa: search on tarkoitettu hakusanoille, kun taas tel on tarkoitettu puhelinnumeroille.
Tarjoavatko search ja tel erityisiä validointitoimintoja?Eivät tarjoa, mutta niitä voidaan täydentää säännöllisillä lausekkeilla.
Miten lisään paikkamerkin syöttökenttään?Voit tehdä tämän helposti lisäämällä paikkamerkki-attribuutin HTML-syötteeseesi.
Mitä hyötyä näillä tyypeillä on käyttäjäkokemukselle?Ne parantavat käyttäjäystävällisyyttä näyttämällä sopivat syöttönäppäimistöt mobiililaitteilla ja antamalla käyttäjille välittömiä visuaalisia vihjeitä.
Mitä minun pitäisi ottaa huomioon, jos haluan tukea kansainvälisiä puhelinnumeroita?Sinun tulisi luoda valintakenttä maalle ja sitten validoida puhelinnumero kyseisen maan määritysten perusteella.
