Gå til sidens indhold

Komponenter

Formular-elementer

Du kan bruge formularelementerne til at opbygge blanketter til din selvbetjeningsløsning.

Generelt om tilgængelighed af formularelementer

  • Formularelementer bliver automatisk fremhævet, når brugeren navigerer sig hen til dem ved hjælp af tabulator-tasten.
  • 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.
  • 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.
  • Gruppér sammenhængende formularelementer vha. fieldset og brug et enkelt legend for hvert fieldset.
  • Tilføj label til alle formularelementer udover fieldset.
  • 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.

Felter

<div class="container">

    <div class="form-group">
        <label class="form-label " for="input-type-text">Inputfelt med
            label</label>
        <span class="form-hint" id="input-hint-message-input-type-text">Fx
            12345678</span>

        <input class="form-input   " placeholder="" id="input-type-text"
            value="" name="input-type-text" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-focus">Inputfelt i
            fokus</label>

        <input class="form-input  focus " placeholder="" id="input-focus"
            value="" name="input-focus" type="text">
    </div>

    <div class="form-group form-error">
        <label class="form-label " for="form-error">Inputfelt med
            fejl</label>
        <span class="form-hint" id="input-hint-message-form-error">Fx
            12345678</span>
        <span class="form-error-message" id="form-error-message-form-error"
            role="alert">Hjælpsom fejlbesked</span>
        <input class="form-input   " placeholder="" id="form-error"
            value="" name="form-error" type="text"
            aria-describedby="form-error-message-form-error"
            aria-describedby="input-hint-message-form-error">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-disabled">Inputfelt som er
            låst</label>

        <input class="form-input   " placeholder="" id="input-disabled"
            value="" name="" type="text" disabled="disabled">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-optional">Inputfelt som er
            valgfrit<span class="weight-normal">
                (frivilligt)</span></label>

        <input class="form-input   " placeholder="" id="input-optional"
            value="" name="" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-readonly">Inputfelt som er
            readonly</label>

        <input class="form-input   " placeholder="" id="input-readonly"
            value="012345-6789" name="" type="text" readonly>
    </div>

</div>

Tilgængelighed

Undgå at opdele felter fx til telefonnumre, da det enkelte felt ikke kan tilføjes et meningsfuldt label.

Felter skal have et kontrastforhold på minimum 3:1 i forhold til baggrundsfarven. Tjek kontraster hos WebAIM+

Brugervenlighed

Anvendes til

  • Bruger-input af information i form af bogstaver, tal og en kombination af begge.
  • Brug primært formularelementer, når der er behov for, at brugeren kan tilføje information, som ikke kan vælges ud fra prædefinerede værdier, eller som løsningen ikke automatisk kan forudse ud fra brugerens andre indtastninger.
  • Når det er nemmere for brugeren at skrive information end at vælge den gennem en kompliceret proces. Ofte kan et datofelt til indtastning være nemmere at anvende - og gøre tilgængeligt - end en date picker funktion.
  • Når brugeren skal kunne copy/paste information ind i en formular.

Anvendes ikke til

Når brugeren skal vælge ud fra et prædefineret sæt af værdier, og der er behov for datakonsistens.

Vejledning

  • Vis kun fejlbeskeder, når brugeren har indtastet en ugyldig værdi.
  • Fejlbeskeder skal være meningsfulde og hjælpsomme.
  • Placér fejlbeskeder imellem label og feltet, som bliver markeret med rødt.
  • Felter er ikke perfekte til mobile løsninger. Overvej om de er nødvendige eller om du kan tilbyde brugeren en anden form for interaktion.

Feltbredde

<div class="container">
    <h4>Input bredde med rem</h4>

    <div class="form-group">
        <label class="form-label " for="input-type-text-xxs">Inputfelt med
            klassen input-width-xxs (8rem)</label>
        <input class="form-input input-width-xxs" id="input-type-text-xxs"
            name="input-type-text-xxs" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-xs">Inputfelt med
            klassen input-width-xs (16rem)</label>
        <input class="form-input input-width-xs" id="input-type-text-xs"
            name="input-type-text-xs" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-s">Inputfelt med
            klassen input-width-s (24rem)</label>
        <input class="form-input input-width-s" id="input-type-text-s"
            name="input-type-text-s" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-m">Inputfelt med
            klassen input-width-m (32rem)</label>
        <input class="form-input input-width-m" id="input-type-text-m"
            name="input-type-text-m" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-l">Inputfelt med
            klassen input-width-l (40rem)</label>
        <input class="form-input input-width-l" id="input-type-text-l"
            name="input-type-text-l" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-xl">Inputfelt med
            klassen input-width-xl (48rem)</label>
        <input class="form-input input-width-xl" id="input-type-text-xl"
            name="input-type-text-xl" type="text">
    </div>

