Innholdsfortegnelse:
Video: CSS-Tricks Screencast #99: Overview of HTML5 Forms Types, Attributes, and Elements 2024
Den vanligste måten å få brukerinngang til et JavaScript-program på, er å bruke HTML-skjemaelementer. Den nyeste versjonen av HTML, HTML5, har flere nye formelementer og attributter.
Tekstinnganger
Tekstinnganger er den mest grunnleggende typen HTML-skjemafelt. De brukes til å gi brukeren et tomt innspill hvor hun kan skrive inn noen verdi. Her er et eksempel på koden som brukes til å lage en tekstinngang:
Her ser dette feltet ut i en nettleser:
Plassholdertekst
Plassholdertekst vises i innsendingsfeltet før en bruker begynner å skrive. Det er nyttig for å fortelle brukeren hva du forventer at de skal skrive inn.
Her er et eksempel på bruk av plassholdertekst i en tekstinngang:
Her ser dette feltet ut i en nettleser.
Autofokus
Når inntastingsfeltet er valgt, og du kan se markøren inne i den, har den "fokus. "Hvis du vil ha et bestemt felt (for eksempel feltet Fornavn) å ha" fokus "så snart en nettside laster, kan du bruke autofokusattributtet. Slik ser det ut:
E-postinngang
E-postfeltet ser ut som en tekstboksinngang, og det fungerer også som et tekstfelt i de fleste tilfeller også. Men noen ganger behandler nettleseren e-post-innfelt annerledes enn et tekstfelt. For eksempel, når et e-postfelt er "i fokus" på en iPhone, viser et spesielt tastatur som har snarveier for å skrive inn e-postadresser.
Her er et eksempel på bruk av e-post-feltet:
Innspillingsinngang
En skyveinngang er et inntastingsfelt som lar brukeren velge et nummer innenfor en rekke tall ved hjelp av en dra og slipp kontroll.
Her er koden for å lage en glidebryter:
Slik ser en glidebryter ut i en nettleser.
Påkrevd
Hvis du vil tvinge brukeren til å skrive inn en verdi i et felt før han kan sende inn skjemaet, har HTML5 et navn som kreves.
For å få et skjemafelt som kreves, trenger du bare å legge til det nye attributtet i et skjemainntastingsfelt, slik som dette:
Når en bruker forsøker å sende dette skjemaet uten å fylle ut feltet Telefonnummer, får hun en melding som spør henne for å fylle den inn:
I følge denne skrivingen støtter ikke alle nettlesere den nødvendige attributtet, men det støttes av Chrome, Firefox, Internet Explorer og Opera.
Finn ut mer
Hvis du vil ha mer informasjon om elementene og attributter og hvordan du kan jobbe med dem i JavaScript, kan du gå til HTML-skjemaveiledningen på Mozilla Developer Network.
