Formularer

Formularer er et centralt værktøj til at indsamle brugerinput og sende det til en server til behandling. De består af forskellige formelementer, der gør det muligt for brugere at indtaste data. I dette kursus sender vi dog ikke nogen data til en server, da det kræver yderligere viden, som ligger uden for dette kursus' omfang.

Alle eksempler i koden har attributten onsubmit="return false". Denne attribut forhindrer formularen i at sende en anmodning til serveren som standard.

Oprettelse af formularer

<form>-tagget bruges til at oprette en interaktiv formular på en webside. Det indeholder forskellige formelementer til brugerinput.
Eksempel:

<form>
  <!-- Form elements go here -->
</form>

Formelementer

HTML tilbyder forskellige inputtyper til indsamling af brugerinput. Hver type har specifikke attributter og egenskaber. Det er også muligt at angive en label for hvert input. Labels bruges til at forbinde tekst med formelementer, hvilket giver en mere tilgængelig og brugervenlig oplevelse. Vi gennemgår labels og inputs mere detaljeret i de følgende kapitler.
Eksempel:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Formularindsendelse

Indsendelse af en formular udløses af en submit-knap (<button type="submit">), som kan sende formularens data til serveren til behandling.
Eksempel:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Her er et grundlæggende formular-eksempel.

Videovejledning