De flesta HTML-formulär jag stöter på i produktion använder tre inputtyper: text, password och submit. Det är allt. Samtidigt har HTML haft rika inbyggda inputtyper, begränsningsvalidering och tillgänglighetsfunktioner i år — alla tillgängliga utan JavaScript och utan npm install. Låt oss använda dem.

Inputtyper Värda att Känna Till

Varje inputtyp gör verkligt arbete åt dig: den utlöser rätt mobilklaviatur, tillhandahåller inbyggd validering och kommunicerar avsikt till hjälpmedel. Här är de som regelbundet dyker upp i verkliga projekt:

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" returnerar värdet i formatet YYYY-MM-DD oavsett användarens språkinställning — vilket är precis vad du vill ha när du skickar till en server. Parsa aldrig datum från type="text"-inputs om du kan undvika det.

Etikettassociation — Gör Det Rätt

Etiketter är inte valfri dekoration. De är det primära sättet skärmläsare identifierar inputs, och att klicka på en etikett ska fokusera det associerade inputfältet. Det finns två giltiga tillvägagångssätt:

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 -->

Tillvägagångssättet med for/id är vanligtvis att föredra eftersom det håller etiketter och inputs frikopplade i DOM, vilket är lättare att styla. Förlita dig aldrig på placeholder som en etikettsubstitut — det sviker användare med kognitiva funktionshinder och försvinner i ögonblicket någon börjar skriva. W3C WAI:s etiketthandledning och WebAIMs vägledning om formulärkontroller täcker tillgänglighetsargumentationen mer ingående.

Inbyggd Begränsningsvalidering

HTML:s inbyggda begränsningsvalidering körs innan formuläret skickas och är genuint kraftfull. Du får mycket användbart beteende 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. Fältet måste vara icke-tomt. På kryssrutor måste det vara ikryssat.
  • pattern. Ett regex som värdet måste matcha. Lägg alltid till ett title-attribut — det blir valideringsverktygstipstexten och ger användarna en ledtråd om det förväntade formatet.
  • minlength / maxlength. Antal tecken för textinputs. maxlength trunkerar tyst indata; minlength validerar bara vid skickning.
  • min / max. Numeriska eller datumsbaserade gränser. Fungerar på number-, date-, range- och time-inputs.
  • step. Definierar giltiga inkrement. step="0.01" på ett valutafält tillåter ören. step="any" inaktiverar stegkontrollen helt.

fieldset och legend för Gruppering

När du har en grupp relaterade inputs — särskilt radioknappar eller kryssrutor — grupperar <fieldset> och <legend> dem semantiskt. Skärmläsare läser legenden innan varje input i gruppen, så användarna vet alltid vilken fråga en radioknapp svarar på.

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 för Begränsningsvalidering

API:et för begränsningsvalidering ger dig JavaScript-åtkomst till samma valideringslogik som webbläsaren använder inbyggt. Det låter dig trigga validering programmatiskt och ange anpassade felmeddelanden utan att blockera skickning:

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.');
});

Lägg märke till den kritiska detaljen: när du anropar setCustomValidity() med en icke-tom sträng är fältet permanent ogiltigt tills du rensar det genom att anropa setCustomValidity(''). Att glömma rensningssteget är det vanligaste felet när man använder detta API.

novalidate för Anpassad JS-validering

Om du bygger ett anpassat valideringsgränssnitt med stiliserade felmeddelanden (inte webbläsarens inbyggda verktygstips), lägg till novalidate i formuläret. Det inaktiverar webbläsarens inbyggda validering men håller API:et för begränsningsvalidering tillgängligt för dina egna 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 och aria-describedby

Två attribut som avsevärt förbättrar formulär-UX och är lätta att missa:

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>

Attributet autocomplete använder standardiserade tokenvärden definierade av WHATWG-specifikationen. När du använder rätt token kan webbläsare och lösenordshanterare fylla i fält tillförlitligt automatiskt. aria-describedby associerar ett tips eller felmeddelande med ett input — skärmläsare läser beskrivningen efter fältetiketten, vilket gör begränsningarna hörbara innan användaren ens börjar skriva.

Ett Komplett Tillgängligt Inloggningsformulär

Här är allt kombinerat — ett inloggningsformulär som fungerar för tangentbordsanvändare, skärmläsaranvändare och mobilanvändare, med bara HTML och en liten mängd 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>

Viktiga punkter: aria-live="polite" på felelement innebär att skärmläsare tillkännager fel när de visas utan att avbryta vad användaren för tillfället hör. role="alert" förstärker detta för äldre skärmläsare. Värdena för autocomplete matchar vad lösenordshanterare förväntar sig, så autofyll fungerar korrekt vid första försöket.

Hjälpsamma Verktyg

När du bygger och testar HTML-formulär fångar HTML-validatorn strukturfel som saknade etiketter och dubblerade ID:n innan användarna gör det. För allmän HTML-städning håller HTML-formateraren din kod läsbar. MDN:s input-elementreferens är den mest kompletta dokumentationen för alla inputtyper och deras attribut.

Sammanfattning

HTML-formulär har långt mer inbyggd kapacitet än de flesta projekt utnyttjar. Att välja rätt inputtyp ger dig mobilklaviatur, validering och semantisk mening gratis. Korrekt etikettassociation och aria-describedby gör formulär navigerbara utan mus. API:et för begränsningsvalidering ger dig JavaScript-krokar till inbyggd validering utan att kämpa mot webbläsaren. Sätt ihop dessa delar och du får formulär som fungerar för alla — innan du skriver en enda rad anpassad valideringslogik.

← All HTML articles Browse all categories →