Formularai yra neatskiriamas kiekvienos svetainės elementas. Jie leidžia vartotojams efektyviai įvesti informaciją ir siųsti ją į serverį. Ypatingai svarbu įvesti skaičius, ar tai būtų amžius, matmenys arba skaitiniai ID. Šiame Pamokyme apžvelgsime skirtingus būdus, kaip surinkti skaičius šoninėse formose ir kaip optimaliai pasinaudoti „HTML“ įvesties elementų, kurie yra „number“ tipo, privalumais.
Svarbiausios išvados
- „Number“ tipo „HTML“ įvesčių elementas leidžia įvesti skaičius su patikrinimo funkcijomis.
- Galima nustatyti minimumo ir maksimumo reikšmes bei žingsnius įvedimui, kad būtų išvengta neteisingų įvedimų.
- Duomenų sąrašų naudojimas padeda rodyti siūlomus skaičių įvedimo variantus ir padeda vartotojams pasirinkti.
Skaičių tipo įvesties elementas
Sukurti skaičių įvedimo sritį galima naudojant įvesties elementą, turintį tipą „skaičius“. Tai ypatingai naudinga, kai pageidaujama priimti tik tam tikro tipo įvestis.
Pirmiausia įsitikinkite, kad atributas „type“ nustatytas kaip „skaičius“. Šio elemento privalumai yra galimybė nustatyti ribines vertes naudojant atributus „min“ ir „max“.
Jei nurodote minimalią vertę „0“ ir vartotojas bando įvesti neigiamą skaičių arba viršija minimumą, pateikiant formą, bus rodoma patikros klaida. Tai gerina vartotojo patirtį, nes jis tiesiogiai informuojamas apie problemą.
Šis elementas leidžia nustatyti ir žingsnį. Taip galite padidinti ar sumažinti reikšmes nurodytomis žingsnio vertėmis. Pavyzdžiui, galite dirbti su „1“ žingsniu, todėl kiekviena padidinimas bus „1“.
Įvedimo elementui galite naudoti „reikšmę“, kuri bus rodoma, kai įkraunamas formos puslapis.
Duomenų sąrašų naudojimas numatytoms reikšmėms
Vienas naudingų funkcijų įvesties elementams yra duomenų sąrašų naudojimas. Tai leidžia jums sukurti pasiūlymų sąrašą, kurį vartotojas gali pasirinkti įvedęs vertę.
Tam įvykdyti, sukuriate Datalist elementą ir suteikiate jam ID. Dataliste galite pridėti kelis „Options“ elementus, kurie atspindi galimas vertes.
Į įvedimo laukelį galite pridėti atributą „sąrašas“ ir nurodyti Datalist ID. Taip bus rodomi pasiūlymai, esantys Dataliste, kai vartotojas spustelės įvedimo laukelį.
Pavyzdžiui, jei Dataliste yra pasiūlymai „10“, „100“ ir „1000“, tie pasiūlymai bus rodomi, kai vartotojas pradeda įvestį. Tai padeda išvengti klaidų ir pagreitina įvedimo procesą.
Šios pasiūlymų filtravimas vyksta dinamiškai pagal vartotojo įvestį. Kai vartotojas pradeda rašyti, sąrašas automatiškai atnaujinamas ir rodomi tik aktualūs variantai.
Tai yra ypatingai naudinga, jei norite užtikrinti, kad vartotojas įves tik galiojančias vertes.
Įgyvendinimo žingsniai
- Pirmiausia įtraukite įvesties elementą su tipu „skaičius“ į savo HTML formą.
- Pridėkite atributus „min“, „max“ ir „step“, kad nustatytumėte įvestį.
- Sukurkite Datalist su ID ir pridėkite keliems „Option“ elementams.
- Priskirkite savo įvesties laukeliui atributą „sąrašas“ ir sujunkite jį su Datalist ID.
Užbaigimas
Naudodamasis paminėtomis funkcijomis, galite sukurti vartotojui draugišką formą, kuri ne tik reikalauja įvesti teisingus duomenis, bet ir padeda vartotojams pasirinkti teisingus vertes.
Santrauka
Šiame vadove jūs išmokote, kaip patikrinti skaitines įvestis internetiniuose formose ir kaip naudoti duomenų sąrašų funkcionalumą įvesties laukams.
D.U.K.
Kokia skirtumas tarp „text“ tipo ir „number“ tipo?„number“ tipas leidžia atlikti specifinę skaitinių įvestų patikrinimą, tuo tarpu „text“ tipas priima bet kokius simbolius.
Kaip galiu filtruoti vertes Dataliste?Kai vartotojas įvedimo lauke įveda tekstą, pasiūlymų sąrašas automatiškai filtras pagal įvestus simbolius.
Ar galiu įvesti neigiamus skaičius?Taip, galite priimti neigiamus skaičius, jei atitinkamai keičiamas minimumas.
Ar galiu naudoti Datalistus su tekstiniais laukais?Taip, Datalistus galima naudoti tiek su laukais, kurių tipas yra „number“, tiek su laukais, kurių tipas yra „text“.
Kas vyksta su netinkamomis įvestimis?Netinkamoms įvestims įvedimas rodo patikrinimo klaidą, ir vartotojas raginamas ištaisyti įvestį.
