Formulieren

Het perfecte gebruik van formulieren is een onderwerp dat al veel onderzocht is. ROOS heeft relevante research opgenomen in haar componenten voor formulieren. Daarnaast is het van belang dat formulieren op de correct manier worden opgebouwd.

Opbouw

• Gebruik FormLayout om de maximale breedte van het formulier te beperken.
• Groupeer velden in Fieldsets.
• Zorg dat elk veld een duidelijk, kort label erboven heeft.
• Gebruik helper tekst voor aanvullende uitleg/instructies
• Zorg dat de primaire actieknop rechts staat, en de secundaire actieknop links.

Complexe formulieren

• Gebruik voor complexe formulieren met veel velden meerdere stappen.
• Probeer het aantal velden per stap te beperken. Begin met één stap per veld en voeg stappen samen als gebruikersonderzoeken uitwijzen dat dit wenselijk is.
• Geef de gebruiker de mogelijkheid om de voortgang op te slaan wanneer een stap is afgerond.
• Ga terug naar de laatste actieve stap wanneer een gebruiker een formulier tussentijdig afbreekt en daarna terug keert.
• Toon een Progress tracker zodat de gebruiker weet hoeveel stappen er zijn, welke stappen zijn afgerond en welke stap momenteel actief.

Uw gegevens

Voornaam

Achternaam

Opleiding

Naam instelling

Plaats

Voorbeeld HTML

<div class="rvo-form-layout">
  <div class="utrecht-form-fieldset rvo-form-fieldset">
    <fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">
      <legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend">
        Uw gegevens
      </legend>
      <div
        role="group"
        aria-labelledby="fieldId-label"
        class="utrecht-form-field utrecht-form-field--text rvo-form-field"
      >
        <div class="rvo-form-field__label">
          <label class="rvo-label" id="fieldId-label" for="fieldId">
            <div>Voornaam</div>
          </label>
        </div>
        <input
          id="field"
          placeholder=""
          type="text"
          class="utrecht-textbox utrecht-textbox--html-input utrecht-textbox--lg"
          dir="auto"
          value=""
        />
      </div>
      <div
        role="group"
        aria-labelledby="fieldId-label"
        class="utrecht-form-field utrecht-form-field--text rvo-form-field"
      >
        <div class="rvo-form-field__label">
          <label class="rvo-label" id="fieldId-label" for="fieldId">
            <div>Achternaam</div>
          </label>
        </div>
        <input
          id="field"
          placeholder=""
          type="text"
          class="utrecht-textbox utrecht-textbox--html-input utrecht-textbox--lg"
          dir="auto"
          value=""
        />
      </div>
    </fieldset>
  </div>
  <div class="utrecht-form-fieldset rvo-form-fieldset">
    <fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">
      <legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend">
        Opleiding
      </legend>
      <div
        role="group"
        aria-labelledby="fieldId-label"
        class="utrecht-form-field utrecht-form-field--text rvo-form-field"
      >
        <div class="rvo-form-field__label">
          <label class="rvo-label" id="fieldId-label" for="fieldId">
            <div>Naam instelling</div>
          </label>
        </div>
        <input
          id="field"
          placeholder=""
          type="text"
          class="utrecht-textbox utrecht-textbox--html-input utrecht-textbox--lg"
          dir="auto"
          value=""
        />
      </div>
      <div
        role="group"
        aria-labelledby="fieldId-label"
        class="utrecht-form-field utrecht-form-field--text rvo-form-field"
      >
        <div class="rvo-form-field__label">
          <label class="rvo-label" id="fieldId-label" for="fieldId">
            <div>Plaats</div>
          </label>
        </div>
        <input
          id="field"
          placeholder=""
          type="text"
          class="utrecht-textbox utrecht-textbox--html-input utrecht-textbox--lg"
          dir="auto"
          value=""
        />
      </div>
    </fieldset>
  </div>
  <br />
  <p class="utrecht-button-group">
    <button
      class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md"
      type="button"
    >
      Opslaan en sluiten
    </button>
    <button
      class="utrecht-button utrecht-button--primary-action rvo-button-group__align-right utrecht-button--rvo-md"
      type="button"
    >
      Opslaan en verder
    </button>
  </p>
</div>