PricingLoginStart free
HTML Academy · Les

Textarea voor invoer over meerdere regels

Verzamel tekst over meerdere regels met het textarea-element

Les 2 van 413 stappen

Textarea voor invoer over meerdere regels is een gratis HTML Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.

Het element textarea

Het element <textarea> accepteert tekstinvoer over meerdere regels:

<label for="message">Message</label>
<textarea
  id="message"
  name="message"
  rows="5"
  cols="40"
  placeholder="Enter your message here..."
></textarea>
<!-- textarea is NOT a void element -- it has a closing tag -->
<!-- Default content goes between the tags, not in a value attribute -->

Attributen rows en cols

rows en cols bepalen de aanvankelijk zichtbare afmetingen:

<!-- rows: height in lines (default: 2) -->
<!-- cols: width in characters (default: 20) -->
<textarea rows="6" cols="50">...</textarea>

<!-- Better: use CSS for sizing -->
<textarea style="width: 100%; height: 150px; resize: vertical;">

Standaardinhoud instellen

Standaardtekst komt tussen de openings- en sluitingstag:

<textarea name="bio">
Hello! I am a developer who loves HTML.
</textarea>
<!-- Note: whitespace inside textarea IS rendered -->
<!-- The newline after the opening tag will appear in the textarea -->
<!-- Avoid whitespace between tags if you don't want it -->

resize met CSS

Regel het vergroten en verkleinen door de gebruiker met de CSS-eigenschap resize:

textarea {
  resize: vertical;    /* allow only vertical resize */
  /* resize: horizontal -- only horizontal */
  /* resize: both      -- both directions (default) */
  /* resize: none      -- prevent resizing */

  width: 100%;
  min-height: 120px;
  max-height: 400px;
  padding: 0.5rem;
  box-sizing: border-box;
}

Automatisch groeiende textarea

Laat een textarea meegroeien terwijl de gebruiker typt met JavaScript:

<textarea id="auto-grow" rows="3" style="overflow: hidden;"></textarea>

<script>
const ta = document.getElementById('auto-grow');
ta.addEventListener('input', () => {
  ta.style.height = 'auto';
  ta.style.height = ta.scrollHeight + 'px';
});
</script>

maxlength en minlength

Beperk de tekstlengte in een textarea:

<label for="bio">Bio (max 500 characters)</label>
<textarea
  id="bio"
  name="bio"
  maxlength="500"
  minlength="10"
  rows="4"
></textarea>

<!-- Live character count: -->
<small id="char-count">0/500</small>
<script>
document.getElementById('bio').addEventListener('input', function() {
  document.getElementById('char-count').textContent =
    this.value.length + '/500';
});
</script>

Attribuut spellcheck

Het attribuut spellcheck regelt de spellingcontrole:

<!-- Enable (default for textarea) -->
<textarea spellcheck="true">...</textarea>

<!-- Disable (for code editors, technical input) -->
<textarea spellcheck="false">...</textarea>

Attribuut wrap

Het attribuut wrap bepaalt hoe regelafbrekingen worden verzonden:

<!-- wrap="soft" (default): text wraps visually but newlines not added -->
<textarea wrap="soft">...</textarea>

<!-- wrap="hard": newlines inserted at wrap points when submitted -->
<!-- Requires cols to be set -->
<textarea wrap="hard" cols="40">...</textarea>

readonly en disabled

Maak een textarea niet-bewerkbaar:

<!-- readonly: visible, selectable, submitted -->
<textarea readonly>This is read-only text.</textarea>

<!-- disabled: cannot interact, not submitted -->
<textarea disabled>Disabled textarea.</textarea>

Toegankelijkheid van textarea

Aandachtspunten voor toegankelijke textareas:

  • Koppel altijd een <label> met for/id
  • Gebruik aria-describedby om helptekst of tekentellers te koppelen
  • Kondig wijzigingen in de tekenlimiet aan schermlezers aan met livegebieden
<label for="comment">Comment</label>
<textarea id="comment" aria-describedby="comment-hint"></textarea>
<p id="comment-hint">Maximum 200 characters.</p>

Textarea opmaken

Veelgebruikte opmaak voor textareas:

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  font-family: inherit;    /* match surrounding font */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
textarea:focus {
  outline: none;
  border-color: #0070f3;
  box-shadow: 0 0 0 3px rgba(0,112,243,0.2);
}

Korte controle

Hoe stel je vooraf ingevulde tekst in een textarea in?

Beantwoord dit in de interactieve les

Samenvatting: textarea

De belangrijkste punten over textareas:

  • Tekstinvoer over meerdere regels met een sluitingstag
  • Standaardinhoud tussen de openings- en sluitingstag (niet als value-attribuut)
  • rows en cols bepalen de aanvankelijke grootte; gebruik bij voorkeur CSS
  • maxlength en minlength bepalen de lengte
  • resize: vertical in CSS voor gecontroleerd vergroten en verkleinen
  • Automatisch meegroeien: stel height: scrollHeight in bij de input-gebeurtenis
Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
40
Lessen
159
Gratis beginnen met lerenBekijk de volledige cursus

Veelgestelde vragen

Is de les “Textarea voor invoer over meerdere regels” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Textarea voor invoer over meerdere regels”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.

Wat leer ik in “Textarea voor invoer over meerdere regels”?

Verzamel tekst over meerdere regels met het textarea-element Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met HTML Academy te beginnen?

Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Textarea voor invoer over meerdere regels”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over HTML Academy?

Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Select- en option-dropdownmenu's
  2. Textarea voor invoer over meerdere regels
  3. Groepen met selectievakjes en keuzerondjes
  4. Datalist voor automatisch aanvullen
← Terug naar HTML Academy