Interaksjon og Skjema

Hittil har vi sett hvordan data flyter fra Script til HTML. Men hva hvis vi vil at brukeren skal endre dataene?

1. UI Verdenen (Input)

Dette er vanlige HTML-skjemaelementer, men vi bruker bind:value for å koble dem til variablene våre.

bind:value={navn}
17 bind:value={alder}
#38bdf8
bind:value={favorittFarge}
bind:checked={medlem}

2. Data Verdenen (State)

Her ser du "sannheten" slik datamaskinen husker den. Når du endrer noe til venstre, oppdateres dette umiddelbart.

let navn = "";
let alder = 17;
let favorittFarge = "#38bdf8";
let medlem = false;

Live Preview

Hei ukjente!
Du er ganske ung.

🗝️ Sentrale Begreper

  • Skjema (Form): En samling med felter hvor brukeren kan legge inn data (tekst, valg, tall).
  • Two-way Binding (bind:value): Sveltes superkraft. Det betyr at dataene flyter begge veier:
    • Fra JS til HTML (viser verdien).
    • Fra HTML til JS (oppdaterer variabelen når du skriver).
  • Event: En hendelse, som at brukeren trykker en tast eller klikker en knapp.