Fieldset selectievak testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

Basis

HTML-voorbeeld:

<form action="" method="post">
    <fieldset>
        <legend>Examples</legend>
        <div class="checkbox">
          <input type="checkbox" id="checkbox-example-1" name="standaard-checkbox">
          <label for="checkbox-example-1">Lorem ipsum dolor sit amet</label>
        </div>
    </fieldset>
</form>

Verplicht

HTML-voorbeeld:

<form action="" method="post">
    <fieldset>
        <legend>Examples</legend>
        <div class="required">
            <span class="nota-bene">Dit veld is verplicht</span>
            <div class="checkbox">
              <input type="checkbox" id="checkbox-example-required-1" name="voorwaarden" required>
              <label for="checkbox-example-required-1">verplicht selectievak</label>
            </div>
        </div>
    </fieldset>
</form>

Uitgeschakeld

HTML-voorbeeld:

<form action="" method="post">
    <fieldset>
        <legend>Examples</legend>
        <div class="checkbox">
            <input type="checkbox" id="checkbox-example-disabled" name="disabled-checkbox" disabled>
            <label for="checkbox-example-disabled">Lorem ipsum dolor sit amet</label>
        </div>
    </fieldset>
</form>

Lijst

HTML-voorbeeld:

<form action="" method="post">
    <fieldset>
        <legend>Examples</legend>
        <div class="checkbox">
            <input type="checkbox" id="checkbox-example-list-1" name="standaard-checkbox">
            <label for="checkbox-example-list-1">Lorem ipsum dolor sit amet</label>
        </div>

        <div class="checkbox">
            <input type="checkbox" id="checkbox-example-list-2" name="standaard-checkbox">
            <label for="checkbox-example-list-2">Lorem ipsum dolor sit amet</label>
        </div>

        <div class="checkbox">
            <input type="checkbox" id="checkbox-example-list-3" name="standaard-checkbox">
            <label for="checkbox-example-list-3">Lorem ipsum dolor sit amet</label>
        </div>

        <div class="checkbox">
            <input type="checkbox" id="checkbox-example-list-4" name="standaard-checkbox">
            <label for="checkbox-example-list-4">Lorem ipsum dolor sit amet</label>
        </div>
    </fieldset>
</form>

Lijst met "label"

HTML-voorbeeld:

<form action="" method="post">
    <fieldset>
        <legend>Examples</legend>
        <fieldset>
            <legend>List label</legend>
            <div class="checkbox">
                <input type="checkbox" id="checkbox-example-list-label-1" name="standaard-checkbox">
                <label for="checkbox-example-list-label-1">Lorem ipsum dolor sit amet</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" id="checkbox-example-list-label-2" name="standaard-checkbox">
                <label for="checkbox-example-list-label-2">Lorem ipsum dolor sit amet</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" id="checkbox-example-list-label-3" name="standaard-checkbox">
                <label for="checkbox-example-list-label-3">Lorem ipsum dolor sit amet</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" id="checkbox-example-list-label-4" name="standaard-checkbox">
                <label for="checkbox-example-list-label-4">Lorem ipsum dolor sit amet</label>
            </div>
        </fieldset>
    </fieldset>
</form>

Met nota-bene

HTML-voorbeeld:

<form action="" method="post">
    <fieldset>
        <legend>Examples</legend>
        <div>
            <div class="checkbox">
                <input type="checkbox" id="checkbox-example-2" name="standaard-checkbox">
                <label for="checkbox-example-2">Lorem ipsum dolor sit amet</label>
            </div>
            <span class="nota-bene">Lorem ipsum dolor sit amet.</span>
        </div>
    </fieldset>
</form>