</div>

<div class="container">
    <h4 class="mt-7">Input bredde med tegn</h4>

    <div class="form-group">
        <label class="form-label " for="input-type-text-char-4">Inputfelt
            med klassen input-char-4 (4 tegn)</label>
        <input class="form-input input-char-4" id="input-type-text-char-4"
            name="input-type-text-char-4" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-char-8">Inputfelt
            med klassen input-char-8 (8 tegn)</label>
        <input class="form-input input-char-8" id="input-type-text-char-8"
            name="input-type-text-char-8" type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-char-11">Inputfelt
            med klassen input-char-11 (11 tegn)</label>
        <input class="form-input input-char-11"
            id="input-type-text-char-11" name="input-type-text-char-11"
            type="text">
    </div>

    <div class="form-group">
        <label class="form-label " for="input-type-text-char-27">Inputfelt
            med klassen input-char-27 (27 tegn)</label>
        <input class="form-input input-char-27"
            id="input-type-text-char-27" name="input-type-text-char-27"
            type="text">
    </div>

</div>

Tilgængelighed

Feltets bredde skal modsvare det, du forventer at brugeren skal indtaste, så brugeren kan se alle tegn under indtastningen.

Brugervenlighed

Anvendes til

Feltbredden angiver det forventede omfang af tegn, så brugeren får en fornemmelse af, hvad der skal indtastes. Fx bør et felt, hvor man skal angive et dansk postnummer, kun være 4 tegn bredt, mens et felt til et gadenavn bør være på 27 tegn.

Brug feltbredden til at begrænse antallet af tegn i et felt.

Anvendes ikke til

Brug ikke feltbredde til at validere brugerens input. Angiv i stedet krav til inputvalidering i en vejledning.

Vejledning

Tilføj feltbreddeværdier svarende til den mængde information, du forventer, at brugeren indtaster. På den måde får brugeren overblik over sin indtastning.

Textarea

<div class="container">

    <div class="form-group">
        <label class="form-label " for="input-area">Tekstområde med
            label</label>

        <textarea class="form-input " rows="5" placeholder="" id="input-area" name="input-area" type="text" ></textarea>
    </div>

    <div class="form-group form-error">
        <label class="form-label " for="input-error">Tekstområde med
            fejlbesked</label>

        <span class="form-error-message"
            id="form-error-message-input-error" role="alert">Hjælpsom
            fejlbesked</span>
        <textarea class="form-input " rows="5" placeholder="" id="input-error" name="input-error" type="text" aria-describedby="form-error-message-input-error"></textarea>
    </div>

</div>

Tilgængelighed

Tekstområdet bliver automatisk fremhævet, når brugeren navigerer sig hen til det ved hjælp af tabulator-tasten.

Brugervenlighed

Anvendes til

  • Brug tekstområder til sammenhængende (mere end 2 linjer) men ustruktureret tekst og sætninger, der har karakter af prosa. Fx en baggrundsfortælling.
  • Når der er behov for yderligere sammenhængende information, hvis karakter brugeren ikke kan vælge ud fra et prædefineret sæt værdier.
  • Når løsningen stiller et spørgsmål, der ikke kan besvares i et felt.

Anvendes ikke til

Brug ikke tekstområder til struktureret information, hvor datakonsistens har betydning.

Vejledning

  • Angiv tekstområdets højde, så det modsvarer den tekstmængde, du forventer, at brugeren skal indtaste.
  • Overvej at begrænse antallet af tegn, hvis det giver mening.
  • Vis kun fejlbeskeder, når brugeren har indtastet en ugyldig værdi.
  • Fejlbeskeder skal være meningsfulde og hjælpsomme.
  • Placér fejlbeskeder imellem label og felt, og markeér feltet med rødt.
