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-base">Wachtwoord</label>
  <p class="explanation" id="input-password-base-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,}$"}"
    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-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,}$"}"
      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-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,}$"}"
      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-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,}$"}"
      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-fieldset-message">
  </fieldset>

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