Wachtwoord
Benodigde stappen:
- Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
Aandachtspunten:
- Vertel de gebruiker welke eisen er gesteld zijn. Dit kan met een notificatie of met een openklapbare hulptekst. Voor meer informatie zie: toelichting - paragraaf en hulpteksten.
- Om berichten visueel te koppelen aan een inputveld kunnen de
<input>en het bericht gegroepeerd worden binnen een<div>.
Voorbeelden
Visueel voorbeeld:
Basis
HTML-voorbeeld:
section
<form action="" method="post">
<label for="input-password-1">Wachtwoord</label>
<p class="explanation" id="input-password-1-message">
<span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter,
1 kleine letter en 1 cijfer.
</p>
<input
id="input-password-1"
name="input-password-1"
pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
type="password"
aria-describedby="input-password-1-message"
/>
<button type="submit">Verzend</button>
</form>Toelichting gegroepeerd met het invoerveld
HTML-voorbeeld:
section
<form action="" method="post">
<div>
<label for="input-password-2">Wachtwoord</label>
<p class="explanation" id="input-password-2-message">
<span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1
hoofdletter, 1 kleine letter en 1 cijfer.
</p>
<input
id="input-password-2"
name="input-password-2"
pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
type="password"
aria-describedby="input-password-2-message"
/>
</div>
<button type="submit">Verzend</button>
</form>Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Importeer component via npm
CSS-voorbeeld:
@use "@minvws/manon/form-base";
@use "@minvws/manon/form-input";Instelbare variabelen
Dit element heeft zelf geen instelbare variabelen.
Bijbehorende elementen: