Hulpteksten

Voor het geven van extra toelichting op een invoerveld.

Benodigde stappen

  1. Voeg de benodigde bestanden toe aan het project.
  2. Voeg de referentie naar het JavaScript bestand toe aan de <head> van de pagina. Voorbeeld: <script defer src="./pad/naar/form-help.min.js"></script>.
  3. Voeg de class help toe aan het formulier.
  4. Groepeer het invoerveld met de bijbehorende hulptekst in een <div>.
  5. Voeg de hulptekst toe onder het invoerveld.

Aandachtspunten

  • Voeg de hulptekst toe onder het invoerveld. Hierdoor verspringt het formulier en de locatie waar de gebruiker interactie mee heeft zo min mogelijk. Hulpteksten die boven het invoerveld staan worden niet ingeklapt.
  • De knop wordt automatisch toegevoegd. Deze hoeft dus niet handmatig in de html opgenomen te worden.
  • Zonder JavaScript wordt de knop niet toegevoegd en wordt hulptekst getoont zonder deze in te klappen. Dit zorgt ervoor dat de hulpteksten ook beschikbaar zijn voor gebruikers zonder JavaScript.

Voorbeelden

Basis

Visueel voorbeeld

Lorem ipsum dolor sit amet.

HTML-Voorbeeld

<form action="" method="post" class="help">
  <label for="voorbeeld-text-input-met-hulptekst-simpel-1">Help op simpel formulierveld</label>
  <div>
    <input
      id="voorbeeld-text-input-met-hulptekst-simpel-1"
      name="voorbeeld-text-input"
      type="text"
      aria-describedby="voorbeeld-text-input-met-hulptekst-simpel-1-message">
    <p
      class="explanation"
      data-open-label="Toelichting bij het veld: Voorbeeld text input"
      data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
      id="voorbeeld-text-input-met-hulptekst-simpel-1-message">
    Lorem ipsum dolor sit amet.</p>
  </div>

  <button type="submit">Verzend</button>
</form>

Verplicht invoerveld

  1. Geef op de <input> aan dat het invoerveld verplicht is met het required attribuut.
  2. Voeg een span toe boven het invoerveld. Het is belangrijk om het bericht boven het invoerveld te plaatsen zodat de volgorde ook klopt voor gebruikers die gebruik maken van hulpmiddelen zoals een screenreader.
  3. Groeppeer de <input> en de <span> samen in een <div> binnen horizontaal uitgelijnde formulieren.
  4. Groepeer het invoerveld en de bijbehorende helptekst binnen een div voor de correcte uitlijning van de helptekstenknop.

Visueel voorbeeld

Dit veld is verplicht

Lorem ipsum dolor sit amet.

<form action="" method="post" class="help">
  <label for="example-input-help-required">Help op simpel formulierveld</label>
  <div>
    <span class="nota-bene">Dit veld is verplicht</span>
    <div>
      <input
        id="example-input-help-required"
        name="voorbeeld-text-input"
        type="text"
        aria-describedby="example-input-help-required-message"
        required>
      <p
        class="explanation"
        data-open-label="Toelichting bij het veld: Voorbeeld text input"
        data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
        id="example-input-help-required-message">
      Lorem ipsum dolor sit amet.</p>
    </div>
  </div>

  <button type="submit">Verzend</button>
</form>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/form-help";

Instelbare variabelen

Bijbehorende elementen: