De fleste HTML-skjemaer jeg støter på i produksjon bruker tre inputtyper: text, password og submit. Det er alt. Samtidig har HTML hatt rike innebygde inputtyper, begrensningsvalidering og tilgjengelighetsfunksjoner i årevis — alle tilgjengelige uten JavaScript og uten npm install. La oss bruke dem.

Inputtyper Verdt å Kjenne

Hver inputtype gjør virkelig arbeid for deg: den utløser riktig mobilklaviatur, gir innebygd validering og kommuniserer hensikten til hjelpeteknologier. Her er de som jevnlig dukker opp i virkelige prosjekter:

html
<!-- Email: validates format, shows email keyboard on mobile -->
<input type="email" name="email" autocomplete="email">

<!-- Phone: shows numeric keypad on mobile -->
<input type="tel" name="phone" autocomplete="tel" pattern="[0-9]{10,15}">

<!-- Number: spin buttons, min/max/step validation -->
<input type="number" name="quantity" min="1" max="99" step="1" value="1">

<!-- Date: native date picker (no library needed) -->
<input type="date" name="birthdate" min="1900-01-01" max="2026-12-31">

<!-- Range: slider with min/max/step -->
<input type="range" name="volume" min="0" max="100" step="5" value="50">

<!-- Color: native color picker -->
<input type="color" name="theme_color" value="#0066cc">

<!-- File: single or multiple file upload -->
<input type="file" name="resume" accept=".pdf,.doc,.docx">
<input type="file" name="photos" accept="image/*" multiple>
Tips: type="date" returnerer verdien i formatet YYYY-MM-DD uavhengig av brukerens lokalitet — som er nøyaktig det du vil ha når du sender til en server. Parse aldri datoer fra type="text"-inputs hvis du kan unngå det.

Etikettilknytning — Gjør Det Riktig

Etiketter er ikke valgfri dekorasjon. De er den primære måten skjermlesere identifiserer inputs på, og å klikke på en etikett bør fokusere det tilknyttede inputet. Det er to gyldige tilnærminger:

html
<!-- Method 1: for/id association (most common, most flexible) -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Method 2: wrapping label (no id needed) -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Wrong: placeholder is NOT a label -->
<input type="email" name="email" placeholder="Email address">
<!-- placeholder disappears when the user starts typing — terrible UX for screen readers -->

Tilnærmingen med for/id er vanligvis å foretrekke fordi det holder etiketter og inputs frakoblet i DOM, noe som er lettere å style. Stol aldri på placeholder som etikettsubstitutt — det svikter brukere med kognitive funksjonshemninger og forsvinner i det øyeblikket noen begynner å skrive. W3C WAIs etikettopplæring og WebAIMs veiledning om skjemakontroller dekker tilgjengelighetsbegrunnelsen mer inngående.

Innebygd Begrensningsvalidering

HTML's innebygde begrensningsvalidering kjøres før skjemainnlevering og er genuint kraftfull. Du får mye nyttig atferd gratis:

html
<form>
  <!-- required: field must have a value -->
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="fullname" required>

  <!-- minlength/maxlength: character count constraints -->
  <label for="username">Username (3–20 chars)</label>
  <input type="text" id="username" name="username"
         minlength="3" maxlength="20" required>

  <!-- pattern: regex-based validation -->
  <label for="postcode">UK Postcode</label>
  <input type="text" id="postcode" name="postcode"
         pattern="[A-Z]{1,2}[0-9][0-9A-Z]?s?[0-9][A-Z]{2}"
         title="Enter a valid UK postcode (e.g. SW1A 1AA)"
         required>

  <!-- min/max on date -->
  <label for="checkin">Check-in date</label>
  <input type="date" id="checkin" name="checkin"
         min="2026-04-16" required>

  <button type="submit">Submit</button>
</form>
  • required. Feltet må ikke være tomt. På avkrysningsbokser må det være avkrysset.
  • pattern. Et regex som verdien må matche. Legg alltid til et title-attributt — det blir valideringsverktøytipsteksten og gir brukerne et hint om det forventede formatet.
  • minlength / maxlength. Antall tegn for tekstinputs. maxlength avkutter stille inndata; minlength validerer bare ved innlevering.
  • min / max. Numeriske eller datobaserte grenser. Fungerer på number-, date-, range- og time-inputs.
  • step. Definerer gyldige inkrementer. step="0.01" på et valutafelt tillater øre. step="any" deaktiverer trinnkontrollen helt.

fieldset og legend for Gruppering

Når du har en gruppe relaterte inputs — særlig radioknapper eller avkrysningsbokser — grupperer <fieldset> og <legend> dem semantisk. Skjermlesere leser legenden før hvert input i gruppen, slik at brukerne alltid vet hvilket spørsmål en radioknapp besvarer.

html
<form>
  <fieldset>
    <legend>Preferred contact method</legend>

    <label>
      <input type="radio" name="contact" value="email" checked>
      Email
    </label>
    <label>
      <input type="radio" name="contact" value="phone">
      Phone
    </label>
    <label>
      <input type="radio" name="contact" value="post">
      Post
    </label>
  </fieldset>

  <fieldset>
    <legend>Notification preferences</legend>

    <label>
      <input type="checkbox" name="notify_new_posts" value="1">
      New articles
    </label>
    <label>
      <input type="checkbox" name="notify_replies" value="1">
      Replies to my comments
    </label>
  </fieldset>
</form>

API for Begrensningsvalidering

API for begrensningsvalidering gir deg JavaScript-tilgang til den samme valideringslogikken som nettleseren bruker innebygd. Det lar deg utløse validering programmatisk og sette tilpassede feilmeldinger uten å blokkere innlevering:

js
const usernameInput = document.getElementById('username');

// Check if a single field is valid
console.log(usernameInput.checkValidity()); // true or false
console.log(usernameInput.validity.tooShort); // true if below minlength
console.log(usernameInput.validity.patternMismatch); // true if pattern fails

// Set a custom error message (shows in the browser's native validation tooltip)
usernameInput.setCustomValidity('That username is already taken.');
usernameInput.reportValidity(); // triggers the tooltip immediately

// Clear a custom error (important — once set, it sticks until cleared)
usernameInput.setCustomValidity('');

// Validate on the fly as the user types (async example — username availability)
usernameInput.addEventListener('input', async () => {
  const value = usernameInput.value;
  if (value.length < 3) return; // let minlength handle this

  const response = await fetch(`/api/check-username?q=${encodeURIComponent(value)}`);
  const { available } = await response.json();

  usernameInput.setCustomValidity(available ? '' : 'Username is already taken.');
});

Legg merke til den kritiske detaljen: når du kaller setCustomValidity() med en ikke-tom streng, er feltet permanent ugyldig til du rydder det ved å kalle setCustomValidity(''). Å glemme ryddetrinnet er den vanligste feilen når man bruker dette API-et.

novalidate for Tilpasset JS-validering

Hvis du bygger et tilpasset valideringsgrensesnitt med stiliserte feilmeldinger (ikke nettleserens native tooltips), legg til novalidate i skjemaet. Det deaktiverer nettlesernativ validering mens API for begrensningsvalidering holdes tilgjengelig for dine egne kontroller:

html
<form id="signup-form" novalidate>
  <div class="field">
    <label for="signup-email">Email</label>
    <input type="email" id="signup-email" name="email" required>
    <span class="error" aria-live="polite"></span>
  </div>

  <div class="field">
    <label for="signup-password">Password</label>
    <input type="password" id="signup-password" name="password" minlength="8" required>
    <span class="error" aria-live="polite"></span>
  </div>

  <button type="submit">Create account</button>
