Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Eksempler

Formular

Dine kontaktoplysninger

Vis HTML for eksempel på formularstruktur
<h1 class="h2">Dine kontaktoplysninger</h1>
<form novalidate>
    <div class="form-group">

        <label class="form-label" for="simple-fnavn">
            Fornavn
        </label>

        <input class="form-input" id="simple-fnavn" name="fnavn"
            type="text" required />

    </div>
    <div class="form-group">

        <label class="form-label" for="simple-enavn">
            Efternavn
        </label>

        <input class="form-input" id="simple-enavn" name="enavn"
            type="text" required />

    </div>
    <div class="form-group">

        <label class="form-label" for="simple-email">
            E-mail adresse
        </label>

        <input class="form-input" id="simple-email" name="email"
            type="text" required />

    </div>
    <div class="form-group">

        <label class="form-label" for="simple-telefon">
            Telefonnummer
        </label>

        <input class="form-input input-width-s" id="simple-telefon"
            name="telefon" type="text" required />

    </div>
    <button class="button button-primary mt-9">
        Gem oplysninger
    </button>
</form>

Vejledning

Gør brug af <div class="form-group">, fieldset og overskrifter til at strukturere din formular.

Skærmlæsere følger rækkefølgen af formularelementerne, som de er angivet i koden.

Overhold derfor sammenhængen mellem den viste rækkefølge af formularelementer på skærmen og deres rækkefølge i koden og brug ikke CSS til at ændre på rækkefølgen af formularelementerne.

Gruppér sammenhængende formularelementer ved hjælp af fieldset og brug et enkelt legend for hvert fieldset, hvor det giver mening.

Tilføj label med korrekt for attribut, hvor værdien er ens med værdien i id attributten på formularelementet det tilhører.

Sørg for at labels til formularelementer er meningsfulde og præcise.

Undgå placeholder-tekst. Browserne kan ikke garantere tilstrækkeligt kontrastniveau og teksten kan desuden forvirre brugerne. Placeholder-tekst forsvinder, når brugeren klikker i feltet, og dermed forsvinder information, som kunne gavne brugeren.

Tillad copy/paste i formularelementer, hvor brugeren selv skal indtaste oplysninger.

Formularelementer skal automatisk fremhæves, når brugeren navigerer til dem ved hjælp af tastaturet.

Sørg for at alle elementer står i register, dvs. at de står på linje og i et naturligt lodret læse-flow fra top til bund.

Sådan (do)

Eksempel på, hvordan formular-struktur kan se ud

Sådan: Opdel komplicerede formularer i små bidder, og placér hvert element på en side for sig (Silver, 2018, s. 68-73). Princippet hedder 'One thing per page' (én ting pr. side) og har vist sig at fungere godt på mobile enheder og være bedre i forbindelse med fx fejlhåndtering (Paul, 2015). Konceptet er også fordelagtigt for ældre brugere med nedsatte kognitive evner (Johnson & Finn, 2017, s. 99) og nye computerbrugere (Long, 2017).

