Formulāri ir neatņemama katras vietnes sastāvdaļa. Tie ļauj lietotājiem efektīvi ievadīt un nosūtīt informāciju serverim. Īpaši svarīga ir skaitļu ievade, vai nu vecuma norādēm, mērvienībām vai numeriskiem ID.
Šajā Pamatapmācī\u016bbā mēs apskatīsim dažādas veidnes, kā skaitļus tīmekļa formās reģistrēt un kā varēsi pilnībā izmantot "number" tipa HTML ievades elementu priekšrocības.
Svarīgākās atziņas
- "Number" tipa HTML ievades elements ļauj veikt skaitliskas ievades ar validācijas funkcijām.
- Ir iespējams definēt minimālos un maksimālos vērtības, kā arī soļus ievadei, lai novērstu nepareizas ievades.
- Datu sarakstu izmantošana palīdz parādīt ieteikumus skaitļu ievadē un palīdz lietotājiem veikt izvēli.
Number tipa ievades elements
Lai izveidotu skaitļu ievades lauku, mēs izmantojam ievades elementu ar tipu "number". Tas ir īpaši noderīgi, ja jāpieprasa tikai konkrēta veida ievades.
Sākumā pārliecinies, ka atribūts "type" ir iestatīts uz "number". Šā elementa priekšrocības ir iespēja noteikt robežvērtības, izmantojot atribūtus "min" un "max".
Ja norādīsi minimālo vērtību "0" un lietotājs mēģina ievadīt negatīvu skaitli vai pārsniegt minimumu, pabeidzot veidlapu, tiks parādīta validācijas kļūda. Tas uzlabo lietotāja pieredzi, jo problēmas tiek norādītas uzreiz.
Elements ļauj arī norādīt soli. Tas ļauj palielināt vai samazināt vērtības definētos soļos. Piemēram, strādājot ar soli "1", katru palielinājumu veic par "1".
Ieejas elementam ar atribūtu "value" var piešķirt noklusējuma vērtību, kas tiks rādīta, kad tiek ielādēta veidlapa.
Datulista izmantošana priekšnoteikumiem
Noderīga funkcija ievades elementiem ir datulistas izmantošana. Tas ļauj izveidot ieteikumu sarakstu, ko lietotājs var izvēlēties ievadot vērtību.
Lai to īstenotu, izveido datulistas elementu un piešķir tam ID. Datulistas ietvaros var pievienot vairākus "option" elementus, kas atspoguļo iespējamās vērtības.
Ievadīšanas laukumā varat pievienot atribūtu "list" un norādīt datulistas ID. Tādējādi datulistas uzskaitītās ieteikumus parādīs, kad lietotājs noklikšķina ievadlaukumā.
Piemēram, ja datulistā ir ieteikumi "10", "100" un "1000", tie parādīsies, kad lietotājs sāk ievadīt. Tas palīdz izvairīties no kļūmju un paātrina ievades procesu.
Šis ir īpaši noderīgi, ja vēlies nodrošināt, ka lietotājs ievada tikai derīgas vērtības.
Piemērojot soļus implementācijai
- Sākumā integrē "number" tipa ievades elementu savā HTML veidlapā.
- Pievieno atribūtus "min", "max" un "step", lai definētu ievadi.
- Izveido datulistu ar ID un pievieno vairākus "option" elementus.
- Pievieno savam ievades laukumam "list" atribūtu un saistīgi ar datulistas ID.
Noslēgums
Izmantojot iepriekš minētās funkcijas, varat izveidot lietotājam draudzīgu veidlapu, kas ne tikai pieprasa pareizi ievadītus datus, bet arī palīdz lietotājiem izvēlēties pareizās vērtības.
Kopsavilkums
Šajā pamācībā esi mācījies, kā validēt skaitliskos ievades web-veidlapās un izmantot Datalist funkcionalitāti ievades laukiem.
Bieži uzdotie jautājumi
Kas ir atšķirība starp veidlapas tipu "teksts" un tipu "skaitlis"?Tipa "skaitlis" ļauj veikt specifisku validāciju skaitliskām ievadēm, kamēr tipa "teksts" akceptē jebkādas rakstzīmes.
Kā varu filtrēt vērtības Datalist funkcijā?Kad lietotājs ievada ievades laukā, ierosinājumu saraksts automātiski tiek filtrēts atkarībā no ievadītajām zīmēm.
Vai varu ievadīt arī negatīvus skaitļus?Jā, vari pieņemt arī negatīvus skaitļus, ja minimums tiek atbilstoši pielāgots.
Vai Datalist funkciju var izmantot ar teksta ievades laukiem?Jā, Datalist funkciju var izmantot gan ar ievades laukiem tipa "skaitlis", gan tipa "teksts".
Kas notiek ar nevalīdām ievadēm?Nevalīdām ievadēm pārlūks rāda validācijas kļūdu, un lietotāju aicina koriģēt ievadi.
