Modul 2

Kap 2.4 - Tillgängliga formulär

Ett formulär ska vara lätt att förstå, fylla i, rätta och skicka.

Mål

  • Använda rätt inputtyp för rätt data.
  • Gruppera formulärfält med fieldset och legend.
  • Ge användaren tydliga krav och felmeddelanden.

Inputtyper

Attributet type påverkar hur fältet fungerar. Ett e-postfält kan kontrollera att användaren skriver något som liknar en e-postadress. Ett nummerfält kan hindra textinmatning.

<input type="email" name="email" required>
<input type="number" name="age" min="1" max="120">
<input type="password" name="password">
<input type="date" name="birthdate">

Så kan inputtyper visas i webbläsaren

type="email" kan kontrollera att texten liknar en e-postadress. type="number" ger ett talfält med minsta och högsta värde. type="password" döljer tecknen. type="date" ger ett datumfält.

Valideringsattribut

  • required gör fältet obligatoriskt.
  • minlength och maxlength styr textlängd.
  • min och max styr tal eller datum.
  • placeholder kan ge exempel, men ska inte ersätta en label.

Fieldset och legend

När flera fält hör ihop kan du gruppera dem. Det hjälper användaren förstå sammanhanget.

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

Så visas fieldset och legend i webbläsaren

Hur vill du bli kontaktad?

fieldset ramar in fält som hör ihop. legend blir rubriken för gruppen.

Radioknapparna har samma name, därför hör de ihop och användaren kan välja ett av alternativen.

Testa med httpbin

En tjänst som httpbin kan visa vilka data som skulle skickas till en server. Det är bra när du vill förstå skillnaden mellan fältens synliga text och värdena i name och value.

Återkoppling

Markera obligatoriska fält tydligt och skriv felmeddelanden som förklarar vad användaren ska göra. Ett meddelande som “Fyll i e-postadress” är bättre än “Fel”.