</form>
js
const form = document.getElementById('signup-form');

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let isValid = true;

  form.querySelectorAll('input').forEach((input) => {
    const errorEl = input.nextElementSibling;

    if (!input.checkValidity()) {
      isValid = false;
      errorEl.textContent = input.validationMessage;
      input.setAttribute('aria-invalid', 'true');
    } else {
      errorEl.textContent = '';
      input.removeAttribute('aria-invalid');
    }
  });

  if (isValid) {
    form.submit();
  }
});

autocomplete og aria-describedby

To attributter som vesentlig forbedrer skjema-UX og er lette å overse:

html
<!-- autocomplete: tells browsers/password managers what the field is for -->
<input type="text"     name="fname"    autocomplete="given-name">
<input type="text"     name="lname"    autocomplete="family-name">
<input type="email"    name="email"    autocomplete="email">
<input type="tel"      name="phone"    autocomplete="tel">
<input type="password" name="password" autocomplete="current-password">
<input type="password" name="new_pass" autocomplete="new-password">
<input type="text"     name="cc"       autocomplete="cc-number">

<!-- aria-describedby: links an input to a hint or error message -->
<label for="pass">Password</label>
<input
  type="password"
  id="pass"
  name="password"
  minlength="8"
  aria-describedby="pass-hint"
  required
>
<span id="pass-hint">Must be at least 8 characters.</span>

Attributtet autocomplete bruker standardiserte tokenverdier definert av WHATWG-spesifikasjonen. Når du bruker riktig token, kan nettlesere og passordadministratorer fylle ut felt pålitelig automatisk. aria-describedby knytter et hint eller feilmelding til et input — skjermlesere leser beskrivelsen etter feltetiketten, noe som gjør begrensningene hørbare før brukeren begynner å skrive.

Et Komplett Tilgjengelig Innloggingsskjema

Her er alt kombinert — et innloggingsskjema som fungerer for tastaturbrukere, skjermleserbrukere og mobilbrukere, med bare HTML og en liten mengde JavaScript:

html
<form id="login-form" novalidate>
  <h2>Sign in</h2>

  <div class="field">
    <label for="login-email">Email address</label>
    <input
      type="email"
      id="login-email"
      name="email"
      autocomplete="email"
      aria-describedby="email-error"
      required
    >
    <span id="email-error" class="error" aria-live="polite" role="alert"></span>
  </div>

  <div class="field">
    <label for="login-password">Password</label>
    <input
      type="password"
      id="login-password"
      name="password"
      autocomplete="current-password"
      aria-describedby="password-error"
      required
    >
    <span id="password-error" class="error" aria-live="polite" role="alert"></span>
    <a href="/forgot-password">Forgot password?</a>
  </div>

  <label class="inline">
    <input type="checkbox" name="remember" value="1">
    Keep me signed in for 30 days
  </label>

  <button type="submit">Sign in</button>
</form>

Viktige punkter: aria-live="polite" på feilelementer betyr at skjermlesere vil kunngjøre feil når de vises uten å avbryte det brukeren for øyeblikket hører. role="alert" forsterker dette for eldre skjermlesere. Verdiene for autocomplete samsvarer med hva passordadministratorer forventer, slik at autofyll fungerer korrekt ved første forsøk.

Nyttige Verktøy

Når du bygger og tester HTML-skjemaer, fanger HTML-validatoren strukturfeil som manglende etiketter og duplikerte ID-er før brukerne gjør det. For generell HTML-opprydding holder HTML-formatering koden din lesbar. MDNs input-elementreferanse er den mest komplette dokumentasjonen for alle inputtyper og deres attributter.

Oppsummering

HTML-skjemaer har langt mer innebygd kapasitet enn de fleste prosjekter utnytter. Å velge riktig inputtype gir deg mobilklaviatur, validering og semantisk mening gratis. Riktig etikettilknytning og aria-describedby gjør skjemaer navigerbare uten mus. API for begrensningsvalidering gir deg JavaScript-kroker til native validering uten å kjempe mot nettleseren. Sett disse bitene sammen og du får skjemaer som fungerer for alle — før du skriver en eneste linje med tilpasset valideringslogikk.

← All HTML articles Browse all categories →