Selectielijst - select testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Basis

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="select-base">Selectielijst</label>
  <select id="select-base" name="select-base">
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="3">Optie 3</option>
  </select>

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

Selectielijst gegroepeerd binnen div

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <label for="select-div">Selectielijst</label>
    <select id="select-div" name="select-div">
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
  </div>

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

Selectielijst gegroepeerd binnen div horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="horizontal-view">
    <label for="select-div-horizontal">Selectielijst</label>
    <select id="select-div-horizontal" name="select-div-horizontal">
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
  </div>

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

Selectielijst binnen section

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <section>
    <label for="select-section">Selectielijst</label>
    <select id="select-section" name="select-section">
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
  </section>

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

Selectielijst gegroepeerd binnen section horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <section class="horizontal-view">
    <label for="select-section-horizontal">Selectielijst</label>
    <select id="select-section-horizontal" name="select-section-horizontal">
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
  </section>

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

Selectielijst binnen fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset>
    <legend>Selectielijst binnen een fieldset voorbeeld</legend>
    <label for="select-fieldset">Selectielijst</label>
    <select id="select-fieldset" name="select-fieldset">
      <option value="1">Optie 1</option>
      <option value="2">Optie 2</option>
      <option value="3">Optie 3</option>
    </select>
  </fieldset>

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

Selectielijst gegroepeerd binnen fieldset horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset>
    <legend>Selectielijst binnen een fieldset voorbeeld</legend>
    <div class="horizontal-view">
      <label for="select-fieldset-horizontal">Selectielijst</label>
      <select id="select-fieldset-horizontal" name="select-fieldset-horizontal">
        <option value="1">Optie 1</option>
        <option value="2">Optie 2</option>
        <option value="3">Optie 3</option>
      </select>
      </div>
  </fieldset>

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

Verplicht

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="select-required">Verplichte selectielijst</label>
  <span class="nota-bene">Dit veld is verplicht</span>
  <select id="select-required" name="select-required" required>
    <option value="">--Please choose an option--</option>
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="3">Optie 3</option>
  </select>

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

Uitgeschakeld

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="select-disabled">Uitgeschakelde selectielijst</label>
  <select disabled id="select-disabled" name="select-disabled">
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="3">Optie 3</option>
  </select>

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

Voorgeselecteerde optie

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="select-selected">Selectielijst met voorgeselecteerde optie</label>
  <select id="select-selected" name="select-selected">
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="Voorgeselecteerd" selected>Voorgeselecteerd</option>
  </select>

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

Gegroepeerde opties

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="select-optgroup">Gegroepeerde opties</label>
  <select id="select-optgroup" name="select-optgroup">
    <optgroup label="Rollende objecten">
      <option value="Bal">Bal</option>
      <option value="Wiel">Wiel</option>
      <option value="Knikker">Knikker</option>
    </optgroup>

    <optgroup label="Slecht rollende objecten">
      <option value="Aambeeld">Aambeeld</option>
      <option value="Eiffeltoren">Eiffeltoren</option>
      <option value="Dinosaurus">Dinosaurus</option>
    </optgroup>
  </select>

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