Hvordan lage et HTML-skjema (eksempler forklart)

Skjemaer brukes til å samle inn data fra brukere, for eksempel kontaktinformasjon, eller for å la brukere samhandle med nettstedet, for eksempel legge inn kommentarer eller utføre søk. I denne artikkelen lærer vi hvordan du lager et grunnleggende skjema ved hjelp av HTML.

Strukturen til et HTML-skjema

Et HTML-skjema lages ved hjelp av taggen. Innenfor denne taggen kan du ha en rekke forskjellige inndataelementer, for eksempel tekstfelt, knapper, avmerkingsbokser, alternativknapper og mer.

input-elementer går her

Inndataelementer

Tekstfelt

Tekstfelt opprettes ved hjelp av taggen med attributtet type lagt på tekst. For eksempel:

Navn:




Telefon

Elementet brukes for inntastingsfelt for telefonnummer.

Telefon:


Dato

Elementet brukes til å velge en dato.

Bursdag:


Passord

Elementet brukes for passordinntastingsfelt. Tekst som er skrevet inn i dette feltet vises som prikker for å skjule passordet.

Passord:


Arkiv

Elementet brukes til å la brukeren velge en fil fra sitt lokale filsystem.

Last opp fil:


Avmerkingsboks

Elementet brukes for inndatafelt som lar brukeren velge ingen, ett eller flere alternativer.

Jeg godtar vilkårene og betingelsene

Radio

Elementet brukes til inndatafelt som lar brukeren velge ett alternativ fra et sett med alternativer.

Kjønn:

Mann

Kvinner

Antall

Elementet brukes for numeriske inndatafelt.

Beløp:


Område

Elementet brukes for inndatafelt som må inneholde en verdi fra et verdiområde.

Volum:




Knapper

Knapper lages ved hjelp av taggen med attributtet type lagt på sende inn. Denne knappen, når den trykkes, vil sende inn skjemadataene. For eksempel:

Navn:




Håndtering av skjemainndata

Når du trykker på send-knappen, sendes skjemadataene til behandling. Dette gjøres gjennom en av to metoder: GET eller POST, som spesifiseres ved hjelp av attributtet metode I etiketten .

GET metoden

GET-metoden sender inn skjemadataene som en del av URL-en. Det er nyttig for ting som søk, der skjemadataene ikke er sensitive. Denne metoden har imidlertid begrensninger når det gjelder lengden på data som kan sendes.

input-elementer går her

POST metode

POST-metoden sender inn skjemadataene atskilt fra URL-en. Dette er sikrere og kan håndtere en mye større mengde data, så det brukes til ting som innsending av kontakt- eller påloggingsskjemaer.

input-elementer går her

I begge tilfeller, attributtet handling brukes til å spesifisere URL-en til skriptet på serversiden som skal behandle skjemadataene.

HTML-formeksempel med alle elementer 

Her er et skjema som bruker alle elementene vi har gjennomgått i denne artikkelen:

Registreringsskjema

Navn:



Etternavn:



E-post:



Telefon:



Bursdag:



Passord:



Last opp fil:



Jeg godtar vilkårene og betingelsene


Kjønn:

Mann

Kvinner

Beløp:



Volum:




Dette skjemaet har felt for fornavn, etternavn, e-post, telefon, fødselsdato, passord, et felt for å laste opp en fil, en avmerkingsboks for vilkår og betingelser, radioer for å velge kjønn, og nummer- og områdefelt for mengde og volum, hhv.

"Send"-knappen på slutten er den som vil være ansvarlig for å sende inn skjemaet til nettadressen spesifisert i attributtet handling Av etiketten form (i dette tilfellet "/submit_form"). For at dette skjemaet skal fungere på et ekte nettsted, må du ha en server konfigurert til å motta og behandle informasjonen fra dette skjemaet i "/submit_form"-banen.