Layout authenticatie testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

div

div met class="layout-authentication".

Visueel voorbeeld:

HTML-voorbeeld:

<div class="layout-authentication">
  <form>
    <div>
      <label for="example-1-name-1">User name</label>
      <input type="text" id="example-1-name-1">
    </div>
    <div>
      <label for="example-1-password-1">Password</label>
      <input type="password" id="example-1-password-1">
    </div>
    <button type="submit">Lorem ipsum</button>
  </form>
</div>

section

section met class="layout-authentication".

Visueel voorbeeld:

HTML-voorbeeld:

<section class="layout-authentication">
  <form>
    <div>
      <label for="example-2-name-1">User name</label>
      <input type="text" id="example-2-name-1">
    </div>
    <div>
      <label for="example-2-password-1">Password</label>
      <input type="password" id="example-2-password-1">
    </div>
    <button type="submit">Lorem ipsum</button>
  </form>
</section>

article

article met class="layout-authentication".

Visueel voorbeeld:

HTML-voorbeeld:

<article class="layout-authentication">
  <form>
    <div>
      <label for="example-3-name-1">User name</label>
      <input type="text" id="example-3-name-1">
    </div>
    <div>
      <label for="example-3-password-1">Password</label>
      <input type="password" id="example-3-password-1">
    </div>
    <button type="submit">Lorem ipsum</button>
  </form>
</article>

form

form met class="layout-authentication".

Visueel voorbeeld:

HTML-voorbeeld:

<form class="layout-authentication">
  <div>
    <label for="example-4-name-1">User name</label>
    <input type="text" id="example-4-name-1">
  </div>
  <div>
    <label for="example-4-password-1">Password</label>
    <input type="password" id="example-4-password-1">
  </div>
  <button type="submit">Lorem ipsum</button>
</form>