Invoerveld testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Input direct binnen form

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="voorbeeld-invoerveld-direct">Voorbeeld invoerveld</label>
  <input id="voorbeeld-invoerveld-direct" name="voorbeeld-invoerveld-direct" placeholder="voorbeeld invoerveld" type="text">
  <button type="submit">Verzend</button>
</form>

Input en label gegroepeerd binnen een div

Visueel voorbeeld:

HTML-voorbeeld:

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

Input en label gegroepeerd binnen een section

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <section>
    <label for="voorbeeld-invoerveld-section">Voorbeeld invoerveld</label>
    <input id="voorbeeld-invoerveld-section" name="voorbeeld-invoerveld-section" placeholder="voorbeeld invoerveld" type="text">
  </section>
  <button type="submit">Verzend</button>
</form>

Input en label gegroepeerd binnen een fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset>
    <label for="voorbeeld-invoerveld-fieldset">Voorbeeld invoerveld</label>
    <input id="voorbeeld-invoerveld-fieldset" name="voorbeeld-invoerveld-fieldset" placeholder="voorbeeld invoerveld" type="text">
  </fieldset>
  <button type="submit">Verzend</button>
</form>