<div class="container">
    <form class="form mb-7 input-width-m">

        <div class="form-group ">

            <label class="form-label " for="options">Dropdown label
                (select)</label>
            <select class=" form-select" name="options" id="options">
                <option value></option>

                <option value="option1">Mulighed 1</option>

                <option value="option2">Mulighed 2</option>

                <option value="option3">Mulighed 3</option>

            </select>
        </div>

    </form>
</div>

Tjekboks

<div class="container">
    <div class="form-group">
        <fieldset>
            <legend class="h5">Lille tjekboks</legend>
            <ul class="nobullet-list">

                <li>

                    <input id="Unchecked" type="checkbox" name="unchecked"
                        value="unchecked" class="form-checkbox   " />
                    <label for="Unchecked" class="">Ikke-udfyldt
                        tjekboks</label>

                </li>

                <li>

                    <input id="Checked" type="checkbox" name="checked"
                        value="checked" class="form-checkbox   " checked />
                    <label for="Checked" class="">Udfyldt tjekboks</label>

                </li>

                <li>

                    <input id="disabled" type="checkbox" name="disabled"
                        value="disabled" class="form-checkbox   "
                        disabled />
                    <label for="disabled" class="">Inaktiv ikke-udfyldt
                        tjekboks (disabled)</label>

                </li>

                <li>

                    <input id="disabled-checked" type="checkbox"
                        name="disabled-checked" value="disabled-checked"
                        class="form-checkbox   " disabled checked />
                    <label for="disabled-checked" class="">Inaktiv udfyldt
                        tjekboks (disabled)</label>

                </li>

                <li>

                    <input id="fokus" type="checkbox" name="Focus"
                        value="fokus" class="form-checkbox focus  " />
                    <label for="fokus" class="">Ikke-udfyldt tjekboks i
                        fokus</label>

                </li>

            </ul>
        </fieldset>
    </div>
    <div class="form-group">
        <fieldset>
            <legend class="h5">Stor tjekboks (anbefalet)</legend>
            <ul class="nobullet-list">

                <li>

                    <input id="Unchecked-large" type="checkbox"
                        name="unchecked-large" value="unchecked-large"
                        class="form-checkbox  checkbox-large " />
                    <label for="Unchecked-large" class="">Stor ikke-udfyldt
                        tjekboks</label>

                </li>

                <li>

                    <input id="Checked-large" type="checkbox"
                        name="checked-large" value="checked-large"
                        class="form-checkbox  checkbox-large " checked />
                    <label for="Checked-large" class="">Stor udfyldt
                        tjekboks</label>

                </li>

                <li>

                    <input id="disabled-large" type="checkbox"
                        name="disabled-large" value="disabled-large"
                        class="form-checkbox  checkbox-large " disabled />
                    <label for="disabled-large" class="">Stor inaktiv
                        ikke-udfyldt tjekboks (disabled)</label>

                </li>

                <li>

                    <input id="disabled-checked-large" type="checkbox"
                        name="disabled-checked-large"
                        value="disabled-checked-large"
                        class="form-checkbox  checkbox-large " disabled
                        checked />
                    <label for="disabled-checked-large" class="">Stor
                        inaktiv udfyldt tjekboks (disabled)</label>

                </li>

                <li>

                    <input id="fokus-large" type="checkbox"
                        name="fokus-large" value="fokus-large"
                        class="form-checkbox focus checkbox-large " />
                    <label for="fokus-large" class="">Stor ikke-udfyldt
                        tjekboks i fokus</label>

                </li>

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

Tilgængelighed

  • Indsæt altid to eller flere tjekbokse i et fieldset inklusive legend. En enkelt tjekboks skal ikke sidde i et fieldset.
  • Tilknyt label til hver tjekboks. Erstat eventuelt label med title-attributten.
  • Giv hver tjekboks sit eget id og angiv samme værdi til det tilhørende label.
  • Tjekboksenes design er ændret ift. standardvisningen for at gøre dem tydeligere og øge deres visuelle respons til brugerens interaktion.
  • Tjekboksene er gjort tilgængelige for skærmlæsere på trods af deres visuelle design, ved at selve tagget for tjekboksen er placeret uden for det synlige skærmområde.

Brugervenlighed

