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 placeholder-tekst.
  • 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

HTML-voorbeeld:

<form action="" method="post">
  <label for="voorbeeld-tekstveld-base">Bericht</label>
  <textarea id="voorbeeld-tekstveld-base" name="voorbeeld-tekstveld-base" placeholder="Jouw vraag of opmerking"></textarea>

  <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
  • form/form-textarea.scss

Optioneel

  • form/form-base-variables.scss
  • form/form-textarea-variables.scss

Instelbare variabelen

Bijbehorende elementen: