DSB Digitalprofil

Skjemaelementer som er bygget som en utvidelse av bootstrap.

En utvidet input-group som gjør det mulig å legge ikoner på input-elementer.

Fylkesmann

Dato for tilsyn

{{ (!showcode1) ? "Vis" : "Skjul" }} kode

            <div class="form-group">
    <label for="fylkesmann">Fylkesmann</label>
    
    <div class="input-group input-group-extended">
        <select id="fylkesmann" class="form-control input-lg">
            <option value="">Velg fylkesmann</option>
            <option value="Fylkesmannen i Vestfold">Fylkesmannen i Vestfold</option>
            <option value="Fylkesmannen i Telemark">Fylkesmannen i Telemark</option>
        </select>
        <div class="input-group-btn">
            <div class="btn btn-default">
                <i class="icon icon-arrow"></i>
            </div>
        </div>
    </div>
</div>

<div class="form-group">
    <label for="dato">Dato for tilsyn</label>
    
    <div class="input-group input-group-extended">
        <input type="text" id="dato" class="form-control input-lg" placeholder="Velg dato"/>
        <div class="input-group-btn">
            <div class="btn btn-default">
                <i class="icon icon-calendar"></i>
            </div>
        </div>
    </div>
</div>

En alternativ presentasjon av en- eller flervalgsknapper der sjekkbokser og radioknapper vises som ordinære knapper.

Er utstyret tatt vare på / satt i karantene?

Nei

{{ (!showcode2) ? "Vis" : "Skjul" }} kode

            <div class="form-group">
    <h3 class="lab">Er utstyret tatt vare på / satt i karantene?</h3>

    <div class="button-list row">
        <div class="col-sm-6">
            <input type="radio" name="quarantined" id="quarantined1" value="1"/>
            <label class="btn btn-default btn-xl btn-block" for="quarantined1">Ja</label>
        </div>
        <div class="col-sm-6">
            <input type="radio" name="quarantined" id="quarantined0" value="0"/>
            <label class="btn btn-default btn-xl btn-block" for="quarantined0">Nei</label>
        </div>
    </div>
</div>

Hjelpknappen er et gjennomgående element som brukes der det er mer informasjon tilgjengelig.

Det er implementert et Angular-direktiv som forenkler jobben med å bygge markup for hjelpetekster.

Tilsynet er utført av

Velg fylkesmannsembetet som har utført tilsynet fra nedtrekksmeny.

{{ (!showcode3) ? "Vis" : "Skjul" }} kode

            <div class="form-group">
    <label for="controller">Tilsynet er utført av</label>

    <a href="#" ng-click="showHelpContent = !showHelpContent" onClick="return false">
        <i class="icon-help" aria-label="Help icon"></i>
    </a>

    <div class="help-content" ng-if="showHelpContent">
        <p>Velg fylkesmannsembetet som har utført tilsynet fra nedtrekksmeny.</p>
    </div>

    <div class="input-group input-group-extended">
        <select name="controller" id="controller" class="form-control input-lg">
            <option value="">Velg fylkesmann</option>
            <option value="Fylkesmannen i Vestfold">Fylkesmannen i Vestfold</option>
            <option value="Fylkesmannen i Telemark">Fylkesmannen i Telemark</option>
        </select>

        <div class="input-group-btn">
            <div class="btn btn-default">
                <i class="icon icon-arrow"></i>
            </div>
        </div>
    </div>
</div>

Skjemaelementer

Inputfelter med ikon/knapp

Select-/ radio-knappeliste

Er utstyret tatt vare på / satt i karantene?

Hjelp-knapp