HTML <form>-elementet er en grunnleggende byggestein for å lage interaktive skjemaer på en nettside. Det fungerer som en beholder for alle skjemaelementene. La oss utforske et eksempel på et grunnleggende skjema:

Merk

Alle eksempler inkluderer attributtet onsubmit="return false" for å forhindre standard oppførsel ved innsending av skjemaet. På denne måten forblir fokuset på å forstå skjemaoppretting og attributter.

Forklaring av form-attributter:

• name gir en distinkt identifikator for skjemaet på en nettside. Både serveren og klienten bruker denne identifikatoren for å behandle skjemadataene. Skjemanavnet kan inkludere tall, understreker, bindestreker og engelske alfabettegn, men det må ikke inneholde mellomrom;

• autocomplete bestemmer om nettlesere kan fylle ut skjemafeltene automatisk. Det kan settes til "on" eller "off" og brukes på individuelle skjemaelementer;

• novalidate spesifiserer at nettlesere ikke skal utføre validering av skjemafeltene. Dette kan være nyttig når du vil håndtere validering manuelt ved hjelp av JavaScript;

• method spesifiserer HTTP-metoden som brukes for å sende skjemadataene til serveren. De to vanligste metodene er GET og POST. Dette emnet vil bli dekket i dybden i JavaScript-kurset.

Oversikt over barneelementer i et skjema

Inne i form-elementet finner du ulike barneelementer som er essensielle for skjemafunksjonalitet. input-elementet lar brukere angi forskjellige datatyper, som tekst, tall og datoer. I dette eksempelet brukes type="email" for e-postfeltet og type="password" for passordfeltet. label-elementet organiserer og strukturerer skjemaet, gir beskrivende tekst for inndatafeltene og hjelper brukerne med å forstå deres formål. Knapp-elementet med type="submit" brukes til å sende skjemadataene til serveren når det klikkes på. Som standard vil innsending av skjemaet laste inn nettsiden på nytt, men denne oppførselen kan tilpasses ved hjelp av JavaScript.