Anvendes til

  • Tjekbokse giver brugeren mulighed for at vælge en eller flere værdier ud fra en synlig liste.
  • Når brugeren skal have overblik over sine mulige valg.
  • Når brugeren skal be- eller afkræfte et valg, fx ”Ja/Nej” (i det tilfælde en enkelt tjekboks), eller slå noget til eller fra (toggle).
  • Når listen over mulige valg kan være på en mobilvisning.

Anvendes ikke til

  • Når der er for mange valg til at give mening på en mobilvisning.
  • Når brugeren kun kan vælge én værdi. Her skal du i stedet anvende radioknapper.

Vejledning

  • Brugeren skal kunne tappe eller klikke på tjekboksen eller dens label for at vælge eller fravælge dens værdi.
  • Du bør opstille lister med tjekbokse i lodret linje af hensyn til brugerens læseretning.
  • Anvend et positivt sprog til værdierne. I stedet for fx ”Jeg vil ikke modtage bekræftelse på email” bør du skrive ”Jeg vil gerne modtage bekræftelse på email”.
  • Sørg for at der er tilstrækkelig luft omkring den enkelte tjekboks, så den er brugbar på touchskærme.

Radioknap

<div class="container">
    <div class="form-group">
        <fieldset>
            <legend class="h5">Lille radioknap</legend>
            <ul class="nobullet-list">

                <li>

                    <input id="unchecked" type="radio" name="unchecked"
                        value="truth" class="form-radio   " />
                    <label for="unchecked" class="">Ikke-udfyldt radioknap
                    </label>

                </li>

                <li>

                    <input id="Checked" type="radio" name="Checked"
                        value="Checked" class="form-radio   " checked />
                    <label for="Checked" class="">Udfyldt radioknap
                    </label>

                </li>

                <li>

                    <input id="Disabled" type="radio" name="Disabled"
                        value="Disabled" class="form-radio   " disabled />
                    <label for="Disabled" class="">Inaktiv ikke-udfyldt
                        radioknap (disabled) </label>

                </li>

                <li>

                    <input id="Disabled-checked" type="radio"
                        name="Disabled-checked" value="Disabled-checked"
                        class="form-radio   " disabled checked />
                    <label for="Disabled-checked" class="">Inaktiv udfyldt
                        radioknap (disabled) </label>

                </li>

                <li>

                    <input id="Focus" type="radio" name="Focus"
                        value="Focus" class="form-radio focus  " />
                    <label for="Focus" class="">Ikke-udfyldt radioknap i
                        fokus </label>

                </li>

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

    <div class="form-group">
        <fieldset>
            <legend class="h5">Stor radioknap (anbefalet)</legend>
            <ul class="nobullet-list">

                <li>

                    <input id="Unchecked-large" type="radio"
                        name="Unchecked-large" value="Unchecked-large"
                        class="form-radio  radio-large " />
                    <label for="Unchecked-large" class="">Stor ikke-udfyldt
                        radioknap </label>

                </li>

                <li>

                    <input id="Checked-large" type="radio"
                        name="Checked-large" value="Checked-large"
                        class="form-radio  radio-large " checked />
                    <label for="Checked-large" class="">Stor udfyldt
                        radioknap </label>

                </li>

                <li>

                    <input id="Disabled-large" type="radio"
                        name="Disabled-large" value="Disabled-large"
                        class="form-radio  radio-large " disabled />
                    <label for="Disabled-large" class="">Stor inaktiv
                        ikke-udfyldt radioknap (disabled) </label>

                </li>

                <li>

                    <input id="Disabled-checked-large" type="radio"
                        name="Disabled-checked-large"
                        value="Disabled-checked-large"
                        class="form-radio  radio-large " disabled
                        checked />
                    <label for="Disabled-checked-large" class="">Stor
                        inaktiv udfyldt radioknap (disabled) </label>

                </li>

                <li>

                    <input id="Focus-large" type="radio" name="Focus-large"
                        value="Focus-large"
                        class="form-radio focus radio-large " />
                    <label for="Focus-large" class="">Stor ikke-udfyldt
                        radioknap i fokus </label>

                </li>

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

Tilgængelighed

  • Indsæt altid to eller flere radioknapper i et fieldset inklusive legend. En enkelt tjekboks skal ikke sidde i et fieldset.
  • Tilknyt label til hver radioknap. Erstat eventuelt label med title-attributten.
  • Giv hver radioknap sit eget id og angiv samme værdi til det tilhørende label.
  • Tjekboksenes design er ændret ift standardvisningen for at gøre dem tydeligere og øge deres visuelle respons til brugerens interaktion.
  • Tjekboksene er gjort tilgængelige for skærmlæsere, på trods af deres visuelle design, ved at selve checkbox tagget er placeret uden for det synlige skærmområde.

Brugervenlighed

Anvendes til

  • Radioknapper giver brugeren mulighed for at vælge en enkelt værdi ud fra en synlig liste.
  • Når brugeren skal have overblik over sine mulige valg.
  • Når listen over mulige valg kan være på en mobilvisning.

Anvendes ikke til

  • Når brugeren skal kunne vælge mere end én værdi ud fra en synlig liste. Her skal du i stedet bruge tjekbokse.
  • Du bør overveje at anvende en dropdown menu, hvis antallet af mulige værdier er for mange til en mobilvisning.
  • Når brugeren skal kunne undlade at vælge en værdi.

Vejledning

  • Brugeren skal kunne tappe eller klikke på radioknappen eller dens label for at vælge eller fravælge dens værdi.
  • Du bør opstille lister med radioknapper i lodret linje af hensyn til brugerens læseretning.
  • Sørg for at der er tilstrækkelig luft omkring den enkelte radioknap, så den er brugbar på touchskærme.
  • Vær forsigtig med at angive et standard valg, da det kan have en modsatrettet effekt: Brugeren kan føle sig manipuleret eller foretager ikke et bevidst valg.

Vedhæft fil

<div class="container">
    <form class="form">
        <div class="form-group file-input">
            <label class="form-label" for="fileinput">Vedhæft fil</label>
            <input type="file" id="fileinput" name="file">
        </div>
    </form>
</div>

Tilgængelighed

Du bør kun bruge vedhæftet fil, hvis det er strengt nødvendigt for din løsning.

Brugervenlighed

Anvendes til

Brug det til at lade brugeren vælge og overføre en fil fra sin egen computer, tablet eller mobil.

Vejledning

  • Sørg for at brugeren får en positiv respons, når filen er overført.
  • Gør tydeligt brugeren opmærksom på, hvilke formater og størrelser, der vil blive accepteret.
  • Tjek filformatet før overførslen går i gang, så brugeren ikke spilder tid.

Datoangivelse

Tre separate felter for dato, måned og år er den nemmeste måde for brugeren at indskrive en dato.

