Frontend
Backend
Verktøy og Rammeverk
Sikkerhet

HTML-skjemaer og brukerinput

Lær hvordan du lager interaktive skjemaer for å samle inn data fra brukere

Skjemavalidering og attributter

HTML5 tilbyr innebygd validering som hjelper brukerne å fylle ut skjemaer korrekt:

Påkrevde felt

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

Mønstervalidering

<input type="text" pattern="[A-Za-z]{3,}" 
       title="Minimum tre bokstaver">

Min og max verdier

<input type="number" min="0" max="100">
<input type="date" min="2024-01-01" max="2024-12-31">

Viktige valideringsattributter:

  • required - Feltet må fylles ut
  • pattern - Regulært uttrykk for validering
  • minlength/maxlength - Minimum/maksimum lengde for tekst
  • min/max - Minimum/maksimum verdier for tall og datoer
  • type - Spesifiserer inputtype (email, tel, url, etc.)

Komplett skjemaeksempel

Her er et eksempel på et påmeldingsskjema som bruker flere av elementene vi har lært om:

NB! Dette eksempelet viser ren HTML med CSS-styling. Utseendet vil se annerledes ut hvis du bruker dette skjemaet uten CSS-stilsetting.
Personlig informasjon
Kursvalg

Velg tidspunkt:

Tilleggsinformasjon

Velg tilleggsmateriell:

HTML-koden for skjemaet over:

<form action="/registrer" method="post">
    <fieldset>
        <legend>Personlig informasjon</legend>
        
        <label for="fornavn">Fornavn:</label>
        <input type="text" id="fornavn" name="fornavn" required>
        
        <label for="etternavn">Etternavn:</label>
        <input type="text" id="etternavn" name="etternavn" required>
        
        <label for="epost">E-post:</label>
        <input type="email" id="epost" name="epost" required>
        
        <label for="telefon">Telefon:</label>
        <input type="tel" id="telefon" name="telefon" pattern="[0-9]{8}">
    </fieldset>

    <fieldset>
        <legend>Kursvalg</legend>
        
        <label for="kurs">Velg kurs:</label>
        <select id="kurs" name="kurs" required>
            <option value="">Velg et kurs...</option>
            <optgroup label="Programmering">
                <option value="html">HTML og CSS</option>
                <option value="js">JavaScript</option>
                <option value="php">PHP</option>
            </optgroup>
            <optgroup label="Design">
                <option value="ui">UI Design</option>
                <option value="ux">UX Design</option>
            </optgroup>
        </select>

        <p>Velg tidspunkt:</p>
        <input type="radio" id="dag" name="tidspunkt" value="dag">
        <label for="dag">Dagkurs</label>
        
        <input type="radio" id="kveld" name="tidspunkt" value="kveld">
        <label for="kveld">Kveldskurs</label>
    </fieldset>

    <fieldset>
        <legend>Tilleggsinformasjon</legend>
        
        <p>Velg tilleggsmateriell:</p>
        <input type="checkbox" id="bok" name="materiell[]" value="bok">
        <label for="bok">Kursbok</label>
        
        <input type="checkbox" id="video" name="materiell[]" value="video">
        <label for="video">Videoopptak</label>
        
        <input type="checkbox" id="notat" name="materiell[]" value="notat">
        <label for="notat">Kursnotater</label>

        <br><br>
        <label for="kommentar">Kommentarer:</label>
        <textarea id="kommentar" name="kommentar" rows="4" cols="50"></textarea>
    </fieldset>

    <button type="submit">Meld meg på kurset</button>
    <button type="reset">Nullstill skjema</button>
</form>

HTML Innhold

1. Grunnleggende HTML 2. Semantiske Elementer 3. Skjemaer 4. Tabeller og Lister 5. Bilder og Multimedia 6. Lenker 7. Metadata