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:

HTML-voorbeeld:

<form action="" method="post">
  <label for="form-example-base">Voorbeeld text input</label>
  <input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text">

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

Bijbehorende bestanden

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

Benodigd

  • form/form-base.scss

Optioneel

  • form/form-base-variables.scss

Instelbare variabelen

Bijbehorende elementen: