Optimalisering av tallinndat i nettskjemaer

Skjemaer er et uunnværlig element på ethvert nettsted. De lar brukerne effektivt skrive inn informasjon og sende den til serveren. Spesielt viktig er inntasting av tall, enten det er for aldersangivelser, målinger eller numeriske IDer. I denne opplæringen ser vi på ulike måter å registrere tall i web-skjemaer og hvordan du kan dra nytte av fordelene med de HTML-inngangselementene av typen "number" på best mulig måte.

Viktigste funn

• HTML-inngangselementet av typen "number" tillater numeriske innganger med valideringsfunksjoner.
• Det er mulig å definere minste- og størsteverdier samt trinn for inntasting for å forhindre feil inntastinger.
• Bruken av datalister hjelper med å vise forslag for inntasting av tall og hjelper brukerne med valget.

Inngangselement av typen Number

For å lage et område for inntasting av tall, bruker vi inngangselementet med typen "number". Dette er spesielt nyttig når bare en bestemt type innganger skal aksepteres.

Først bør du sørge for at attributtet "type" er satt til "number". Fordeler med dette elementet inkluderer muligheten til å sette grenseverdier ved hjelp av attributtene "min" og "max".

Hvis du angir et minimum på "0" og brukeren prøver å skrive inn et negativt tall eller gå under minimumet, vil det vises en valideringsfeil ved innsending av skjemaet. Dette forbedrer brukeropplevelsen, da brukeren umiddelbart blir varslet om problemet.

Elementet tillater også angivelse av et trinn. Dette lar deg øke eller redusere verdier i definerte steg. For eksempel kan du jobbe med et trinn på "1", slik at hver økning er med "1".

For inngangselementet kan du angi en standardverdi med "value", som vises når skjemaet lastes.

Bruke av datalister for standardverdier

En nyttig funksjon for inngangselementer er bruk av datalister. Dette lar deg lage en liste over forslag som brukeren kan velge fra når de skriver inn en verdi.

For å gjøre dette, oppretter du et Datalist-element og gir det en ID. Inne i datalisten kan du deretter legge til flere "Option"-elementer som representerer de mulige verdiene.

I inndatafeltet kan du deretter legge til attributtet "list" og referere til ID-en for datalisten. Dette vil vise forslagene som er oppført i datalisten når brukeren klikker i inndatafeltet.

Hvis du for eksempel har forslagene "10", "100" og "1000" i datalisten, vil disse vises etter at brukeren begynner å skrive. Dette kan hjelpe til med å unngå skrivefeil og fremskynde inntastingsprosessen.

Filtrering av disse forslagene skjer dynamisk, basert på brukerens tekstinndata. Så snart brukeren begynner å skrive, justeres listen automatisk og viser bare relevante alternativer.

Dette er spesielt nyttig hvis du ønsker å sikre at brukeren bare oppgir gyldige verdier.

Trinn for implementering

1. Først integrerer du inngangselementet med typen "number" i HTML-skjemaet ditt.
2. Legg til attributtene "min", "max" og "step" for å definere inngangen.
3. Opprett en datalist med en ID og legg til flere "Option"-elementer.
4. Tildel inndatafeltet ditt attributtet "list" og lenk det til datalistens ID.

Avslutning

Ved å bruke de ovennevnte funksjonene kan du opprette et brukervennlig skjema som ikke bare krever korrekt innskrevne data, men også hjelper brukerne med å velge riktige verdier.

Oppsummering

I denne veiledningen har du lært hvordan du validerer numeriske inndata i nett-skjemaer og utnytter funksjonaliteten til Datalists for inndatafelt.