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
Fejlopsummering
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="alert alert-error mt-0 mb-8" role="alert" aria-atomic="true">
<div class="alert-body">
<p class="alert-heading">Der er problemer</p>
<ul class="alert-text nobullet-list">
<li><a class="function-link" href="#date-field-year">Datoen for
udløbsdato på dit pas bør inkludere årstal</a></li>
<li><a class="function-link" href="#zipcode-field">Indtast
postnummer - fx 4000</a></li>
</ul>
</div>
</div>Indsættes over formularen, men under h1 overskriften.
Hver fejl tilføjes til <ul> listen med et anchor link til feltet der er omtalt således at fokus flyttes til pågældende felt.
Placering
<div class="alert alert-error mt-0 mb-8" role="alert" aria-atomic="true">
<div class="alert-body">
<p class="alert-heading">Der er problemer</p>
<ul class="alert-text nobullet-list">
<li><a class="function-link" href="#example-name">Skriv dit
fulde navn, og adskil for- og efternavne med mellemrum,
fx Christian Emil Vestergaard Christiansen</a></li>
<li><a class="function-link" href="#nationalitet1">Angiv om du
er dansk, svensk eller anden nationalitet</a></li>
<li><a class="function-link" href="#date-day">Datoen kan ikke
være i fremtiden</a></li>
</ul>
</div>
</div>
<h1 id="oplysninger-om-dig">Oplysninger om dig</h1>
<form>
<div class="form-group form-error">
<label class="form-label " for="example-name">
Hvad er dit fulde navn?
</label>
<span class="form-error-message" id="example-name-error">
<span class="sr-only">Fejl:</span> Skriv dit fulde navn, og
adskil for- og efternavne med mellemrum, fx Christian Emil
Vestergaard Christiansen
</span>
<input class="form-input " required id="example-name" value=""
name="form-error" type="text" aria-invalid="true"
aria-describedby=" example-name-error">
</div>
<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>
<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>
</form>