Formulär
Formulär används för att samla in data från användaren.
Det finns fem olika typer av formulärkomponenter. Välj komponenttyp utifrån användning.
Se Forms (i KTH Style, på engelska).
| Komponenttyp | Används för |
|---|---|
| Text input | Indata i form av text. |
| Radio buttons | Flervalssvar när bara ett val är möjligt. Alternativen ska inte vara fler än att det blir överskådligt. Annars använd Drop down. |
| Drop down | Flervalssvar när bara ett val är möjligt. Undvik rullgardinsmeny när det finns färre än tre alternativ (då ska Radiobuttons användas). |
| Check box | Flervalssvar när flera val är möjliga. |
| Date picker | Val av datum. |
Fält
Reducera obligatoriska fält
Ta bort fält om indata kan:
- Erhållas på annat sätt
- Inhämtas vid en senare mer passande tidpunkt
- Utelämnas (för att det inte egentligen verkligen behövs)
Skilj på valfria och obligatoriska fält:
- Försök att begränsa formuläret till endast ett eller två valfria fält, och märk dem tydligt som ”Optional”
- Om vissa fält verkligen är nödvändiga men endast gäller en del av användarna, visa det
Gruppera relaterade fält tillsammans
- Gruppera relaterade fält tillsammans
- Om det lämpar sig, lägg till en rubrik för gruppen
Underlätta inmatning
Skapa tydliga och klickbara fältetiketter
webbriktlinjer.se (Skapa tydliga och klickbara fältetiketter)
Anpassa storlek på fält till indatat
Matcha fält till typen och storleken på data. Exempel: Postnummer.
Förklara särskilda krav på indata eller på formattering
När du har försökt att elimenera godtyckliga krav på indata (se ovan), ange exakta instruktioner på indata eller på formattering, som till exempel format på telefonnummer eller personnummer.
Markera obligatoriska fält i formulär
Se webbriktlinjer.se (Markera obligatoriska fält i formulär) .
Dölj inte grundläggande hjälptext
- Exponera grundläggande instruktioner där det är möjligt
- För mer omfattande hjälptexter, infoga hjälpinformation som nås via en i-ikon (se informationsmodal på Alerts och tooltips ).
Håll dig till standard
- Håll dig till standard både för rubriker på fält (till exempel kreditkortsnummer, utgångsdatum) och de val du erbjuder
Märk upp vanliga formulärfält i koden
webbriktlinjer.se (Märk upp vanliga formulärfält i koden)
Namngivning
Läs mer om namngivning på Gemensamma riktlinjer för komponenter .
Felhantering
Eliminera godtycklig formattering
- Eliminera så mycket som möjligt av godtyckliga formateringsregler genom att vara tillåtande vad gäller indata (se under rubriken "Hjälp användaren att undvika och rätta fel).
Felhantering
Se Alerts och tooltips .
Övriga riktlinjer för specifika komponenter
Text input
Do:
- Matcha fält till typen och storleken på data. Exempel: Postnummer.
Dropdown
Do:
- Överväg användningsfrekvens. Lista de vanligaste valen först när det är möjligt.
- Användaren ska kunna söka fram rätt alternativ i rullgardinsmenyn genom att använda bokstavstangenterna
Don't:
- Undvik rullgardinsmeny när indata är något som är välbekant för användaren och snabbare kan matas in än att välja från en lång lista