Wachtwoord

Benodigde stappen:

  1. 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

Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer.

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,}$"}"
    placeholder="wachtwoord"
    title="Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer."
    type="password"
    aria-describedby="input-password-1-message">

  <button type="submit">Verzend</button>
</form>

Toelichting gegroepeerd met het invoerveld

Toelichting: Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer.

HTML-voorbeeld:

section

<form action="" method="post">
  <div>
    <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,}$"}"
      placeholder="wachtwoord"
      title="Wachtwoord moet minimaal 8 tekens bevatten waarvan minimaal 1 hoofdletter, 1 kleine letter en 1 cijfer."
      type="password"
      aria-describedby="input-password-1-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

Benodigd

  • form/form-base.scss
  • form/form-input.scss

Optioneel

  • form/form-base-variables.scss
  • form/form-input-variables.scss

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.

Bijbehorende elementen: