Formulärelement
Label
Delarna i formulär ska märkas upp med labels som beskriver vilken typ av data som förväntas fyllas i. Labels underlättar för användaren att markera rätt alternativ för t.ex. radioknappar och kryssrutor men är också viktiga ur ett tillgänglighetsperspektiv. Labels kan användas på två olika sätt:
<label for="namn">Namn</label>
<input type="text" name="namn" id="namn" /><label>
Namn
<input type="text" name="namn" id="namn" />
</label>
Om alternativ 2 väljs så bör for-attributet vara med, trots att det går att utesluta, då vissa hjälpmedel förutsätter att for-attributet finns för att hitta inputfältet som labeln relaterar till.
Attributet tabindex
Att modifiera tabbordningen genom att använda tabindex bidrar till svårhanterlig kod då attributet tabindex tar över den naturliga tabbordningen och varje nytt formulärelement eller annat fokuserbart element måste tilldelas korrekt värde för tabindex. Försök istället göra följande:
- Strukturera html-elementen i en ordning som gör att tabbordningen känns naturlig utan att attributet tabindex behöver användas
- Använd i första hand html-element som tillåts få fokus utan att attributet tabindex behöver användas
Ibland finns ett behov av att styra om ett element ska vara fokuserbart via tangentbord eller ej, alltså om elementet ska ingå i den naturliga tabbordningen eller inte. De värden som då ska användas är -1 och 0. Allt över 0 ska däremot undvikas helt.
Radioknappar
Radioknappar ska användas när det ska gå att välja ett alternativ av 2-7 möjliga. Är det fler än 7 alternativ bör istället ett selectelement användas.
Select
Selectelementet används när ett alternativ bland flera möjliga ska väljas.
Attributet multiple bör undvikas då det har visat sig vara svårt för användare att använda. Använd istället kryssrutor om mer än ett alternativ ska kunna väljas.
Kryssrutor
Kryssrutor används oftast på ett av följande sätt:
- Bekräfta ett enskilt val, t.ex. godkänna någon typ av avtal
- Välja noll, ett eller flera alternativ bland en mängd alternativ
Textinmatning
För textinmatning av fritext används input type=text eller textarea. Så långt det är möjligt bör andra input-typer användas där det passar. Exempel:
- date (bristande webbläsarstöd) Se också: datumväljare
- datetime-local (bristande webbläsarstöd)
- number
- search
- tel
- url
Använd korrekt autocomplete-värde för att användarens webbläsare ska kunna hjälpa användaren att automatiskt fylla i t.ex. namn, e-post eller adressuppgifter utifrån andra tidigare ifyllda formulär.
Fieldset och legends
Om formuläret är omfattande bör fieldset användas för att gruppera formulärets olika delar. Ett fieldset märks sedan upp med en beskrivande legend. Även för grupper av radioknappar och checkboxar kan fieldset med tillhörande legend vara nödvändigt för att tydligt markera att det är en grupp av alternativ. Om de enskilda valen för radioknapparna eller checkboxarna kan utläsas var för sig utan en beskrivande gruppering behövs inget fieldset.
Övriga formulärelement
I HTML5 finns ytterligare ett antal formulärelement som ibland kan vara bra att använda.
type=range
Kan användas t.ex. i enkäter när användaren ombeds välja på en skala om något stämmer överens mycket väl eller inte alls med ens åsikt.
datalist
Likt selectelementet väljer man i en datalist ett alternativ bland flera möjliga. Datalist används med fördel när användaren ska välja bland en stor mängd alternativ. Webbläsarstödet är bra men med vissa buggar i javascripthantering, se: caniuseit.com.