Formulär

Eftersom formulär används i många olika situationer så finns det inga standard lösningar. Exempelvis på Forskningswebben så ligger hela ansökningsförfarandet i flikar och paketerat på en gul bakgrundsplatta (#f3f0dc) för att tydliggöra att informationen på dessa flikar hör ihop.
Bottenplattans färg är #f3f0dc. Marginaler mellan ytterkant på bottenplattan och formulärets fält ska vara antingen 10 eller 20 px på vänster och höger sida samt i toppen. Bottenmarginalen ska vara 20 px. 
 
Högerkant på bottenplattan underkant ska ha ett kapat hörn.
 
Det är viktigt att formulärfälten grupperas tydligt och pedagogiskt. Med hjälp av gridden så ska fälten struktureras så att informationen presenteras på ett ordnat, tillgängligt och användarvänligt sätt. Detta för att användaren lätt ska kunna se vad som ska fyllas i och vilken information som hör ihop.
 
Formulär som ligger tillsammans med övrigt innehåll som t.ex. en artikel eller en produkt- eller tjänstepresentation behöver andra lösningar. Exempelvis då ett formulär ligger tillsammans med vänsternavigation, puffar och redaktionellt innehåll så ska fälten struktureras enligt gridden: t.ex. om vänsternavigationen tar upp 2 kolumner, redaktionell text samt bild 4 kolumner, puffar med relaterad information 2 kolumner så passar formuläret (förutsatt att det hör ihop med den redaktionella texten så klart) att ha i de 4 kolumnerna där den redaktionellla texten ligger.
 
Behövs formuläret delas upp ytterligare i kolumner ex. där fält för förnamn och efternamn ligger bredvid varandra delar man upp så att respektive fält tar upp 2 kolumner (dvs. 194 px) med 20 px marginal emellan.
 

Formulär med flikar

 
 

Sökruta

Då sökfunktionen har en central roll i applikationen bör den också ligga centralt placerad.
 
 
Då det endast finns behov av en generell innehållssök så ska den ligga uppe i högra hörnet och linjera med logotypen i överkant och med rubrikplattan i högerkant.
 

Obligatoriska fält och varningar

Använd en röd asterisk för att markera vilka fält som är obligatoriska. Alla avstånd är 10 px eller 20 px utom mellan ledtext och formulärfält. Typsnitt och storlekar är samma som brödtext.
 
 
Om användaren försöker skicka formuläret utan att fylla i alla fält ska det överst i formuläret visas en vit ruta med 1px röd kant. marginaler 20px ovanför och under rutan. marginaler i rutan runt texten är 10px. Meddelandet i rutan ska vara "Du har glömt att fylla i fältet [fältets namn]" Fokuset ska hamna på felrutan så att denna inte missas om sidan/formuläret är lång
 
 
Kontakt MSB.se

Fredrik Höglund
010-240 51 46
fredrik.hoglund@msb.se