Basisformulier

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Voeg de gewenste velden toe. Zie onderstaand voorbeeld voor meer informatie. Alle binnen html beschikbare formulierelementen kunnen gebruikt worden. Voor een overzicht van beschikbare voorbeelden binnen Manon zie formulierelementen.
  3. Groepeer de formulierelementen voor toegankelijkheid en gebruikersgemak. Zie Invoervelden groeperen voor meer informatie.
  4. Voeg indien nodig of ten behoeve van gebruikersgemak meldingen, toelichtingen en instructies toe aan het formulier.
  5. Voeg waar nodig validatie toe.

Voorbeelden

Het basisvoorbeeld met een invoerveld en een verzendknop.

Basis

Visueel voorbeeld:

Voorbeeld van een instructietekst

HTML-voorbeeld:

<form action="" method="post">
  <label for="form-example-base">Voorbeeld text input</label>

  <div>
    <span class="nota-bene" id="form-example-base-explanation"
      >Voorbeeld van een instructietekst
    </span>
    <input
      id="form-example-base"
      name="form-example-base"
      type="text"
      aria-describedby="form-example-base-explanation"
    />
  </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-base";

Instelbare variabelen

Bijbehorende elementen: