Tillgängliga formulär

Mål

Efter kapitlet ska du kunna...

• välja rätt inputtyp för rätt data
• använda vanliga valideringsattribut
• gruppera fält med fieldset och legend
• ge användaren tydliga krav och felmeddelanden

Varför?

Användaren ska lyckas

• Fältets label förklarar vad som efterfrågas.
• Rätt inputtyp hjälper användaren skriva rätt data.
• Tydliga krav minskar onödiga fel.
• Bra felmeddelanden förklarar hur felet rättas.

Inputtyper

type påverkar fältets funktion

E-post

type="email"

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

Webbläsaren kan kontrollera att texten liknar en e-postadress.

Tal

type="number"

<label for="age">Ålder:</label>
<input type="number"
       id="age"
       name="age"
       min="1"
       max="120">

Fältet tar emot tal mellan 1 och 120.

Lösenord och datum

Två anpassade fält

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

<input type="date" name="birthdate">

Obligatoriskt fält

required

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

required gör att formuläret inte kan skickas med ett tomt fält.

Berätta också synligt för användaren att fältet är obligatoriskt.

Textlängd

minlength och maxlength

<label for="username">Användarnamn:</label>
<input type="text"
       id="username"
       name="username"
       minlength="3"
       maxlength="20">

Texten måste innehålla minst 3 och högst 20 tecken.

Gränser

min och max

<input type="number" min="1" max="120">

min och max styr tillåtna tal eller datum.

De beskriver värdet – inte hur många tecken som får skrivas.

Placeholder

Ett exempel ersätter inte label

<label for="email">E-post:</label>
<input type="email"
       id="email"
       name="email"
       placeholder="ada@example.com">

Placeholder-texten kan försvinna när användaren skriver.

Behåll därför alltid en tydlig label.

Gruppera fält

fieldset och legend

<fieldset>
  <legend>Hur vill du bli kontaktad?</legend>
  ...
</fieldset>

• fieldset samlar relaterade fält.
• legend beskriver hela gruppen.

Radiogrupp

Ett val med gemensam fråga

<fieldset>
  <legend>Hur vill du bli kontaktad?</legend>
  <label>
    <input type="radio" name="contact" value="email">
    E-post
  </label>
  <label>
    <input type="radio" name="contact" value="phone">
    Telefon
  </label>
</fieldset>

Samma name gör alternativen till en grupp.

Synligt och skickat

label, name och value har olika roller

Httpbin kan visa resultatet: contact=email.

Återkoppling

Skriv vad användaren ska göra

Ett bra felmeddelande förklarar både problemet och hur det rättas.

Hela exemplet · del 1 av 2

Kontaktuppgifter

<form action="https://httpbin.org/post" method="post">
  <label for="email">E-post (obligatorisk):</label>
  <input type="email"
         id="email"
         name="email"
         required>

  <label for="age">Ålder:</label>
  <input type="number" id="age" name="age"
         min="1" max="120">

Hela exemplet · del 2 av 2

Kontaktmetod och knapp

  <fieldset>
    <legend>Hur vill du bli kontaktad?</legend>
    <label><input type="radio" name="contact"
      value="email"> E-post</label>
    <label><input type="radio" name="contact"
      value="phone"> Telefon</label>
  </fieldset>
  <button type="submit">Skicka</button>
</form>

Prova valideringen

Fyll i och skicka

Prova först ett tomt fält eller en felaktig e-postadress.

Kontrollfråga

Vad saknas?

<input type="email" placeholder="ada@example.com">

Tänk efter innan du går vidare.

Svar: en synlig label. Placeholder är bara ett exempel.

Sammanfattning

Kom ihåg

• Rätt inputtyp hjälper användaren skriva rätt data.
• required, längd och gränser kan validera värden.
• fieldset och legend beskriver grupper av fält.
• Placeholder ersätter aldrig en label.
• Felmeddelanden ska förklara hur felet rättas.