Invoerveld

Invoervelden worden gebruikt voor het vragen van korte informatie.

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.

Aandachtspunten

  • Voeg de volledige code toe die in de voorbeelden staat om alle gebruikers een goede gebruikerservaring the bieden. Denk hierbij aan gebruikers die kleurenblind zijn of gebruikers die gebruik maken van hulptechnologiën.

Voorbeelden

Basis

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="example-input-base">Voorbeeld invoerveld</label>
  <input
    id="example-input-base"
    name="example-input-base"
    type="text"
  />
  <button type="submit">Verzend</button>
</form>

Verplicht invoerveld

Aandachtspunten:

  • Geef op de <input> aan dat het invoerveld verplicht is met het required attribuut.
  • 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.
  • Groeppeer de <input> en de <span> samen in een <div> binnen horizontaal uitgelijnde formulieren.

Visueel voorbeeld:

Dit veld is verplicht

HTML-voorbeeld:

<form action="" method="post">
  <label for="example-input-required">Gebruikersnaam</label>
  <span class="nota-bene">Dit veld is verplicht</span>
  <input
    id="example-input-required"
    name="example-input-required"
    type="text"
    required
  />
  <button type="submit">Verzend</button>
</form>

Invoerveld uitgeschakeld

Aandachtspunten:

  • Geef op de <input> aan dat het invoerveld uitgeschakeld is met het disabled attribuut.

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <label for="example-input-disabled">Gebruikersnaam</label>
  <input
    id="example-input-disabled"
    name="example-input-disabled"
    type="text"
    disabled
  />
  <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-input";

Instelbare variabelen