Skip to content

Commit

Permalink
Updated form base test
Browse files Browse the repository at this point in the history
  • Loading branch information
@HeleenSG
HeleenSG committed Aug 15, 2023
1 parent 3c03468 commit 0aab98e
Showing 1 changed file with 112 additions and 93 deletions.
205 changes: 112 additions & 93 deletions docs/documentation/components/form-base-test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2383,124 +2383,143 @@ <h3>Lorem ipsum dolor set amet</h3>
ipsum dolor set amet</p>
</div>

<label for="help-simpel-voorbeeld-text-input-explanation-1">Voorbeeld invoerveld met
reguliere toelichting</label>
<div>
<p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<input id="help-simpel-voorbeeld-text-input-explanation-1" class="explanation"
name="help-simpel-voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting"
type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-1-message">
<div class="notification">
<label for="help-simpel-voorbeeld-text-input-explanation-1">Voorbeeld invoerveld met
reguliere toelichting</label>
<div>
<p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<input id="help-simpel-voorbeeld-text-input-explanation-1" class="explanation"
name="help-simpel-voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting"
type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-1-message">
</div>
</div>

<label for="help-simpel-voorbeeld-text-input-warning-1">Voorbeeld invoerveld
waarschuwing</label>
<div>
<p class="warning" id="help-simpel-voorbeeld-text-input-warning-1-message">
<span>Waarschuwing:</span> Lorem ipsum dolor set amet
</p>
<input id="help-simpel-voorbeeld-text-input-warning-1" class="warning"
name="help-simpel-voorbeeld-text-input-warning-1" placeholder="Voorbeeld invoerveld waarschuwing"
type="text" aria-describedby="help-simpel-voorbeeld-text-input-warning-1-message">
<div class="notification">
<label for="help-simpel-voorbeeld-text-input-warning-1">Voorbeeld invoerveld
waarschuwing</label>
<div>
<p class="warning" id="help-simpel-voorbeeld-text-input-warning-1-message">
<span>Waarschuwing:</span> Lorem ipsum dolor set amet
</p>
<input id="help-simpel-voorbeeld-text-input-warning-1" class="warning"
name="help-simpel-voorbeeld-text-input-warning-1" placeholder="Voorbeeld invoerveld waarschuwing"
type="text" aria-describedby="help-simpel-voorbeeld-text-input-warning-1-message">
</div>
</div>

<label for="help-simpel-voorbeeld-tekstveld-2">Voorbeeld tekstveld met reguliere
toelichting</label>
<div>
<p class="explanation" id="help-simpel-voorbeeld-tekstveld-2-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<textarea id="help-simpel-voorbeeld-tekstveld-2" name="help-simpel-voorbeeld-tekstveld-2"
placeholder="Jouw vraag of opmerking" rows="5"
aria-describedby="help-simpel-voorbeeld-tekstveld-2-message"></textarea>
<div class="notification">
<label for="help-simpel-voorbeeld-tekstveld-2">Voorbeeld tekstveld met reguliere
toelichting</label>
<div>
<p class="explanation" id="help-simpel-voorbeeld-tekstveld-2-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<textarea id="help-simpel-voorbeeld-tekstveld-2" name="help-simpel-voorbeeld-tekstveld-2"
placeholder="Jouw vraag of opmerking" rows="5"
aria-describedby="help-simpel-voorbeeld-tekstveld-2-message"></textarea>
</div>
</div>

<label for="help-simpel-voorbeeld-text-input-collapsed-explanation-1">Voorbeeld invoerveld
met ingeklapte toelichting</label>
<div>
<input id="help-simpel-voorbeeld-text-input-collapsed-explanation-1" class="explanation"
name="help-simpel-voorbeeld-text-input-collapsed-explanation-1"
placeholder="Voorbeeld invoerveld toelichting" type="text">
<p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
data-close-label="Sluit toelichting bij het veld: Voorbeeld text input">Lorem ipsum dolor set amet.</p>
<div class="notification">
<label for="help-simpel-voorbeeld-text-input-collapsed-explanation-1">Voorbeeld invoerveld
met ingeklapte toelichting</label>
<div>
<input id="help-simpel-voorbeeld-text-input-collapsed-explanation-1" class="explanation"
name="help-simpel-voorbeeld-text-input-collapsed-explanation-1"
placeholder="Voorbeeld invoerveld toelichting" type="text">
<p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
data-close-label="Sluit toelichting bij het veld: Voorbeeld text input">Lorem ipsum dolor set amet.</p>
</div>
</div>

