close

Introduksjon til Form i HTML: Struktur, inputtyper og eksempler

HTML form er en avgjørende del av webutvikling som lar brukere samhandle med et nettsted og sende inn data til en server. Form brukes til et bredt spekter av formål, for eksempel å samle inn brukere form, behandle brukerinndata og aktivere brukerhandlinger på et nettsted. I denne artikkelen vil vi utforske attributtene og forskjellige typer inndatafelt, velge elementer, tekstområder og knapper som vanligvis brukes i HTML form.

Inndatafelt

  • <input type="text">: Oppretter et tekstinntastingsfelt der brukere kan skrive inn alfanumeriske tegn.
  • <input type="password">: Viser et passordinntastingsfelt som maskerer de angitte tegnene.
  • <input type="email">: Gir e-postvalidering for inndatafelt som krever en gyldig e-postadresse.
  • <input type="number">: Begrenser inndata til kun numeriske verdier.
  • <input type="checkbox">: Representerer en avmerkingsboks som brukere kan velge eller oppheve.
  • <input type="radio">: Representerer en alternativknapp som lar brukere velge ett alternativ fra en gruppe alternativer.
  • <input type="file">: Gjør det mulig for brukere å velge og laste opp filer.
  • <input type="submit">: Viser en knapp som sender inn form når du klikker.
  • <input type="reset">: Viser en knapp som tilbakestiller form til sin opprinnelige tilstand.
  • <input type="date">: Gir en datovelger for valg av datoer.
  • <input type="time">: Lar brukere legge inn tidsverdier.

Velg Elementer

  • <select>: Oppretter en rullegardinmeny med valgbare alternativer.
  • <option>: Definerer et alternativ i rullegardinmenyen, plassert inne i <select> taggen.
  • <optgroup>: Grupper relaterte alternativer sammen i rullegardinmenyen.
  • <select multiple>: Lar brukere velge flere alternativer samtidig ved å holde nede Ctrl-tasten(eller Kommando-tasten på Mac) mens de klikker.

Tekstområder

<textarea>: Oppretter et tekstinntastingsfelt med flere linjer der brukere kan skrive inn og redigere lengre tekstblokker. Den kan endres størrelse og konfigureres med attributter som rows og cols for å definere dimensjonene.

Knapper

<button>: Representerer en knapp som kan utløse ulike handlinger i en form. Den kan brukes til å sende inn en form, i henhold til form en JavaScript-funksjon, eller navigere til en annen side.

Eksempelbruk:

<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 eksemplet viser bruken av ulike form elementer, inkludert input felt, textarea, og en knapp. Tilpass gjerne elementene og attributtene basert på dine spesifikke krav. checkbox select dropdown submit form