Sigbit Admin Documentation

Formulärmönster

Life is short. No one wants to fill out a form. Be conversational.

Design Better Forms (uxdesign.cc)

Grundstruktur

Formulär layoutas nästa exakt så som Bootstraps egna exempel är uppbyggda. Tanken är även att vi ska försöka följa alla Dos and Don'ts från artikeln Design Better Forms (uxdesign.cc).

Mailadress Korta hjälptexter placeras under inputen inuti en <small class="form-text text-muted"></small>.

Lösenord

Telefonnummer

Example select

Example textarea - Ej obligatoriskt

Födelsedatum

Gatuadress

Ort

Postnummer

Ladda upp fil This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Radio buttons

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Check me out

Obligatoriska/valfria fält

Markera inte obligatoriska fält med en asterisk (*). Lägg istället till en <span class="text-muted">- Ej obligatoriskt</span> inuti fältets label, efter label-namnet för att markera ett valfritt fält.

Mailadress - Ej obligatoriskt

Text - Ej obligatoriskt

Form validation

Om möjligt (Hej alla utvecklare): Berätta redan innan man trycker på "submit" att något är fel/rätt för att effektivisera flödet för användaren.

Mailadress

Lösenord

Svagt lösenord!

För- och efternamn

Skriv alltid ut vad som är fel, så användaren förstår vad som behöver göras.

Example help text that remains unchanged.