Formulär

Skapa formulär som är så enkla som möjligt för användaren att fylla i.

Valfria och obligatoriska fält

Fråga bara om den information som verkligen behövs. Om du frågar om information som är valfri så bör fältet markeras med (valfri). Markera inte obligatoriska fält med asterix (*).

Exempel

<form>
  <div class="form-group">
    <label for="exampleInputName1">Namn</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="">
  </div>
  <div class="form-group">
    <label for="exampleInputOptional">Favoritbok</label>
    <span id="helpBlock" class="help-block">(Valfri)</span>
    <input type="text" class="form-control" id="exampleInputOptional" placeholder="">
  </div>
</form>

Etiketter

Alla formulärfält ska beskrivs med en etikett. Etiketter ska vara linjerande ovanför sitt formulärfältet. Texten ska vara kort, kärnfull och tydlig. Kolon (:) ska inte användas på slutet. Göm inte etiketter såtillvida inte kontext och övrigt innehåll gör etiketten onödig.

Exempel

<form>
  <div class="form-group">
    <label for="exampleInputName1">Namn</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="">
  </div>
</form>
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Namn</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="">
    </div>
  </div>
</form>

Formulärfält

Gör fältens bredd proportionerligt till den information som ska fyllas i. Se till att informationen som fylls i får plats i fältet. Se till att användaren kan fylla i den information som behövs även på mindre skärmstorlekar. Sätt alltid formulärfälten till 100% bredd för mindre skärmstorlekar.

Exempel

<div class="form-group">
	<input class="form-control" type="text" placeholder="">
</div>
<div class="form-group">
  <input class="form-control input-lg" type="text" placeholder="">
</div>
<div class="form-group">
	<input class="form-control input-sm" type="text" placeholder="">
</div>

Fältgrupper

Använd fältgrupper (fieldsets) för att gruppera formulärkontroller (form controls?) som är relaterade till varandra. Det första elementet i en fältgrupp måste vara ett legend-element som beskriver gruppen.

Exempel

Postnummer

Postort

<div>
  <div class="form-group">
    <label for="exampleInputName1">Postnummer</label>
    <input type="text" class="form-control" placeholder="">
  </div>
  <div class="form-group">
  	<label for="exampleInputName1">Postort</label>
    <input type="text" class="form-control" placeholder="">
  </div>
</div>

Fokustillstånd

För att visa att ett element är aktivt så bör fokusfärgen användas. Ingen åtgärd behövs för denna funktionalitet.

Exempel

<form>
  <label for="exampleInputName1">Namn</label>
  <input class="form-control" id="focusedInput" type="text" value="">
</form>

Hjälptexter

Använd hjälptexter för att förklara vad som ska fyllas i fältet om det inte är självklart.

Placera hjälptexten ovanför fältet. Undvik att använda platshållare inuti formulärfälten eftersom dessa försvinner direkt när användaren skriver in information i fältet.

Exempel

<form>
  <div class="form-group">
    <label for="exampleInputName1">Födelseår</label>
    <span id="helpBlock" class="help-block">Ange året med 4 siffror</span>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="">
  </div>
</form>

Formulärelement

Rullgardinslistor

Rullgardinslistor kan användas när det finns flera alternativ att välja mellan och användaren enbart ska kunna välja en. En rullgardinslista kan ofta medföra en dålig användarupplevelse och bör bara användas om det finns goda skäl. Många gånger finns det bättre alternativ att välja.

Rullgardinslistor kan passa om antalet alternativ är ungefär 5 - 15 stycken och om användaren inte känner till alternativen. För färre alternativ passar det oftast bättre med radioknappar. När det finns många alternativ kan fritextfält eller komboboxar (rullgardinslista med textfält för autocomplete) passa.

Läs mer om hur du använder rullgardinslistor rätt och väljer andra kontroller anpassade för mobila plattformar.

Exempel på projekt där andra kontroller utforskats som alternativ till rullgardinslistor för stora datamängder: välja land.

Exempel:

Kryssrutor

Använd kryssrutor när användarens ska kunna välja på/av för ett enskilt alternativ eller flera alternativ i en lista.

Exempel

Alternativ 1

Alternativ 2

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Alternativ 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
   	Alternativ 2
  </label>
</div>

Radioknappar

Använd radioknappar när användaren ska kunna välja ett alternativ från en lista.

Exempel

Alternativ 1

Alternativ 2

Alternativ 3

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
    Alternativ 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Alternativ 2
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Alternativ 3
  </label>
</div>

Fel och validering

Tydlig kommunikation i formulär minimerar risken för användaren att göra fel.

Gruppera långa formulär i till exempel flera sidor.
Minimera antalet fält.
Ge direkt och konstruktiv feedback till användaren om vad som blivit fel med hjälp av statusfärger.

Läs mer vägledning för formulär.

Exempel:

Infällda formulärelement

Kan användas för att be användaren lägga till extra kontextuell information.

Exempel: