Bereik - textarea testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Basis

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="range-example-base">Range</label>
  <input type="range" id="range-example-base" name="range-example-base" min="0" max="100">
</form>

Bereik gegroepeerd binnen div

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <label for="range-example-div">Range</label>
    <input type="range" id="range-example-div" name="range-example-div" min="0" max="100">
  </div>
</form>

Bereik gegroepeerd binnen div horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="horizontal-view">
    <label for="range-example-div-horizontal">Range</label>
    <input type="range" id="range-example-div-horizontal" name="range-example-div-horizontal" min="0" max="100">
  </div>
</form>

Bereik gegroepeerd binnen section

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <section>
    <label for="range-example-section">Range</label>
    <input type="range" id="range-example-section" name="range-example-section" min="0" max="100">
  </section>
</form>

Bereik gegroepeerd binnen section horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <section class="horizontal-view">
    <label for="range-example-section-horizontal">Range</label>
    <input type="range" id="range-example-section-horizontal" name="range-example-section-horizontal" min="0" max="100">
  </section>
</form>

Bereik gegroepeerd binnen fieldset

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset>
    <legend>bereik-invoerveld binnen een fieldset voorbeeld</legend>
    <label for="range-example-fieldset">Range</label>
    <input type="range" id="range-example-fieldset" name="range-example-fieldset" min="0" max="100">
  </fieldset>
</form>

Bereik gegroepeerd binnen fieldset horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <fieldset class="horizontal-view">
    <legend>bereik-invoerveld binnen een fieldset voorbeeld</legend>
    <label for="range-example-fieldset-horizontal">Range</label>
    <input type="range" id="range-example-fieldset-horizontal" name="range-example-fieldset-horizontal" min="0" max="100">
  </fieldset>
</form>