Gå til sidens indhold
Det Fælles Designsystem

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

Inputfelter med hentet data

En formular kan i visse situationer indeholde felter, der er udfyldt på forhånd med automatisk hentet data. Denne data skal nogen gange kunne ændres.

Eksempel på inputfelt med hentet data
Data hentet fra CVR.dk
Data hentet fra CVR.dk
Vis HTML for eksempel på inputfelt med hentet data 
<div class="form-group">
    <label class="form-label" for="hentetdata">Fornavn og efternavn</label>

    <span class="form-hint" id="hentetdata-hint">Data hentet fra CVR.dk</span>

    <input type="text" id="hentetdata" name="navn" class="form-input"
        value="Keld Hedagaardsen" aria-describedby="hentetdata-hint " readonly>
</div>

<div class="form-group">
    <label class="form-label" for="hentetdata-redigerbar">Fornavn og efternavn</label>

    <span class="form-hint" id="hentetdata-redigerbar-hint">Data hentet fra CVR.dk</span>

    <div class="d-block d-sm-flex flex-sm-row align-items-sm-center">
        <input type="text" id="hentetdata-redigerbar" name="navn-redigerbar"
            class="form-input mr-sm-3" value="Keld Hedagaardsen"
            aria-describedby="hentetdata-redigerbar-hint " readonly>
        <button type="button" class="function-link mt-3"
            id="hentetdata-rediger"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#mode"></use></svg>Rediger<span
                class="sr-only"> fornavn og efternavn</span></button>
    </div>
</div>

Anvendes til

Dette pattern anvendes til visning af data, som er hentet automatisk ind i en formular. Det kan fx være data fra CVR- eller CPR-registret, som derved er forudfyldt. Dette letter udfyldelsen for brugeren, samtidig med at det giver brugeren mulighed for at redigere den hentede data, hvis dette er nødvendigt.

Anvendes ikke til

Anvendes ikke til visning af data, som brugeren selv har tastet ind. Anvend da i stedet almindelige inputfelter eller strukturerede lister, hvis der er tale om en opsummeringsside.

Vejledning

Den hentede data vises i et read-only felt med en hjælpetekst, som gør opmærksom på, at der er tale om automatisk indhentet data.

Hvis brugeren har mulighed for at rette i data, placeres et funktionslink til redigering ved siden af feltet. Ved klik på funktionslinket bliver inputfeltet aktivt, og hjælpeteksten fjernes. Den hentede data forbliver i feltet, så brugeren kan rette i teksten. Bemærk, at man i koden selv står for at implementere denne funktionalitet.

Det har ingen indflydelse på en formulars flow, om brugeren vælger at redigere feltet eller ej. Feltets indhold gemmes og valideres som ethvert andet felt i formularen.

Eksempel på anvendelse af pattern

Eksempel på formular med hentet data

Virksomhedsoplysninger

Data hentet fra CVR.dk
Data hentet fra CVR.dk
Data hentet fra CVR.dk
Vis HTML for eksempel på formular med hentet data 
<h2>Virksomhedsoplysninger</h2>
<form novalidate>

    <div class="form-group">
        <label class="form-label" for="virksomhednavn">Virksomhednavn</label>

        <span class="form-hint" id="virksomhednavn-hint">Data hentet fra CVR.dk</span>

        <input type="text" id="virksomhednavn" name="virksomhednavn" class="form-input"
            value="Eksempelnavn" aria-describedby="virksomhednavn-hint " readonly>
    </div>

    <div class="form-group">
        <label class="form-label" for="cvr-nummer">CVR-nummer</label>

        <span class="form-hint" id="cvr-nummer-hint">Data hentet fra CVR.dk</span>

        <input type="text" id="cvr-nummer" name="cvr-nummer" class="form-input"
            value="12345678" aria-describedby="cvr-nummer-hint " readonly>
    </div>

    <div class="form-group">
        <label class="form-label" for="adresse">Adresse</label>

        <span class="form-hint" id="adresse-hint">Data hentet fra CVR.dk</span>

        <div class="d-block d-sm-flex flex-sm-row align-items-sm-center">
            <input type="text" id="adresse" name="navn-redigerbar" class="form-input mr-sm-3"
                value="Mønstervej 23, 1234 Eksempelby" aria-describedby="adresse-hint "
                readonly>
            <button type="button" class="function-link mt-3"
                id="adresse-rediger"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#mode"></use></svg>Rediger<span
                    class="sr-only"> adresse</span></button>
        </div>
    </div>

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

        <input type="tel" id="telefon" name="telefon" class="form-input input-width-s"
            required autocomplete="tel">
    </div>

    <div class="form-group">
        <label class="form-label" for="emailinput">E-mailadresse</label>

        <input type="email" id="emailinput" name="email" class="form-input" required
            autocomplete="email">
    </div>

    <button class="button button-primary mt-9">
        Næste
    </button>
</form>

Referencer