Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Fejlmeddelelser
Fejl: Skriv dit fulde navn, og adskil
for- og efternavne med mellemrum, fx Christian Emil Vestergaard
Christiansen
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="form-group form-error">
<label class="form-label " for="form-error">
Hvad hedder dit kursus?
</label>
<span class="form-hint" id="form-error-hint">
Fx: Skriv godt
</span>
<span class="form-error-message" id="form-error-error">
<span class="sr-only">Fejl:</span> Giv dit kursus et navn
</span>
<input class="form-input " required id="form-error" value=""
name="form-error" type="text" aria-invalid="true"
aria-describedby="form-error-hint form-error-error">
</div>For at hjælpe skærmlæsere tilføjes en skjult tekst “Fejl:” foran fejlmeddelelsen. Brugere af skærmlæser vil da høre “Fejl: Datoen for udløb af dit pas bør være i fortiden.”
Teksten er skjult i et <span> element med klassen sr-only.
Fejlmeddelelsen vises også i fejlopsummeringen øverst på siden.
Varianter
Tjekboks
<div class="form-group form-error">
<fieldset aria-describedby="example-nationalitet-error">
<legend class="form-label">Hvad er din nationalitet?</legend>
<span class="form-error-message"
id="example-nationalitet-error"><span
class="sr-only">Fejl:</span> Angiv om du er dansk, svensk
eller anden nationalitet</span>
<ul class="nobullet-list">
<li>
<input id="nationalitet1" type="checkbox"
name="nationalitet" value="dansk"
class="form-checkbox checkbox-large " />
<label for="nationalitet1" class="">Dansk</label>
</li>
<li>
<input id="nationalitet2" type="checkbox"
name="nationalitet[]" value="svensk"
class="form-checkbox checkbox-large " />
<label for="nationalitet2" class="">Svensk</label>
</li>
<li>
<input id="nationalitet3" type="checkbox"
name="nationalitet[]" value="anden"
class="form-checkbox checkbox-large " />
<label for="nationalitet3" class="">Anden
nationalitet</label>
</li>
</ul>
</fieldset>
</div>Radioknap
<div class="form-group form-error">
<fieldset aria-describedby="example-radiobutton-error">
<legend class="h5">Sagen handler om</legend>
<span class="form-error-message"
id="example-radiobutton-error"><span
class="sr-only">Fejl:</span> Vælg hvad sagen handler
om</span>
<div class="form-group-radio">
<input id="sagen-omhandler-ulykkesforsikring" type="radio"
name="sagen-omhandler" value="ulykkesforsikring"
class="form-radio radio-large " />
<label for="sagen-omhandler-ulykkesforsikring"
id="form-label-sagen-omhandler-ulykkesforsikring"
class="">Ulykkesforsikring (ASL §81) </label>
</div>
<div class="form-group-radio">
<input id="sagen-omhandler-erstatningsansvar" type="radio"
name="sagen-omhandler" value="erstatningsansvar"
class="form-radio radio-large " />
<label for="sagen-omhandler-erstatningsansvar"
id="form-label-sagen-omhandler-erstatningsansvar"
class="">Erstatningsansvar (ASL §10) </label>
</div>
<div class="form-group-radio">
<input id="sagen-omhandler-forsikringsselskab" type="radio"
name="sagen-omhandler" value="forsikringsselskab"
class="form-radio radio-large " />
<label for="sagen-omhandler-forsikringsselskab"
id="form-label-sagen-omhandler-forsikringsselskab"
class="">Forsikringsselskab (ASL §10) </label>
</div>
</fieldset>
</div>Datoangivelse
<div class="form-group form-error ">
<fieldset
aria-describedby="example-date-field-hint example-date-field-error">
<legend class="form-label">Hvornår blev dit pas udstedt?</legend>
<span class="form-hint" id="example-date-field-hint">Fx: 05 12
2018</span>
<span class="form-error-message "
id="example-date-field-error"><span
class="sr-only">Fejl:</span> Datoen kan ikke være i
fremtiden</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="01" 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="12" 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="2076" 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>