<div class="container">

    <!-- Start code: Indsendelsesfrist -->

    <div class="form-group ">
        <fieldset>
            <legend><label
                    class="form-label icon-link">Indsendelsesfrist</label>
                <span class="form-hint">For eksempel: 05 12 2018</span>
            </legend>
            <span class="form-error-message"
                id="form-error-message-input-error" role="alert"></span>
            <div class="date-group js-calendar-group mt-3">
                <div class="form-group form-group-day">
                    <label class="form-label"
                        for="date_of_day_2">Dag</label>
                    <input class="form-input js-calendar-day-input"
                        id="date_of_day_2" value="" type="tel" min="1"
                        max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                        data-input-regex="^[0-9]{0,2}$"
                        title="Indskriv dag på månenden som tal" />
                </div>
                <div class="form-group form-group-month">
                    <label class="form-label"
                        for="date_of_month_1">Måned</label>
                    <input class="form-input js-calendar-month-input"
                        id="date_of_month_1" value="" type="tel" min="1"
                        max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                        data-input-regex="^[0-9]{0,2}$"
                        title="Indskriv månedens nummer" />
                </div>
                <div class="form-group form-group-year ">
                    <label class="form-label"
                        for="date_of_year_3">År</label>
                    <input class="form-input js-calendar-year-input"
                        id="date_of_year_3" value="" type="tel" min="1900"
                        max="3000" maxlength="4" pattern="^[0-9]{0,4}$"
                        data-input-regex="^[0-9]{0,4}$"
                        title="Indskriv årstal" />
                </div>

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

    <!-- End code: Indsendelsesfrist -->

    <!-- Start code: Datoangivelse med fejl -->

    <div class="form-group  form-error ">
        <fieldset>
            <legend><label class="form-label icon-link">Datoangivelse med
                    fejl</label>
                <span class="form-hint">For eksempel: 05 12 2018</span>
            </legend>
            <span class="form-error-message"
                id="form-error-message-input-error" role="alert">Skriv en
                kort fejlmeddelelse, der hjælper brugeren videre</span>
            <div class="date-group js-calendar-group mt-3">
                <div class="form-group form-group-day">
                    <label class="form-label"
                        for="date_of_day_2">Dag</label>
                    <input class="form-input js-calendar-day-input"
                        id="date_of_day_2" value="01" type="tel" min="1"
                        max="31" maxlength="2" pattern="^[0-9]{0,2}$"
                        data-input-regex="^[0-9]{0,2}$"
                        title="Indskriv dag på månenden som tal" />
                </div>
                <div class="form-group form-group-month">
                    <label class="form-label"
                        for="date_of_month_1">Måned</label>
                    <input class="form-input js-calendar-month-input"
                        id="date_of_month_1" value="12" type="tel" min="1"
                        max="12" maxlength="2" pattern="^[0-9]{0,2}$"
                        data-input-regex="^[0-9]{0,2}$"
                        title="Indskriv månedens nummer" />
                </div>
                <div class="form-group form-group-year ">
                    <label class="form-label"
                        for="date_of_year_3">År</label>
                    <input class="form-input js-calendar-year-input"
                        id="date_of_year_3" value="2030" type="tel"
                        min="1900" max="3000" maxlength="4"
                        pattern="^[0-9]{0,4}$"
                        data-input-regex="^[0-9]{0,4}$"
                        title="Indskriv årstal" />
                </div>

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

    <!-- End code: Datoangivelse med fejl -->

</div>

Tilgængelighed

Anvend ikke JavaScript til automatisk at flytte fokus fra felt til felt, da det gør det svært for tastatur-brugere at navigere i formularen.

Brugervenlighed

Anvendes til

Sætter brugeren i stand til at tilføje struktureret datoinformation.

Anvendes ikke til

Når der er specifikt udvalgte datoer at vælge i mellem som fx ved bookninger og planlægning med åbne og lukkede datoer. Der bør du i stedet overveje at anvende datepicker udvidelsen eller på anden vis indikere de præcise datoer, der er ledige for brugeren.

Vejledning

Placér felterne i den rækkefølge for datoform, der anvendes i Danmark, dvs. dag, måned og år. Felternes labels skal også afspejle det.

Links

Struktur (Fieldset)

Brug fieldset til at strukturere indholdet i mindre grupperinger. Dette er både godt for skærmlæsere og overblikket.

Tilgængelighed

Fieldset er vigtig for tilgængeligheden i en formular. Den hjælper skærmlæsere med at forstå sammenhængen og logikken i en formular.

Simpel formularstruktur

<div class="container">
    <form>
        <fieldset>
            <legend>
                <h1 class="h2">Dine kontaktoplysninger</h1>
            </legend>

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

                <input class="form-input   " placeholder="" id="fnavn"
                    value="" name="fnavn" type="text">
            </div>

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

                <input class="form-input   " placeholder="" id="enavn"
                    value="" name="enavn" type="text">
            </div>

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

                <input class="form-input   " placeholder="" id="email"
                    value="" name="email" type="text">
            </div>

            <div class="form-group">
                <label class="form-label " for="telefon">Telefonnr.</label>

                <input class="form-input   " placeholder="" id="telefon"
                    value="" name="telefon" type="text">
            </div>

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

Kompleks formularstruktur

