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>
      <input id="voorbeeld-invoerveld-1" name="voorbeeld-invoerveld-1" placeholder="voorbeeld invoerveld" type="text">
    </div>

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

column-2

Visueel voorbeeld:

HTML-voorbeeld:

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

    <div>
      <label for="voorbeeld-invoerveld-fieldset-2">Voorbeeld invoerveld</label>
      <input id="voorbeeld-invoerveld-fieldset-2" name="voorbeeld-invoerveld-fieldset-2" placeholder="voorbeeld invoerveld" type="text">
    </div>
  </div>
  <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>
      <input id="voorbeeld-invoerveld-column-3-1" name="voorbeeld-invoerveld-column-3-1" placeholder="Jan" type="text">
    </div>

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

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

column-3 op fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="column-3">
    <div>
      <label for="voorbeeld-invoerveld-column-3-1">Voornaam</label>
      <input id="voorbeeld-invoerveld-column-3-1" name="voorbeeld-invoerveld-column-3-1" placeholder="Jan" type="text">
    </div>

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

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

column-4

Visueel voorbeeld:

HTML-voorbeeld:

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

    <div>
      <label for="voorbeeld-invoerveld-column-4-2">Tussenvoegsel</label>
      <input id="voorbeeld-invoerveld-column-4-2" name="voorbeeld-invoerveld-column-4-2" placeholder="van der" type="text">
    </div>

    <div>
      <label for="voorbeeld-invoerveld-column-4-3">Achternaam</label>
      <input id="voorbeeld-invoerveld-column-4-3" name="voorbeeld-invoerveld-column-4-3" placeholder="Zanden" 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" placeholder="lorem" 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" placeholder="ipsum" 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" placeholder="dolor" 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" placeholder="set" 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-1-date-1-start">van</label>
      <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start">
    </div>

    <div>
      <label for="voorbeeld-1-date-1-end">tot</label>
      <input id="voorbeeld-1-date-1-end" name="voorbeeld-1-date-3-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-1-date-1-start">van</label>
      <input id="voorbeeld-1-date-1-start" name="voorbeeld-1-date-1-start">
    </div>

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