Gå til sidens indhold

Vælg et tema

Luk

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


Kode

Formular

Dine kontaktoplysninger

Har du kørekort?

Eksempler og retningslinjer

Installation

HTML Struktur

<h1 class="h2">Dine kontaktoplysninger</h1>
<form>
    <!-- Felt start: Navn -->
    <div class="form-group">
        <label class="form-label " for="navn">
            Navn
        </label>

        <input class="form-input " id="navn" value="" name="navn"
            type="text">
    </div>
    <!-- Felt slut: Navn -->

    <!-- Felt start: Kørekort -->
    <div class="form-group">
        <fieldset>
            <legend class="h4">Har du kørekort?</legend>
            <ul class="nobullet-list">
                <li>
                    <input id="kort-ja" type="radio" name="kontakt"
                        value="kort-ja" class="form-radio  radio-large " />
                    <label for="kort-ja" id="form-label-kort-ja"
                        class="">Ja </label>

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

                </li>
            </ul>
        </fieldset>
    </div>
    <!-- Felt slut: Kørekort -->

    <!-- Knap start -->
    <button class="button button-primary mt-9">
        Gem oplysninger
    </button>
    <!-- Knap slut -->
</form>

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 ID’et 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.

Kompleks eksempel

<h1 class="h2">Dine kontaktoplysninger</h1>
<form>
    <!-- Felt start: Fornavn -->
    <div class="form-group">
        <label class="form-label " for="fnavn">
            Fornavn
        </label>

        <input class="form-input " id="fnavn" value="" name="fnavn"
            type="text">
    </div>
    <!-- Felt slut: Fornavn -->
    <!-- Felt start: Efternavn -->
    <div class="form-group">
        <label class="form-label " for="enavn">
            Efternavn
        </label>

        <input class="form-input " id="enavn" value="" name="enavn"
            type="text">
    </div>
    <!-- Felt slut: Efternavn -->
    <!-- Felt start: E-mail adresse -->
    <div class="form-group">
        <label class="form-label " for="email">
            E-mail adresse
        </label>

        <input class="form-input " id="email" value="" name="email"
            type="text">
    </div>
    <!-- Felt slut: E-mail adresse -->
    <!-- Felt start: Telefonnr -->
    <div class="form-group">
        <label class="form-label " for="telefon">
            Telefonnr.
        </label>

        <input class="form-input " id="telefon" value="" name="telefon"
            type="text">
    </div>
    <!-- Felt slut: Telefonnr -->

    <!-- Felt start: Kontaktmetode -->
    <div class="form-group">
        <fieldset>
            <legend class="h4">Hvordan vil du helst kontaktes?</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"
                        id="form-label-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"
                        id="form-label-kontakt-email" class="">Pr. e-mail
                    </label>

                </li>
            </ul>
        </fieldset>
    </div>
    <!-- Felt slut: Kontaktmetode -->

    <!-- Felt start: Tid på dagen -->
    <div class="form-group">
        <fieldset>
            <legend class="h4">Hvornår på dagen vil det passe bedst, at vi
                kontakter dig?</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>
    <!-- Felt slut: Tid på dagen -->
    <!-- Felt start: Personlige oplysninger -->
    <div class="form-group">
        <fieldset>
            <legend class="h4">Personlige oplysninger</legend>

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

            <div class="form-group  mt-0">
                <fieldset aria-dsecribedby="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>
                    <span class="form-error-message  d-none"
                        id="example-date-field-error"><span
                            class="sr-only">Fejl:</span> </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" />
                        </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" />
                        </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" />
                        </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>
                            <input id="odense-ja" type="radio"
                                name="odense" value="odense-ja"
                                class="form-radio  radio-large " />
                            <label for="odense-ja"
                                id="form-label-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"
                                id="form-label-odense-nej" class="">Nej
                            </label>

                        </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>