Lav din første HTML-formular

I denne vejledning vil du lære, hvordan du opretter dit første enkle formular i HTML. Formularer er en essentiel del af webapplikationer og giver brugerne mulighed for at indtaste information og sende den til en server. I denne trin-for-trin guide vil du lære den grundlæggende struktur af et HTML-formular og forstå, hvordan de forskellige elementer arbejder sammen for at overføre data.

Vigtigste punkter

• Et HTML-formular defineres af <form>-tagget.
• Attributterne action og method bestemmer, hvor dataene skal sendes hen og hvilken metode der skal bruges.
• Formularfelterne defineres normalt af <input>, <label> og <button>.
• Data kan sendes til serveren enten via GET eller POST.

Trin-for-trin vejledning

1. Opret HTML-grundstruktur

Først skal du bruge et simpelt HTML-dokument som grundlag. Sørg for at have den grundlæggende struktur af et HTML-dokument:

2. Tilføj Form-tagget

Næste skridt er at definere formularen. Tilføj <form>-tagget og sørg for at have attributterne action og method. Her er et simpelt eksempel, hvor action angiver URL'en, hvor dataene skal sendes hen, og method er sat til GET for at overføre dataene via URL'en.

3. Opret etiket og input-felt

I formularen vil du gerne oprette et mærket inputfelt. Til dette bruger du <label>-tagget til mærkningen og <input>-tagget til det faktiske inputfelt. Sørg for, at for-attributtet på etiketten matcher id'et på inputfeltet.

4. Tilføj Send-knap

For at sende formulardataene har du brug for en knap. Denne opnås ved hjælp af <button>-tagget og skal have typen submit, så formularen sendes ved at klikke på den.

5. Test af formularen

Efter at have oprettet formularen er det tid til at teste den i browseren. Indtast et eksempel i inputfeltet og klik på Send-knappen. Du bør se, at når formularen sendes, overføres de angivne data via URL'en til den angivne handling.

6. Ændringer i inputattributterne

For at se ændringer i inputfelterne kan du justere attributterne på <input>-tagget. Ændr f.eks. name-attributtet for at differentiere de indsendte data. Et eksempel kunne være at ændre navnet på inputfeltet fra name til first name.

7. Dataoverførsel og Anmodningstype

Inden du udfører flere tests, er det vigtigt at vide, at metoden GET sender data via URL'en, mens POST sender dataene i kroppen af HTTP-anmodningen. Du kan ændre anmodningstypen ved at justere method-attributtet i <form>-tagget.

8. Simulering af serverreaktion

Da du sandsynligvis ikke har en rigtig server til rådighed under testningen af dit formular, kan du tilpasse action-URL'en for at simulere en anden HTML-side, som brugerne bliver ledt videre til efter at have indsendt formularen. Opret en ny HTML-fil, som f.eks. indeholder en takkeside.

9. Fejlfinding og Debugging

Hvis der opstår fejl ved indsendelse af formularen, skal du tjekke browserens netværksværktøjer. Her kan du se, om formularen blev sendt korrekt, og hvilke data der blev sendt. Hold også øje med eventuelle 404-fejl, som viser, at destinations-URL'en ikke blev fundet.

10. Afslutning og Fremtidsperspektiver

Nu har du grundlæggende forståelse for oprettelse af HTML-formularer. Du kan udvide denne teknik til at oprette mere komplekse formularer, der indeholder forskellige indtastningstyper og valideringer. I den næste vejledning vil du lære, hvordan man reagerer på formularindgange med JavaScript og udfører asynkrone dataoverførsler.

Oversigt

I denne vejledning har du lært strukturen og funktionen af din første HTML-formular. Du ved nu, hvordan man opretter indtastningsfelter, labels og knapper, og hvordan de sendte data overføres via URL'en eller i kroppen af en POST-anmodning.