Wachtwoord testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Basis

Visueel voorbeeld:

HTML-voorbeeld:

<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-base"
    name="input-password-base"
    pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
    type="password"
    aria-describedby="input-password-base-message"
  />
  <button type="submit">Verzend</button>
</form>

Toelichting gegroepeerd met het invoerveld binnen een div

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <label for="input-password-div">Wachtwoord</label>
    <p class="explanation" id="input-password-div-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-div"
      name="input-password-div"
      pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
      type="password"
      aria-describedby="input-password-div-message"
    />
  </div>
  <button type="submit">Verzend</button>
</form>

Gegroepeerd binnen een section

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <section>
    <label for="input-password-section">Wachtwoord</label>
    <p class="explanation" id="input-password-section-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-section"
      name="input-password-section"
      pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
      type="password"
      aria-describedby="input-password-section-message"
    />
  </section>
  <button type="submit">Verzend</button>
</form>

Gegroepeerd binnen een fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset>
    <legend>Wachtwoord binnen fieldset voorbeeld</legend>
    <label for="input-password-fieldset">Wachtwoord</label>
    <p class="explanation" id="input-password-fieldset-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-fieldset"
      name="input-password-fieldset"
      pattern={"^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$"}
      type="password"
      aria-describedby="input-password-fieldset-message"
    />
  </fieldset>
  <button type="submit">Verzend</button>
</form>