Lomakkeet ovat jokaisen verkkosivuston välttämätön osa. Ne mahdollistavat käyttäjien syöttää tietoja tehokkaasti ja lähettää ne palvelimelle. Erityisen tärkeää on numeroiden syöttäminen, olipa kyse sitten ikätiedoista, mitoista tai numeerisista IDs. Tässä oppaassa käsittelemme erilaisia tapoja tallentaa numeroita verkkolomakkeisiin ja kuinka voit hyödyntää optimaalisesti tyypin "numero" HTML -syötetoiminnot.
Tärkeimmät havainnot
- HTML-tyypin "numero" syöttöelementti mahdollistaa numeeristen arvojen syöttämisen validointitoiminnoilla.
- On mahdollista määrittää vähimmäis- ja enimmäisarvot sekä askeleet syötölle väärinkäytösten estämiseksi.
- Datalistien käyttö auttaa näyttämään ehdotuksia numeroiden syöttämiseen ja auttaa käyttäjiä valitsemaan.
Syötetoiminnot numerotyypille
Luodaksesi alueen numeroiden syöttämiseen käytämme syöttöelementtiä, jolla on tyyppi "numero". Tämä on erityisen hyödyllistä, kun vain tietyn tyyppisiä syötteitä hyväksytään.
Ensimmäiseksi varmista, että attribuutti "tyyppi" on asetettu arvoon "numero". Tämän elementin etuja ovat mahdollisuus määrittää raja-arvot käyttäen "min" ja "max" -attribuutteja.
Jos asetat minimiksi "0" ja käyttäjä yrittää syöttää negatiivisen numeron tai alittaa minimin, validointivirhe näytetään lomaketta lähetettäessä. Tämä parantaa käyttäjäkokemusta, koska käyttäjä saa heti huomautuksen ongelmasta.
Elementti mahdollistaa myös askeleen määrittämisen. Tämän avulla voit lisätä tai vähentää arvoja määritetyin askelin. Esimerkiksi askelarvolla "1" jokainen lisäys on "1".
Syöttöelementtiin voit määrittää "arvon", joka näkyy, kun lomake ladataan.
Datalistien käyttö ohjearvoille
Hyödyllinen toiminto syöttöelementeille on Datalistien käyttö. Sen avulla voit luoda luettelon ehdotuksia, joita käyttäjä voi valita arvoa syöttäessään.
Tämän toteuttamiseksi luodaan Datalist-elementti ja annetaan sille tunniste. Datalistin sisällä voit sitten lisätä useita "Vaihtoehto"-elementtejä, jotka edustavat mahdollisia arvoja.
Syöttökenttään voidaan sitten lisätä "luettelon" attribuutti ja viitata Datalistin tunnisteeseen. Tämä näyttää Datalistissa luetellut ehdotukset, kun käyttäjä klikkaa syöttökenttään.
Jos esimerkiksi Datalistissä on ehdotukset "10", "100" ja "1000", ne ilmestyvät käyttäjän aloittaessa syötön. Tämä voi auttaa välttämään kirjoitusvirheitä ja nopeuttaa syöttöprosessia.
Näiden ehdotusten suodatus tapahtuu dynaamisesti käyttäjän tekstisyötön perusteella. Kun käyttäjä alkaa kirjoittaa, lista päivittyy automaattisesti ja näyttää vain relevantit vaihtoehdot.
Tämä on erityisen hyödyllistä, kun haluat varmistaa, että käyttäjä syöttää vain kelvollisia arvoja.
Implementoinnin vaiheet
- Lisää ensin syöttöelementti tyypillä "numero" HTML-lomakkeeseesi.
- Lisää attribuutit "min", "max" ja "askel" määrittämään syöttöä.
- Luo Datalist tunnisteella ja lisää useita "Vaihtoehto"-elementtejä.
- Lisää syöttökenttääsi "luettelo"-attribuutti ja linkitä se Datalistin tunnisteeseen.
Päätös
Käyttämällä yllä mainittuja toimintoja voit luoda käyttäjäystävällisen lomakkeen, joka pyytää oikein syötettyjä tietoja ja auttaa käyttäjiä valitsemaan oikeat arvot.
Yhteenveto
Tässä oppaassa olet oppinut, miten validoidaan numeerisia syötteitä verkkolomakkeissa ja hyödynnetään Datalists-toiminnallisuutta syöttökentissä.
Usein kysytyt kysymykset
Mikä on eriä Tupeiden "teksti" ja "numero" välillä?"Numero"-tyyppi mahdollistaa tiettyjen numeeristen syötteiden validoinnin, kun taas "Teksti"-tyyppi hyväksyy minkä tahansa merkkijonon.
Miten voin suodattaa arvoja Datalistissä?Kun käyttäjä kirjoittaa syöttökenttään, ehdotusten luettelo suodatetaan automaattisesti syötettyjen merkkien perusteella.
Voinko syöttää myös negatiivisia lukuja?Kyllä, voit hyväksyä negatiiviset luvut, jos minimi arvo muokataan vastaavasti.
Voinko käyttää Datalisteja myös tekstisyötekentissä?Kyllä, Datalisteja voidaan käyttää sekä "numero"-tyypin että "teksti"-tyypin syöttökentissä.
Mitä tapahtuu virheellisille syötteille?Virheellisistä syötteistä selaimesi näyttää validointivirheen ja pyytää käyttäjää korjaamaan syötteen.
