Artikel

Formularer i HTML — form-tagget og SEO

HTML-formularer håndterer brugerinput — korrekt markup med labels og semantiske input-typer forbedrer accessibility og UX.

Hvad er HTML-formularer?

HTML-formularer er interaktive elementer der indsamler brugerinput — søgninger, kontaktformularer, login, tilmeldinger og checkout. Formularer er et fundamentalt element på de fleste websites og en vigtig del af brugerrejsen.

Korrekt formular-markup er vigtig for tilgængelighed, UX og Googles forståelse af sidens funktionalitet.

form-tagget — grundlæggende syntaks

<form action="/submit" method="post">
  <!-- Formularfelter her -->
  <button type="submit">Send</button>
</form>

action-attributten angiver URL’en der modtager formulardata. Udelades action, sendes data til den aktuelle sides URL.

method-attributten angiver HTTP-metoden:

GET: Formulardata tilføjes til URL’en som query string: ?navn=Morten&email=.... Egnet til søgeformularer — resultater kan bookmarkes og deles. Synlig i URL.

POST: Formulardata sendes i request body — ikke synlig i URL. Egnet til data der ændrer state: login, kontaktformularer, køb.

Input-typer — semantisk korrekt

HTML5 introducerede mange specifikke input-typer der forbedrer UX markant — mobilklaviaturer skifter automatisk til det relevante type:

<input type="text" name="navn">        <!-- Fri tekst -->
<input type="email" name="email">      <!-- E-mail tastatur på mobil, validering -->
<input type="tel" name="telefon">      <!-- Telefonnummer-tastatur på mobil -->
<input type="number" name="antal">     <!-- Numerisk tastatur -->
<input type="date" name="dato">        <!-- Datovælger -->
<input type="password" name="adg">     <!-- Skjult tekst -->
<input type="checkbox" name="accept">  <!-- Afkrydsningsfelt -->
<input type="radio" name="valg">       <!-- Valgknap -->
<input type="search" name="q">         <!-- Søgefelt med X-knap -->
<input type="hidden" name="token">     <!-- Skjult felt, ikke synligt -->

Korrekte input-typer forbedrer UX (specielt på mobil), aktiverer browser-validering og giver kontekst til hjælpemidler.

label-elementet — accessibility og UX

<label> er afgørende for tilgængelighed og god UX. Labelen tilknyttes inputfeltet via for/id-attributter:

<label for="email">E-mailadresse</label>
<input type="email" id="email" name="email">

Fordele ved korrekte labels:

  • Skærmlæsere annoncerer labelens tekst når feltet focueres
  • Klik på labelen aktiverer inputfeltet (større klikflade)
  • Browsere bruger label-teksten til autofill-forslag
  • Google forstår formularens formål bedre

Placeholder er ikke en erstatning for label:

<!-- Forkert — placeholder forsvinder ved input -->
<input type="email" placeholder="Din e-mail">

<!-- Korrekt — label er altid synlig -->
<label for="email">E-mailadresse</label>
<input type="email" id="email" placeholder="[email protected]">

fieldset og legend

For grupper af relaterede felter — specielt radio buttons og checkboxes — brug <fieldset> og <legend>:

<fieldset>
  <legend>Foretrukket kontaktmetode</legend>
  <label>
    <input type="radio" name="kontakt" value="email"> E-mail
  </label>
  <label>
    <input type="radio" name="kontakt" value="telefon"> Telefon
  </label>
</fieldset>

Skærmlæsere annoncerer legend-teksten for hvert felt i gruppen.

Hvad Googlebot gør med formularer

Googlebot crawler ikke formularindhold via POST-requests. Det betyder:

  • Indhold bag formularer (søgeresultater genereret via formular, indhold bag login) indekseres ikke
  • GET-formularer (søgeformularer) kan crawles delvist — Google kan følge søge-URL’er
  • Formulardataene behandles ikke

Sikkerhedsimplifikation: Din formulars backend er naturligt skjult for Googlebot. Du behøver ikke bekymre dig om at Google indekserer dine formularhandlinger.

Structured data til søgeformularer

Google understøtter SearchAction structured data til sitelinks-søgeboksen — en søgeboks der vises direkte under dit resultat i SERP:

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://ditsite.dk/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://ditsite.dk/soeg/?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}

Skal jeg bruge GET eller POST til kontaktformularer? POST til kontaktformularer — data bør ikke vises i URL’en og POST er korrekt til data der sendes og gemmes.

Er placeholder det samme som label? Nej. Placeholder forsvinder når brugeren begynder at taste og huskes ikke af tilgængelighedstools. Label er altid synlig og er den korrekte løsning til formularfelters navngivning.

Kan Google se hvad der sker i en formular? Nej. Googlebot eksekverer ikke formularindsendelse. Indhold bag formularer er ikke synligt for Google medmindre det er tilgængeligt via en crawlbar URL.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.

Andre artikler i samme emne

Placering i ordbogen