DSO Component Library

Voorbeeld 

<form class="form-inline">
    <fieldset class="form-fields">
        <legend class="sr-only">Inline formulier</legend>
        <div class="form-group input text">
            <label for="naam">Naam:</label>
            <input type="text" id="naam" class="form-control" />
        </div>
        <div class="form-group input email">
            <label for="email">E-mailadres:</label>
            <input type="email" id="email" class="form-control" />
        </div>
        <div class="form-group static">
            <label>Beveiligd</label>
            <p class="form-control-static">Ja</p>
        </div>
    </fieldset>
    <div class="form-buttons">
        <button type="submit" class="btn btn-primary">
    Verstuur herinnering
</button>

    </div>
</form>
 
<form class="form-inline">
  <fieldset class="form-fields">
    <legend class="sr-only">Inline formulier</legend>
    {{#each groups }}
      {{> (concat '@inline-group-' type) }}
    {{/each}}
  </fieldset>
  <div class="form-buttons">
    {{render '@button' submitButton merge=true }}
  </div>
</form>
 
groups:
  - id: naam
    type: input
    inputType: text
    label: Naam
  - id: email
    type: input
    inputType: email
    label: E-mailadres
  - id: secure
    type: static
    label: Beveiligd
    value: Ja
submitButton:
  modifier: primary
  label: Verstuur herinnering
  type: submit

Een inline formulier is een verticaal formulier met een .form-inline op de form.

Alle onderdelen van een inline formulier staan in een fieldset. Eventueel kan de legend verborgen worden met .sr-only.

Om het formulier nog compacter te maken, is het mogelijk het label te verbergen met .sr-only. Als het label element ongewenst is, is een alternatief @aria-label of @title op de input

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H44.NonExistentFragment

This label's "for" attribute contains an ID that does not exist in the document fragment.

<label>Beveiligd</label>

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<legend class="sr-only">Inline formulier</legend>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Default

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="text" id="naam" class="form-control">

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form class="form-inline"> <fieldset class="form-fields"> <legend class="sr-only">Inline formulier</legend> <div class="form-group input text"> <label for="naam">Naam:</label> <input type="text" id="naam" class="form-control"> </div> <div class="form-group input email"> <label for="email">E-mailadres:</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group static"> <label>Beveiligd</label> <p class="form-control-static">Ja</p> </div> </fieldset> <div class="form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur herinnering </button> </div> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form class="form-inline"> <fieldset class="form-fields"> <legend class="sr-only">Inline formulier</legend> <div class="form-group input text"> <label for="naam">Naam:</label> <input type="text" id="naam" class="form-control"> </div> <div class="form-group input email"> <label for="email">E-mailadres:</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group static"> <label>Beveiligd</label> <p class="form-control-static">Ja</p> </div> </fieldset> <div class="form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur herinnering </button> </div> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form class="form-inline"> <fieldset class="form-fields"> <legend class="sr-only">Inline formulier</legend> <div class="form-group input text"> <label for="naam">Naam:</label> <input type="text" id="naam" class="form-control"> </div> <div class="form-group input email"> <label for="email">E-mailadres:</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group static"> <label>Beveiligd</label> <p class="form-control-static">Ja</p> </div> </fieldset> <div class="form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur herinnering </button> </div> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form class="form-inline"> <fieldset class="form-fields"> <legend class="sr-only">Inline formulier</legend> <div class="form-group input text"> <label for="naam">Naam:</label> <input type="text" id="naam" class="form-control"> </div> <div class="form-group input email"> <label for="email">E-mailadres:</label> <input type="email" id="email" class="form-control"> </div> <div class="form-group static"> <label>Beveiligd</label> <p class="form-control-static">Ja</p> </div> </fieldset> <div class="form-buttons"> <button type="submit" class="btn btn-primary"> Verstuur herinnering </button> </div> </form>