Formularer i HTML

En formular kan benyttes til at modtage informationer fra brugeren, som kan indtaste dem på siden. Tagget til at lave en formular hedder <form>. Imellem åbnings- og lukningstagget skal <input>-tagget indsættes. <input>-tagget har attributten type som specificerer hvilken slags formular der skal benyttes. Listen over typen af formularer kan ses her:

Nedenstående kodestykke definerer et tekstfelt og et adganskodefelt, hvor man kan indsætte sit brugernavn og adgangskode. Til sidst er der også defineret en “Indsend”-knap:

<form>
  <label for = "Fornavn">Fornavn:</label><br>
  <input type = "text" id = "Formular"><br>
  <label for = "Efternavn">Efternavn:</label><br>
  <input type = "text" id = "Efternavn"><br>
  <input type = "submit" value = "Indsend">
</form>

Bemærk <label>-tagget som definerer en mærkat for tekstfeltet og adgangskodefeltet. Værdien af attributten for i <label>-tagget skal være lig med værdien af attributten id i <input>-tagget. På Submit-knappen står der “Indsend”. Denne tekst er valgt ved at benytte attributten value i <input>-tagget. value kan også benyttes til de fleste andre <input> typer til at indsætte værdier i felterne, så de ikke er tomme

Formularen vil se sådan her ud i browseren:

Her er indtastet “Oliver” som brugernavn og en talkombination i adgangskode-feltet. Læg mærke til at fordi adgangskode-feltet har typen “password”, så vil talkombinationen blive skjult med sorte prikker.

Det ovenstående eksempel har illustreret benyttelse af tre input typer: “text”, “password” og “submit”.

Nedenstående kodestykke er et eksempel på benyttelse af “radio”-typen:

<form>
  <input type = "radio" id = "Mand" name = "Køn" value = "Mand">
  <label for = "Mand">Mand</label><br>
  <input type = "radio" id = "Kvinde" name = "Køn" value = "Kvinde">  
  <label for = "Kvinde">Kvinde</label><br>
  <input type = "radio" id = "Andet" name = "Køn" value = "Andet">
  <label for = "Andet">Andet</label><br> 
</form>

Kodestykket vil resultere i følgende formular:

<form>
  <label for = "Alder">Hvor gammel er du?</label><br>
  <input type = "number" id = "Alder" name = "Alder" step= "1">  
</form>

<form>
  <label for = "Lydstyrke">Lydstyrke: </label><br>
  <input type = "range" id = "Lydstyrke" name = "Lydstyrke" min = "0" max = "10" step = "1">  
</form>

<form>
  <p>Hvad interesserer du dig for?</p>
  <label for = "Musik">Musik</label>
  <input type = "checkbox" id = "Musik" name = "Interesser" value = "Musik">
  <br>
  <label for = "Film">Film</label> 
  <input type = "checkbox" id = "Film" name = "Interesser" value = "Film">  
  <br>
  <label for = "Spil">Spil</label> 
  <input type = "checkbox" id = "Spil" name = "Interesser" value = "Spil">
</form>

Gå videre til Inddeling i HTML her →