Weergave in kolommen testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

column-2

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="column-2">
    <div>
      <label for="voorbeeld-invoerveld-1">Voorbeeld invoerveld</label>
      <div>
        <span class="nota-bene" id="voorbeeld-invoerveld-1-explanation"
          >Voorbeeld van een instructietekst
        </span>
        <input
          id="voorbeeld-invoerveld-1"
          name="voorbeeld-invoerveld-1"
          type="text"
          aria-describedby="voorbeeld-invoerveld-1-explanation"
        />
      </div>
    </div>

    <div>
      <label for="voorbeeld-invoerveld-2">Voorbeeld invoerveld</label>

      <div>
        <span class="nota-bene" id="voorbeeld-invoerveld-2-explanation"
          >Voorbeeld van een instructietekst
        </span>
        <input
          id="voorbeeld-invoerveld-2"
          name="voorbeeld-invoerveld-2"
          type="text"
          aria-describedby="voorbeeld-invoerveld-2-explanation"
        />
      </div>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

column-2

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset class="column-2">
    <legend>Column 2 op een <code>fieldset</code></legend>
    <div>
      <label for="voorbeeld-invoerveld-fieldset-1">Voorbeeld invoerveld</label>
      <input
        id="voorbeeld-invoerveld-fieldset-1"
        name="voorbeeld-invoerveld-fieldset-1"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-fieldset-2">Voorbeeld invoerveld</label>
      <input
        id="voorbeeld-invoerveld-fieldset-2"
        name="voorbeeld-invoerveld-fieldset-2"
        type="text"
      />
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

column-3

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="column-3">
    <div>
      <label for="voorbeeld-invoerveld-column-3-1">Voornaam</label>

      <div>
        <span class="nota-bene" id="voorbeeld-invoerveld-column-3-1-explanation"
          >Volledige naam, spaties zijn toegestaan. Bijvoorbeeld "Jan Jaap"
        </span>
        <input
          id="voorbeeld-invoerveld-column-3-1"
          name="voorbeeld-invoerveld-column-3-1"
          type="text"
          aria-describedby="voorbeeld-invoerveld-column-3-1-explanation"
        />
      </div>
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-3-2">Tussenvoegsel</label>

      <div>
        <span class="nota-bene" id="voorbeeld-invoerveld-column-3-2-explanation"
          >Bijvoorbeeld: "van der"
        </span>
        <input
          id="voorbeeld-invoerveld-column-3-2"
          name="voorbeeld-invoerveld-column-3-2"
          type="text"
          aria-describedby="voorbeeld-invoerveld-column-3-2-explanation"
        />
      </div>
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-3-3">Achternaam</label>

      <div>
        <span class="nota-bene" id="voorbeeld-invoerveld-column-3-3-explanation"
          >Bijvoorbeeld: "Zanden Brouwer"
        </span>
        <input
          id="voorbeeld-invoerveld-column-3-3"
          name="voorbeeld-invoerveld-column-3-3"
          type="text"
          aria-describedby="voorbeeld-invoerveld-column-3-3-explanation"
        />
      </div>
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

column-3 op fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset class="column-3">
    <legend>Column-3 op een <code>fieldset</code></legend>
    <div>
      <label for="voorbeeld-invoerveld-column-3-fieldset-1">Voornaam</label>
      <input
        id="voorbeeld-invoerveld-column-3-fieldset-1"
        name="voorbeeld-invoerveld-column-3-fieldset-1"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-3-fieldset-2">Tussenvoegsel</label>
      <input
        id="voorbeeld-invoerveld-column-3-fieldset-2"
        name="voorbeeld-invoerveld-column-3-fieldset-2"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-3-fieldset-3">Achternaam</label>
      <input
        id="voorbeeld-invoerveld-column-3-fieldset-3"
        name="voorbeeld-invoerveld-column-3-fieldset-3"
        type="text"
      />
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

column-4

Visueel voorbeeld:

HTML-voorbeeld:

 <form action="" method="post">
  <div class="column-4">
    <div>
      <label for="voorbeeld-invoerveld-column-4-1">Lorem</label>
      <input
        id="voorbeeld-invoerveld-column-4-1"
        name="voorbeeld-invoerveld-column-4-1"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-4-2">Ipsum</label>
      <input
        id="voorbeeld-invoerveld-column-4-2"
        name="voorbeeld-invoerveld-column-4-2"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-4-3">Dolor</label>
      <input
        id="voorbeeld-invoerveld-column-4-3"
        name="voorbeeld-invoerveld-column-4-3"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-4-4">Set</label>
      <input
        id="voorbeeld-invoerveld-column-4-4"
        name="voorbeeld-invoerveld-column-4-4"
        type="text"
      />
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

column-4 binnen fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset class="column-4">
    <legend>Column 4 binnen <code>fieldset</code></legend>
    <div>
      <label for="voorbeeld-invoerveld-column-4-fieldset-1">Lorem</label>
      <input
        id="voorbeeld-invoerveld-column-4-fieldset-1"
        name="voorbeeld-invoerveld-column-4-fieldset-1"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-4-fieldset-2">Ipsum</label>
      <input
        id="voorbeeld-invoerveld-column-4-fieldset-2"
        name="voorbeeld-invoerveld-column-4-fieldset-2"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-4-fieldset-3">Dolor</label>
      <input
        id="voorbeeld-invoerveld-column-4-fieldset-3"
        name="voorbeeld-invoerveld-column-4-fieldset-3"
        type="text"
      />
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-4-fieldset-4">Set</label>
      <input
        id="voorbeeld-invoerveld-column-4-fieldset-4"
        name="voorbeeld-invoerveld-column-4-fieldset-4"
        type="text"
      />
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>

column-2 type="date"

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="column-2">
    <div>
      <label for="voorbeeld-date-start">van</label>
      <input id="voorbeeld-date-start" name="voorbeeld-date-start">
    </div>

    <div>
      <label for="voorbeeld-date-end">tot</label>
      <input id="voorbeeld-date-end" name="voorbeeld-date-end">
    </div>
  </div>
  <button type="submit">Verzend</button>
</form>

column-2 type="date" binnen fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset class="column-2">
    <legend>Datum gecombineerd op een regel test</legend>
    <div>
      <label for="voorbeeld-fieldset-date-start">van</label>
      <input id="voorbeeld-fieldset-date-start" name="voorbeeld-fieldset-date-start">
    </div>

    <div>
      <label for="voorbeeld-fieldset-date-end">tot</label>
      <input id="voorbeeld-fieldset-date-end" name="voorbeeld-1-date-3-end">
    </div>
  </fieldset>
  <button type="submit">Verzend</button>
</form>