HTML Skjema (Forms)

Skjemaer er måten vi samler inn informasjon fra brukeren på. I ren HTML handler dette om struktur og semantikk.

1. Grunnleggende Struktur

Et godt skjema består av par med <label> (merkelapp) og <input> (felt) i et <form> element. Et skjema avsluttes gjerne med et <button type="button"> element.

<form id="formNavn">
   <label for="navn">Ditt
                navn:</label>
   <input type="text" id="navn" name="navn">
   <button type="button">Send
                inn</button> 
 </form>

Ditt navn:

Viktig regel: `for`-attributtet på label må matche `id`-attributtet på input. Dette gjør at man kan trykke på teksten for å aktivere feltet.

2. Knapper

Knapper brukes til å utføre handlinger. I moderne web-apper (som Svelte) vil vi ofte unngå at skjemaet lastes på nytt.

<!-- ✅ RIKTIG: Gjør ingenting før vi sier det (JS)
                    -->
 <button type="button">Klikk
                meg</button>

 <!-- ❌ UNNGÅ: Gamle måten (laster siden på nytt) -->
 <button>Send inn</button> <!-- (default type="submit") -->

 <!-- ❌ UNNGÅ: Utdatert stil -->
 <input type="button" value="Klikk meg">

3. Vanlige Input Typer

`type`-attributtet bestemmer hvordan feltet ser ut og fungerer på mobil (f.eks. riktig tastatur).

type="text" : Vanlig tekst.
type="number" : Kun tall (åpner tall-tastatur på mobil).
type="email" : Krever @ og domene.
type="password" : Skjuler tegnene (••••).
type="date" : Datovelger.
type="color" : Fargevelger.

4. Valg (Radio, Checkbox, Select)

Radio (Ett valg)

Viktig: Alle må ha samme name for å vite at de hører sammen (kun én kan velges).

Eple Pære

<label><input type="radio" name="frukt" value="eple"> Eple</label>
 <label><input type="radio" name="frukt" value="pare">
                Pære</label>

Checkbox (Flere valg)

Bruk checked hvis den skal være valgt fra start.

Nyhetsbrev Vilkår

<input type="checkbox" checked>
                Nyhetsbrev
 <input type="checkbox"> Vilkår

Select (Nedtrekksmeny)

Husk value på hvert valg. Det er dette som sendes til serveren.

Velg by:

<select id="by">
   <option value="oslo">Oslo</option>
   <option value="bergen">Bergen</option>
   <option value="trondheim">Trondheim</option>
 </select>

🗝️ Sentrale Attributter

type: Bestemmer typen felt (text, button, checkbox...).
id: Unik identifikator for feltet. Brukes av label (`for`) og CSS/JS.
name: Navnet på dataene når de sendes (spesielt viktig for radio buttons).
value: Verdien som står i feltet (eller verdien som sendes ved valg).
placeholder: Hjelpetekst som vises når feltet er tomt (grå tekst).