<div class="container">
    <form>
        <fieldset>
            <legend>
                <h1 class="h2">Dine kontaktoplysninger</h1>
            </legend>

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

                <input class="form-input   " placeholder="" id="fnavn"
                    value="" name="fnavn" type="text">
            </div>

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

                <input class="form-input   " placeholder="" id="enavn"
                    value="" name="enavn" type="text">
            </div>

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

                <input class="form-input   " placeholder="" id="email"
                    value="" name="email" type="text">
            </div>

            <div class="form-group">
                <label class="form-label " for="telefon">Telefonnr.</label>

                <input class="form-input   " placeholder="" id="telefon"
                    value="" name="telefon" type="text">
            </div>

            <div class="form-group">
                <fieldset>
                    <legend>
                        <h2 class="h4">Hvordan vil du helst kontaktes?</h2>
                    </legend>
                    <ul class="nobullet-list">
                        <li>

                            <input id="kontakt-telefon" type="radio"
                                name="kontakt" value="kontakt-telefon"
                                class="form-radio  radio-large " />
                            <label for="kontakt-telefon" class="">Pr.
                                telefon </label>

                        </li>
                        <li>

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

                        </li>
                    </ul>
                </fieldset>
            </div>
            <div class="form-group">
                <fieldset>
                    <legend>
                        <h2 class="h4">Hvornår på dagen vil det passe
                            bedst, at vi kontakter dig?</h2>
                    </legend>
                    <ul class="nobullet-list">
                        <li>

                            <input id="morgen" type="checkbox"
                                name="tidspunkt[]" value="morgen"
                                class="form-checkbox  checkbox-large " />
                            <label for="morgen" class="">Om
                                morgenen</label>

                        </li>
                        <li>

                            <input id="middag" type="checkbox"
                                name="tidspunkt[]" value="middag"
                                class="form-checkbox  checkbox-large " />
                            <label for="middag" class="">Ved
                                middagstid</label>

                        </li>
                        <li>

                            <input id="eftermiddag" type="checkbox"
                                name="tidspunkt[]" value="eftermiddag"
                                class="form-checkbox  checkbox-large " />
                            <label for="eftermiddag" class="">Om
                                eftermiddagen</label>

                        </li>
                        <li>

                            <input id="aften" type="checkbox"
                                name="tidspunkt[]" value="aften"
                                class="form-checkbox  checkbox-large " />
                            <label for="aften" class="">Om aftenen</label>

                        </li>
                    </ul>
                </fieldset>
            </div>
            <div class="form-group">
                <fieldset>
                    <legend>
                        <h2 class="h4">Personlige oplysninger</h2>
                    </legend>

                    <div class="form-group ">
                        <fieldset>
                            <legend><label
                                    class="form-label icon-link">Indsendelsesfrist</label>
                                <span class="form-hint">For eksempel: 05 12
                                    2018</span></legend>
                            <span class="form-error-message"
                                id="form-error-message-input-error"
                                role="alert"></span>
                            <div class="date-group js-calendar-group mt-3">
                                <div class="form-group form-group-day">
                                    <label class="form-label"
                                        for="date_of_day_2">Dag</label>
                                    <input
                                        class="form-input js-calendar-day-input"
                                        id="date_of_day_2" value=""
                                        type="tel" min="1" max="31"
                                        maxlength="2"
                                        pattern="^[0-9]{0,2}$"
                                        data-input-regex="^[0-9]{0,2}$"
                                        title="Indskriv dag på månenden som tal" />
                                </div>
                                <div class="form-group form-group-month">
                                    <label class="form-label"
                                        for="date_of_month_1">Måned</label>
                                    <input
                                        class="form-input js-calendar-month-input"
                                        id="date_of_month_1" value=""
                                        type="tel" min="1" max="12"
                                        maxlength="2"
                                        pattern="^[0-9]{0,2}$"
                                        data-input-regex="^[0-9]{0,2}$"
                                        title="Indskriv månedens nummer" />
                                </div>
                                <div class="form-group form-group-year ">
                                    <label class="form-label"
                                        for="date_of_year_3">År</label>
                                    <input
                                        class="form-input js-calendar-year-input"
                                        id="date_of_year_3" value=""
                                        type="tel" min="1900" max="3000"
                                        maxlength="4"
                                        pattern="^[0-9]{0,4}$"
                                        data-input-regex="^[0-9]{0,4}$"
                                        title="Indskriv årstal" />
                                </div>

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

                    <div class="form-group">
                        <fieldset>
                            <legend>
                                <h3 class="h5">Bor du i Odense?</h3>
                            </legend>
                            <ul class="nobullet-list">
                                <li>

                                    <input id="odense-ja" type="radio"
                                        name="odense" value="odense-ja"
                                        class="form-radio  radio-large " />
                                    <label for="odense-ja" class="">Ja
                                    </label>

                                </li>
                                <li>

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

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