Lag ditt første HTML-skjema

I denne veiledningen vil du lære hvordan du lager ditt første enkle skjema i HTML. Skjemaer er en essensiell del av webapplikasjoner og tillater brukere å legge inn informasjon og sende den til en server. I denne trinnvise veiledningen vil du lære den grunnleggende strukturen av et HTML-skjema og forstå hvordan de ulike elementene samarbeider for å overføre data.

Viktigste innsikter

• Et HTML-skjema defineres med <form>-taggen.
• Attributtene action og method bestemmer hvor dataene sendes og hvilken metode som brukes.
• Skjemafeltene defineres vanligvis med <input>, <label> og <button>.
• Dataene kan sendes til serveren enten med GET eller POST.

Trinnvis veiledning

1. Opprett HTML-grunnstruktur

Først trenger du et enkelt HTML-dokument som grunnstruktur. Forsikre deg om at du har den grunnleggende strukturen av et HTML-dokument:

2. Legg til form-taggen

Neste steg er å definere skjemaet. Du legger til <form>-taggen og trenger attributtene action og method. Her er et enkelt eksempel hvor action angir URL-en som dataene sendes til, og method er satt til GET for å overføre dataene via URL-en.

3. Opprett etikett og inndatafelt

I skjemaet vil du opprette et etikettert inndatafelt. For dette bruker du <label>-taggen for etiketten og <input>-taggen for det faktiske inndatafeltet. Pass på at for-attributtet til etiketten matcher id-en til inndatafeltet.

4. Legg til sende-knappen

For å sende skjemadataene trenger du en knapp. Denne realiseres med <button>-taggen og bør ha typen submit for at skjemaet skal sendes når du klikker på den.

5. Test skjemaet

Når du har opprettet skjemaet, er det på tide å teste det i nettleseren. Skriv et eksempel i inndatafeltet og klikk på Send-knappen. Du bør se at når skjemaet sendes, blir de innskrevne dataene sendt via URL-en til angitt action.

6. Endre indata-attributtene

For å se hvordan inndatafeltene endrer seg, kan du tilpasse attributtene til <input>-taggen. Endre for eksempel name-attributtet for å differensiere de overførte dataene. Et eksempel kunne være å endre navnet på inndatafeltet fra name til first name.

7. Dataoverføring og forespørselstype

Før du utfører flere tester, er det viktig å vite at metoden GET sender dataene i URL-en, mens POST sender dataene i kroppen av HTTP-forespørselen. Du kan endre forespørslens type ved å tilpasse method-attributtet i <form>-taggen.

8. Simuler serverrespons

Siden du sannsynligvis ikke har en ekte server tilgjengelig når du tester skjemaet, kan du tilpasse action-URL-en for å simulere en annen HTML-side som brukerne blir omdirigert til etter at skjemaet er sendt. Lag en ny HTML-fil som f.eks. inneholder en takkeside.

9. Feilsøking og debugging

Hvis det oppstår feil ved innsending av skjemaet, kan du sjekke nettleserens nettverksverktøy. Der kan du se om skjemaet ble sendt vellykket og hvilke data som ble overført. Vær oppmerksom på eventuelle 404-feil, som indikerer at mål-URL-en ikke ble funnet.

10. Avslutning og utsikt

Nå har du en grunnleggende forståelse for å lage HTML-skjemaer. Du kan utvide denne teknikken for å lage mer komplekse skjemaer som inneholder ulike inntastingstyper og valideringer. I neste opplæring vil du lære hvordan du responderer på skjemainndata med JavaScript og utfører asynkrone dataoverføringer.

Oppsummering

I denne opplæringen ble du kjent med strukturen og funksjonaliteten til ditt første HTML-skjema. Du vet nå hvordan du oppretter inndatafelt, etiketter og knapper, og hvordan dataene som sendes overføres via URL-en eller i kroppen til en POST-forespørsel.