Skjemaer

Skjemaer lar brukere sende data til serveren - pålogging, registrering, søk, kontaktskjemaer og mer.

Grunnleggende skjema

<form action="/send" method="post">
    <label for="name">Navn:</label>
    <input type="text" id="name" name="name">

    <button type="submit">Send</button>
</form>

Form-elementet

<form action="/endpoint" method="post">
    ...
</form>

Attributt	Beskrivelse
`action`	URL dit dataen sendes
`method`	HTTP-metode (`get` eller `post`)

GET vs POST

Metode	Bruk
`get`	Søk, filtrering (data synlig i URL)
`post`	Pålogging, registrering (data skjult)

Label og input

Koble label til input

<!-- Metode 1: for/id -->
<label for="email">E-post:</label>
<input type="text" id="email" name="email">

<!-- Metode 2: nøstet -->
<label>
    E-post:
    <input type="text" name="email">
</label>

Viktig

Alltid bruk <label> - det gjør skjemaet tilgjengelig og klikkområdet større.

Input-typer

Tekst

<input type="text" name="username" placeholder="Brukernavn">

E-post

<input type="email" name="email" placeholder="din@epost.no">

Validerer automatisk at det er en gyldig e-postadresse.

Passord

<input type="password" name="password">

Skjuler det som skrives.

Tall

<input type="number" name="age" min="0" max="120">
<input type="number" name="quantity" step="1">

Telefon

<input type="tel" name="phone" placeholder="12345678">

Viser talltastatur på mobil.

URL

<input type="url" name="website" placeholder="https://example.com">

Dato og tid

<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
<input type="month" name="expiry">
<input type="week" name="week">

Farge

<input type="color" name="favorite-color" value="#ff0000">

Åpner en fargevelger.

Område (range)

<input type="range" name="volume" min="0" max="100" value="50">

Viser en slider.

Skjult felt

<input type="hidden" name="user_id" value="123">

Sender data uten å vise det.

Fil

<input type="file" name="document">
<input type="file" name="images" multiple accept="image/*">

Checkbox og radio

Checkbox (flervalg)

<label>
    <input type="checkbox" name="interests" value="sport"> Sport
</label>
<label>
    <input type="checkbox" name="interests" value="music"> Musikk
</label>
<label>
    <input type="checkbox" name="interests" value="gaming"> Gaming
</label>

Radio (enkeltvalg)

<label>
    <input type="radio" name="gender" value="male"> Mann
</label>
<label>
    <input type="radio" name="gender" value="female"> Kvinne
</label>
<label>
    <input type="radio" name="gender" value="other"> Annet
</label>

Samme name

Radioknapper med samme name tilhører samme gruppe - bare én kan velges.

Textarea

For lengre tekst:

<label for="message">Melding:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

Attributt	Beskrivelse
`rows`	Antall synlige linjer
`cols`	Antall tegn per linje

<label for="country">Land:</label>
<select id="country" name="country">
    <option value="">Velg land</option>
    <option value="no">Norge</option>
    <option value="se">Sverige</option>
    <option value="dk">Danmark</option>
</select>

Med grupper

<select name="car">
    <optgroup label="Svenske">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="Tyske">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

Flervalg

<select name="skills" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="python">Python</option>
</select>

Datalist

Kombinerer input med forslag:

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

Knapper

<button type="submit">Send</button>
<button type="reset">Nullstill</button>
<button type="button">Vanlig knapp</button>

Type	Funksjon
`submit`	Sender skjemaet
`reset`	Nullstiller alle felt
`button`	Ingen standard handling

Validering

Required

<input type="text" name="name" required>

Må fylles ut.

Pattern

<input type="text" name="postnr" pattern="[0-9]{4}" title="4 siffer">

Må matche mønsteret.

Min/max

<input type="number" name="age" min="18" max="99">
<input type="text" name="username" minlength="3" maxlength="20">

Validerings-attributter

Attributt	Beskrivelse
`required`	Påkrevd felt
`minlength`	Minimum tegn
`maxlength`	Maksimum tegn
`min`	Minimum verdi
`max`	Maksimum verdi
`pattern`	Regex-mønster
`step`	Gyldige intervaller

Fieldset og legend

Grupper relaterte felt:

<fieldset>
    <legend>Personlig informasjon</legend>

    <label for="fname">Fornavn:</label>
    <input type="text" id="fname" name="fname">

    <label for="lname">Etternavn:</label>
    <input type="text" id="lname" name="lname">
</fieldset>

<fieldset>
    <legend>Kontaktinfo</legend>

    <label for="email">E-post:</label>
    <input type="email" id="email" name="email">
</fieldset>

Andre attributter

Attributt	Beskrivelse
`placeholder`	Hjelpetekst i feltet
`value`	Forhåndsutfylt verdi
`disabled`	Deaktivert felt
`readonly`	Kan ikke endres
`autofocus`	Fokus ved sidelast
`autocomplete`	Nettleserforslag

<input type="text" placeholder="Skriv her..." autofocus>
<input type="text" value="Forhåndsutfylt" readonly>
<input type="text" disabled>

Komplett eksempel

<form action="/register" method="post">
    <fieldset>
        <legend>Registrering</legend>

        <div>
            <label for="username">Brukernavn:</label>
            <input type="text" id="username" name="username"
                   required minlength="3" maxlength="20">
        </div>

        <div>
            <label for="email">E-post:</label>
            <input type="email" id="email" name="email" required>
        </div>

        <div>
            <label for="password">Passord:</label>
            <input type="password" id="password" name="password"
                   required minlength="8">
        </div>

        <div>
            <label for="birthdate">Fødselsdato:</label>
            <input type="date" id="birthdate" name="birthdate">
        </div>

        <div>
            <label for="country">Land:</label>
            <select id="country" name="country" required>
                <option value="">Velg land</option>
                <option value="no">Norge</option>
                <option value="se">Sverige</option>
                <option value="dk">Danmark</option>
            </select>
        </div>

        <div>
            <label>
                <input type="checkbox" name="terms" required>
                Jeg godtar vilkårene
            </label>
        </div>

        <button type="submit">Registrer</button>
    </fieldset>
</form>

Skjemaer og JavaScript

For å håndtere skjemadata med JavaScript, se Events og DOM-referansen.

Oppsummering

Element	Bruk
`<form>`	Container for skjema
`<input>`	Inputfelt
`<label>`	Beskrivelse av felt
`<textarea>`	Flerlinjet tekst
`<select>`	Dropdown-meny
`<option>`	Valg i select
`<button>`	Knapper
`<fieldset>`	Gruppering
`<legend>`	Tittel for gruppe
`<datalist>`	Forslag til input