HTML5 Textarea Attributen: Hier is wat u moet weten

admin

Waarvoor wordt <textarea> gebruikt?

De meeste HTML-formulieren bestaan uit een bovenliggend formulierelement, een handvol invoerelementen (waarvan er ten minste één van het type submit is), en een of meer tekstvelden. Als je formuliervelden nodig hebt om e-mailadressen, telefoonnummers en andere eenvoudig te definiëren inhoud te accepteren, gebruik je het juiste invoertype. Als je echter een veld nodig hebt dat elke combinatie en lengte van platte tekst letters, cijfers en symbolen kan accepteren, dan is <textarea> het element dat je zoekt.

HTML5 Textarea Attributen

HTML5 heeft een paar nieuwe attributen geïntroduceerd die kunnen worden gebruikt met textarea elementen. Hier zijn enkele van de belangrijkste:

  • form: Associeert de textarea met een formulier. Gebruik het ID-attribuut van het formulier als de waarde voor de textarea-formulierattributen. Hierdoor kun je een textarea overal op een webpagina plaatsen, zelfs buiten het formulier-element, en toch wordt de inhoud van de textarea opgenomen als het formulier wordt verzonden.
  • maxlength en minlength: Worden gebruikt om een minimum- of maximumaantal tekens op te geven dat in een tekstveld mag worden ingevoerd.
  • placeholder: Voegt placeholder-tekst toe aan het tekstgebied die verdwijnt zodra een gebruiker de cursor in het element plaatst.
  • required: Vereist dat de textarea inhoud bevat voordat het formulier kan worden ingediend.
  • wrap: Geeft aan of er al dan niet hard-returns moeten worden toegevoegd aan de inhoud die in een textarea wordt ingediend.

Attributen in actie

Hier volgt een voorbeeld van hoe sommige van deze nieuwe attributen kunnen worden gebruikt om het gedrag van een textarea te regelen.

<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea>

If we pair those textarea elements with a simple script and button element, we get the following form:

Adam is a technical writer who specializes in developer documentation and tutorials.