Kleurselector volledig gevuld

Overzicht van het element in mogelijke structuren om te testen.

Tests

Basis

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="color-input-filled-base">Selecteer de gewenste kleur</label>
  <input id="color-input-filled-base" name="color-input-filled-base" type="color" value="#ffffff">

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

Input en label gegroepeerd binnen een div

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <label for="color-input-filled-div">Selecteer de gewenste kleur</label>
    <input id="color-input-filled-div" name="color-input-filled-div" type="color" value="#ffffff">
  </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="color-input-filled-section">Selecteer de gewenste kleur</label>
    <input id="color-input-filled-section" name="color-input-filled-section" type="color" value="#ffffff">
  </section>
  <button type="submit">Verzend</button>
</form>

Input en label gegroepeerd binnen een fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset>
    <legend>Kleurselector volledig gevuld voorbeeld</legend>
    <label for="color-input-filled-fieldset">Selecteer de gewenste kleur</label>
    <input id="color-input-filled-fieldset" name="color-input-filled-fieldset" type="color" value="#ffffff">
  </fieldset>
  <button type="submit">Verzend</button>
</form>