<label for="help-simpel-voorbeeld-tekstveld-3">Voorbeeld tekstveld met reguliere
toelichting</label>
<div>
<textarea id="help-simpel-voorbeeld-tekstveld-3" name="help-simpel-voorbeeld-tekstveld-3"
placeholder="Jouw vraag of opmerking" rows="5"
aria-describedby="help-simpel-voorbeeld-tekstveld-3-message"></textarea>
<p class="explanation" id="help-simpel-voorbeeld-tekstveld-3-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<div class="notification">
<label for="help-simpel-voorbeeld-tekstveld-3">Voorbeeld tekstveld met reguliere
toelichting</label>
<div>
<textarea id="help-simpel-voorbeeld-tekstveld-3" name="help-simpel-voorbeeld-tekstveld-3"
placeholder="Jouw vraag of opmerking" rows="5"
aria-describedby="help-simpel-voorbeeld-tekstveld-3-message"></textarea>
<p class="explanation" id="help-simpel-voorbeeld-tekstveld-3-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
</div>
</div>

<label for="select-with-explanation-3">Voorbeeld select met reguliere toelichting</label>
<div>
<p class="explanation" id="select-with-explanation-3-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<select id="select-with-explanation-3" name="select-with-explanation-3"
aria-describedby="select-with-explanation-3-message">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
<option value="3">Optie 3</option>
</select>
<div class="notification">
<label for="select-with-explanation-3">Voorbeeld select met reguliere toelichting</label>
<div>
<p class="explanation" id="select-with-explanation-3-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<select id="select-with-explanation-3" name="select-with-explanation-3"
aria-describedby="select-with-explanation-3-message">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
<option value="3">Optie 3</option>
</select>
</div>
</div>

<label for="select-with-collapsed-explanation-1">Voorbeeld select met ingeklapte
toelichting</label>
<div>
<select id="select-with-collapsed-explanation-1" name="select-with-collapsed-explanation-1"
aria-describedby="select-with-collapsed-explanation-1-message">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
<option value="3">Optie 3</option>
</select>
<p class="explanation" id="select-with-collapsed-explanation-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<div class="notification">
<label for="select-with-collapsed-explanation-1">Voorbeeld select met ingeklapte
toelichting</label>
<div>
<select id="select-with-collapsed-explanation-1" name="select-with-collapsed-explanation-1"
aria-describedby="select-with-collapsed-explanation-1-message">
<option value="1">Optie 1</option>
<option value="2">Optie 2</option>
<option value="3">Optie 3</option>
</select>
<p class="explanation" id="select-with-collapsed-explanation-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
</div>
</div>


<fieldset class="grouped-choice-list">
<legend>Radio-selectielijst met reguliere toelichting</legend>
<p class="explanation" id="help-radio-list-item-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<div>
<div class="radio">
<input type="radio" id="help-radio-list-item-1" name="radio-option-1" value="value 1"
aria-describedby="help-radio-list-item-1-message">
<label for="help-radio-list-item-1">Optie 1</label>
</div>
<div class="radio">
<input type="radio" id="help-radio-list-item-2" name="radio-option-2" value="value 2"
aria-describedby="help-radio-list-item-1-message">
<label for="help-radio-list-item-2">Optie 2</label>
<div class="notification">
<p class="explanation" id="help-radio-list-item-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
<div>
<div class="radio">
<input type="radio" id="help-radio-list-item-1" name="radio-option-1" value="value 1"
aria-describedby="help-radio-list-item-1-message">
<label for="help-radio-list-item-1">Optie 1</label>
</div>
<div class="radio">
<input type="radio" id="help-radio-list-item-2" name="radio-option-2" value="value 2"
aria-describedby="help-radio-list-item-1-message">
<label for="help-radio-list-item-2">Optie 2</label>
</div>
</div>
</div>
</fieldset>


<fieldset class="grouped-choice-list">
<legend>Radio-selectielijst met ingeklapte toelichting</legend>
<div>
<div class="radio">
<input type="radio" id="help-collapsed-radio-list-item-1" name="radio-option-1" value="value 1"
aria-describedby="help-collapsed-radio-list-item-1-message">
<label for="help-collapsed-radio-list-item-1">Optie 1</label>
</div>
<div class="radio">
<input type="radio" id="help-collapsed-radio-list-item-2" name="radio-option-2" value="value 2"
aria-describedby="help-collapsed-radio-list-item-1-message">
<label for="help-collapsed-radio-list-item-2">Optie 2</label>
<div class="notification">
<div>
<div class="radio">
<input type="radio" id="help-collapsed-radio-list-item-1" name="radio-option-1" value="value 1"
aria-describedby="help-collapsed-radio-list-item-1-message">
<label for="help-collapsed-radio-list-item-1">Optie 1</label>
</div>
<div class="radio">
<input type="radio" id="help-collapsed-radio-list-item-2" name="radio-option-2" value="value 2"
aria-describedby="help-collapsed-radio-list-item-1-message">
<label for="help-collapsed-radio-list-item-2">Optie 2</label>
</div>
</div>
<p class="explanation" id="help-collapsed-radio-list-item-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
</div>
<p class="explanation" id="help-collapsed-radio-list-item-1-message">
<span>Toelichting:</span> Lorem ipsum dolor set amet.
</p>
</fieldset>

<fieldset>
Expand Down

0 comments on commit 0aab98e

Please sign in to comment.