Tekstveld - textarea

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 <textarea> toe. Zie onderstaand voorbeeld voor meer informatie.

Aandachtspunten:

  • Zorg er voor gebruiksvriendelijkheid voor dat het tekstveld een duidelijke vraag en/of duidelijk doel heeft. Voeg een omschrijvend <label> toe en stel een vraag of geef duidelijke richtlijnen mee door middel van een nota-bene.
  • rows="number" geeft de initiële hoogte van het tekstveld aan in de hoeveelheid regels. Als er een langer bericht verwacht of aangemoedigd wordt is het voor de gebruiker fijn om een hoger initieel tekstveld te hebben.

Voorbeelden

Visueel voorbeeld:

Basis

Stel jouw vraag of voeg jouw opmerking toe

HTML-voorbeeld:

<form action="" method="post">
  <label for="voorbeeld-tekstveld-base">Bericht</label>
  <span class="nota-bene" id="voorbeeld-tekstveld-base-explanation">
    Stel jouw vraag of voeg jouw opmerking toe:
  </span>
  <textarea
    id="voorbeeld-tekstveld-base"
    name="voorbeeld-tekstveld-base"
    rows="5"
    aria-describedby="voorbeeld-tekstveld-base-explanation">
  </textarea>

  <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";
@use "@minvws/manon/form-textarea";

Instelbare variabelen

Bijbehorende elementen: