DSO Component Library

# Voorbeeld

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <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 text">
                <label for="email">E-mailadres:</label>
                <input type="text" 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: text
        label: E-mailadres
      - id: secure
        type: static
        label: Beveiligd
        value: Ja
    submitButton:
      modifier: primary
      label: Verstuur herinnering
      type: submit

`

- Handle: @form-inline
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\02-inline\form-inline.hbs
- References (1): @button

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_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 text"> <label for="email">E-mailadres:</label> <input type="text" 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 text"> <label for="email">E-mailadres:</label> <input type="text" 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 text"> <label for="email">E-mailadres:</label> <input type="text" 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 text"> <label for="email">E-mailadres:</label> <input type="text" 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>`