Ikke sådan (don't)

Eksempel på, hvordan formular-struktur ikke bør se ud

Ikke sådan: Del ikke tæt relaterede felter op på flere sider (Silver, 2018, s. 71). Felter for postnummer og by bør fx stå på samme side (Jarret & Gaffney, 2010, s. 102). Det samme gælder felter til fornavn og efternavn samt datoer og tidspunkter (Wroblewski, 2008, s. 84).

Sådan (do)

Eksempel på, hvordan headers kan se ud

Sådan: Giv formularen en overskrift, der gør det klart, hvad den gør (Wroblewski, 2008, s. 40). Giv overskrifter prominens (fx vha. størrelse eller farve) i formularens visuelle hierarki (Wroblewski, 2003). Brug verber i stedet for navneord i overskriften (Downe, 2015), fx ”Skriv dit barn op til pasning”.

Ikke sådan (don't)

Eksempel på, hvordan headers ikke bør se ud

Ikke sådan: Undgå at formulere titler som navneord. Især navneord, der taler om systemet (fx ”Digital pladsanvisning”) frem for brugernes ærinder. Brugerne er muligvis ikke bekendte med de navne, som myndighederne har givet selvbetjeningsløsningerne for at kunne identificere dem (Downe, 2015).

Sådan (do)

Eksempel på, hvordan headers kan se ud

Sådan: Lad formålet med den enkelte side fremgå af overskriften under løsningstitlen, når formularen har flere sider (Lior, 2013, s. 205).

Ikke sådan (don't)

Eksempel på, hvordan headers ikke bør se ud

Ikke sådan: Risikér ikke, at brugerne mister fornemmelsen af, hvilken formular de er ved at udfylde eller hvad de er ved at udfylde på den pågældende side, hvis formularen har flere sider.

Referencer

  • Adam Silver: Form Design Patterns (2018)
  • Tim Paul: One thing per page (2015)
  • Jeff Johnson & Kate Finn: Designing User Interfaces for an Aging Population (2017)
  • Ally Long: Field-tested interfaces for the next billion (2017)
  • Caroline Jarrett & Gerry Gaffney: Forms that Work: Designing Web Forms for Usability (2009)
  • Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
  • Luke Wroblewski: Visible Narratives: Understanding Visual Organization (2003)
  • Louise Downe: Good services are verbs, bad services are nouns (2015)
  • Linda Newman Lior: Writing for Interaction (2013)

Se eksempelløsninger

Kompleks formular

Dine kontaktoplysninger

Hvordan vil du helst kontaktes?
Hvornår på dagen vil det passe bedst, at vi kontakter dig?
Personlige oplysninger
Fødselsdato For eksempel: 05 12 1987
Bor du i Odense?
Vis HTML for eksempel på kompleks formularstruktur
<h1 class="h2">Dine kontaktoplysninger</h1>
<form novalidate>
    <div class="form-group">

        <label class="form-label" for="fnavn">
            Fornavn
        </label>

        <input class="form-input" id="fnavn" name="fnavn" type="text"
            required />

    </div>
    <div class="form-group">

        <label class="form-label" for="enavn">
            Efternavn
        </label>

        <input class="form-input" id="enavn" name="enavn" type="text"
            required />

    </div>
    <div class="form-group">

        <label class="form-label" for="fieldset-email">
            E-mail adresse
        </label>

        <input class="form-input" id="fieldset-email" name="email"
            type="text" required />

    </div>
    <div class="form-group">

        <label class="form-label" for="fieldset-telefon">
            Telefonnummer
        </label>

        <input class="form-input input-width-s" id="fieldset-telefon"
            name="telefon" type="text" required />

    </div>

    <div class="form-group">
        <fieldset>
            <legend class="form-label">Hvordan vil du helst kontaktes?
            </legend>
            <ul class="nobullet-list">
                <li>
                    <div class="form-group-radio">
                        <input id="kontakt-telefon" type="radio"
                            name="kontakt" value="telefon"
                            class="form-radio radio-large " />
                        <label for="kontakt-telefon"
                            id="form-label-kontakt-telefon" class="">Pr.
                            telefon </label>

                    </div>
                </li>
                <li>
                    <div class="form-group-radio">
                        <input id="kontakt-email" type="radio"
                            name="kontakt" value="email"
                            class="form-radio radio-large " />
                        <label for="kontakt-email"
                            id="form-label-kontakt-email" class="">Pr.
                            e-mail </label>

                    </div>
                </li>
            </ul>
        </fieldset>
    </div>
    <div class="form-group">
        <fieldset>
            <legend class="form-label">Hvornår på dagen vil det passe
                bedst, at vi kontakter dig?</legend>
            <ul class="nobullet-list">
                <li>
                    <input id="checkbox-morgen" type="checkbox"
                        name="tidspunkt[]" value="morgen"
                        class="form-checkbox checkbox-large " />
                    <label for="checkbox-morgen" class="">Om
                        morgenen</label>
                </li>
                <li>
                    <input id="checkbox-middag" type="checkbox"
                        name="tidspunkt[]" value="middag"
                        class="form-checkbox checkbox-large " />
                    <label for="checkbox-middag" class="">Ved
                        middagstid</label>
                </li>
                <li>
                    <input id="checkbox-eftermiddag" type="checkbox"
                        name="tidspunkt[]" value="eftermiddag"
                        class="form-checkbox checkbox-large " />
                    <label for="checkbox-eftermiddag" class="">Om
                        eftermiddagen</label>
                </li>
                <li>
                    <input id="checkbox-aften" type="checkbox"
                        name="tidspunkt[]" value="aften"
                        class="form-checkbox checkbox-large " />
                    <label for="checkbox-aften" class="">Om aftenen</label>
                </li>
            </ul>
        </fieldset>
    </div>
    <div class="form-group">
        <fieldset>
            <legend class="h4">Personlige oplysninger</legend>

            <!-- Felt start: Fødselsdato -->

            <div class="form-group  mt-0">
                <fieldset aria-describedby="example-date-field-hint ">
                    <legend class="form-label">Fødselsdato</legend>
                    <span class="form-hint"
                        id="example-date-field-hint">For eksempel: 05 12
                        1987</span>

                    <div class="date-group js-calendar-group mt-3">
                        <div class="form-group form-group-day">
                            <label class="form-label"
                                for="date-day">Dag</label>
                            <input class="form-input js-calendar-day-input"
                                id="date-day" value="" type="tel"
                                data-min="1" data-max="31" maxlength="2"
                                pattern="^[0-9]{0,2}$"
                                data-input-regex="^[0-9]{0,2}$"
                                title="Indskriv dag på måneden som tal"
                                aria-describedby="example-date-field-hint" />
                        </div>
                        <div class="form-group form-group-month">
                            <label class="form-label"
                                for="date-month">Måned</label>
                            <input
                                class="form-input js-calendar-month-input"
                                id="date-month" value="" type="tel"
                                data-min="1" data-max="12" maxlength="2"
                                pattern="^[0-9]{0,2}$"
                                data-input-regex="^[0-9]{0,2}$"
                                title="Indskriv månedens nummer"
                                aria-describedby="example-date-field-hint" />
                        </div>
                        <div class="form-group form-group-year ">
                            <label class="form-label"
                                for="date-year">År</label>
                            <input
                                class="form-input js-calendar-year-input"
                                id="date-year" value="" type="tel"
                                data-min="1900" data-max="3000"
                                maxlength="4" pattern="^[0-9]{0,4}$"
                                data-input-regex="^[0-9]{0,4}$"
                                title="Indskriv årstal"
                                aria-describedby="example-date-field-hint" />
                        </div>

                    </div>
                </fieldset>
            </div>

            <!-- Felt slut: Fødselsdato -->

            <!-- Felt start: Odense -->
            <div class="form-group">
                <fieldset>
                    <legend class="h5">Bor du i Odense?</legend>
                    <ul class="nobullet-list">
                        <li>
                            <div class="form-group-radio">
                                <input id="odense-ja" type="radio"
                                    name="odense" value="ja"
                                    class="form-radio radio-large " />
                                <label for="odense-ja"
                                    id="form-label-odense-ja" class="">Ja
                                </label>

                            </div>
                        </li>
                        <li>
                            <div class="form-group-radio">
                                <input id="odense-nej" type="radio"
                                    name="odense" value="nej"
                                    class="form-radio radio-large " />
                                <label for="odense-nej"
                                    id="form-label-odense-nej" class="">Nej
                                </label>

                            </div>
                        </li>
                    </ul>
                </fieldset>
            </div>
            <!-- Felt slut: Odense -->
        </fieldset>
    </div>
    <!-- Felt slut: Personlige oplysninger -->
    <!-- Knap start -->
    <button class="button button-primary mt-9">
        Gem oplysninger
    </button>
    <!-- Knap slut -->
</form>