close

Introduktion til Form i HTML: Struktur, inputtyper og eksempler

HTML form er en afgørende del af webudvikling, der giver brugerne mulighed for at interagere med et websted og indsende data til en server. Form bruges til en bred vifte af formål, såsom at indsamle brugerindgang form, behandle brugerinput og aktivere brugerhandlinger på et websted. I denne artikel vil vi udforske de attributter og forskellige typer inputfelter, udvalgte elementer, tekstområder og knapper, der almindeligvis bruges i HTML form.

Indtastningsfelter

  • <input type="text">: Opretter et tekstindtastningsfelt, hvor brugere kan indtaste alfanumeriske tegn.
  • <input type="password">: Viser et kodeordsindtastningsfelt, der maskerer de indtastede tegn.
  • <input type="email">: Giver e-mail-validering for inputfelter, der kræver en gyldig e-mailadresse.
  • <input type="number">: Begrænser input til kun numeriske værdier.
  • <input type="checkbox">: Repræsenterer et afkrydsningsfelt, som brugere kan vælge eller fravælge.
  • <input type="radio">: Repræsenterer en alternativknap, der giver brugerne mulighed for at vælge en indstilling fra en gruppe af muligheder.
  • <input type="file">: Gør det muligt for brugere at vælge og uploade filer.
  • <input type="submit">: Viser en knap, der sender den, form når der klikkes.
  • <input type="reset">: Viser en knap, der nulstiller form til sin oprindelige tilstand.
  • <input type="date">: Giver en datovælger til valg af datoer.
  • <input type="time">: Giver brugere mulighed for at indtaste tidsværdier.

Vælg Elementer

  • <select>: Opretter en rullemenu med valgbare muligheder.
  • <option>: Definerer en mulighed i rullemenuen, placeret inde i <select> tagget.
  • <optgroup>: Grupperer relaterede muligheder sammen i rullemenuen.
  • <select multiple>: Giver brugere mulighed for at vælge flere muligheder samtidigt ved at holde Ctrl-tasten nede(eller Kommando-tasten på Mac), mens de klikker.

Tekstområder

<textarea>: Opretter et tekstindtastningsfelt med flere linjer, hvor brugere kan indtaste og redigere længere tekstblokke. Det kan ændres størrelse og konfigureres med attributter såsom rows og cols for at definere dets dimensioner.

Knapper

<button>: Repræsenterer en knap, der kan udløse forskellige handlinger inden for en form. Den kan bruges til at indsende en form, i henhold til form en JavaScript-funktion eller navigere til en anden side.

Eksempel på brug:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Dette eksempel viser brugen af ​​forskellige form elementer, herunder input felter, textarea, og en knap. Du er velkommen til at tilpasse elementerne og egenskaberne ud fra dine specifikke krav. checkbox select dropdown submit form