Attributen
Dit element bevat de globale attributen.
| Bepaalt of ingevoerde tekst automatisch met een hoofdletter wordt geschreven en, zo ja, op welke manier. | |
|
Bepaalt of ingevoerde tekst automatisch kan worden aangevuld door de browser. Mogelijke waarden zijn:
| |
Bepaalt of automatische spellingcorrectie en tekstverwerking is ingeschakeld terwijl de gebruiker deze textarea bewerkt.
Toegestane waarden zijn:
| |
| Dit booleaanse attribuut laat je opgeven dat een formulierbedieningselement de invoerfocus moet krijgen wanneer de pagina wordt geladen. Slechts één formuliergebonden element in een document mag dit attribuut hebben. | |
De zichtbare breedte van het tekstbedieningselement, in gemiddelde tekenbreedtes. Indien opgegeven, moet het een positief geheel getal zijn. Indien niet opgegeven, is de standaardwaarde 20. | |
Dit attribuut wordt gebruikt om de tekstrichting van de inhoud van het element aan te geven.
Zie voor meer informatie het dirname-attribuut. | |
Dit booleaanse attribuut geeft aan dat de gebruiker niet met het bedieningselement kan interageren. Als dit attribuut niet is opgegeven, erft het bedieningselement de instelling van het omsluitende element, bijvoorbeeld <fieldset>; als er geen omsluitend element is wanneer het disabled-attribuut is ingesteld, is het bedieningselement ingeschakeld. | |
Het formulierelement waarmee het <textarea>-element is geassocieerd (de "formuliereigenaar"). De waarde van het attribuut moet de id zijn van een formulierelement in hetzelfde document. Als dit attribuut niet is opgegeven, moet het <textarea>-element een afstammeling zijn van een formulierelement. Met dit attribuut kun je <textarea>-elementen overal in een document plaatsen, niet alleen als afstammelingen van formulierelementen. | |
| De maximale tekenreekslengte (gemeten in UTF-16-code-eenheden) die de gebruiker kan invoeren. Als deze waarde niet is opgegeven, kan de gebruiker een onbeperkt aantal tekens invoeren. | |
| De minimale tekenreekslengte (gemeten in UTF-16-code-eenheden) die de gebruiker moet invoeren. | |
| De naam van het bedieningselement. | |
|
Een hint voor de gebruiker over wat er in het bedieningselement kan worden ingevoerd. Regelterugloop- of regeleinde-tekens binnen de placeholdertekst moeten als regeleinden worden behandeld bij het weergeven van de hint. Opmerking
Placeholders mogen alleen worden gebruikt om een voorbeeld te tonen van het type gegevens dat in een formulier moet worden ingevoerd; ze zijn geen vervanging voor een correct | |
Dit booleaanse attribuut geeft aan dat de gebruiker de waarde van het bedieningselement niet kan wijzigen. In tegenstelling tot het disabled-attribuut voorkomt het readonly-attribuut niet dat de gebruiker in het bedieningselement kan klikken of selecteren. De waarde van een alleen-lezen bedieningselement wordt nog steeds met het formulier verzonden. | |
| Dit attribuut geeft aan dat de gebruiker een waarde moet invullen voordat het formulier wordt verzonden. | |
| Het aantal zichtbare tekstregels voor het bedieningselement. Indien opgegeven, moet het een positief geheel getal zijn. Indien niet opgegeven, is de standaardwaarde 2. | |
Geeft aan of de <textarea> onderworpen is aan spellingcontrole door de onderliggende browser/OS. De waarde kan zijn:
| |
|
Geeft aan hoe het bedieningselement de waarde moet afbreken bij het verzenden van het formulier. Mogelijke waarden zijn:
Als dit attribuut niet is opgegeven, is |
Stylen met CSS
<textarea> is een vervangen element — het heeft intrinsieke afmetingen, zoals een rasterafbeelding. Standaard is de display-waarde inline-block. Vergeleken met andere formulierelementen is het relatief eenvoudig te stylen, waarbij het boxmodel, lettertypen, kleurenschema, enz. eenvoudig te manipuleren zijn met reguliere CSS.
HTML-formulieren stylen biedt enkele nuttige tips voor het stylen van <textarea>'s.
Inconsistentie in de basislijn
De HTML-specificatie definieert niet waar de basislijn van een <textarea> zich bevindt, dus verschillende browsers stellen deze op verschillende posities in. Voor Gecko wordt de basislijn van de <textarea> ingesteld op de basislijn van de eerste regel van de textarea; in een andere browser kan deze onderaan het <textarea>-vak worden ingesteld. Gebruik er geen vertical-align: baseline op; het gedrag is onvoorspelbaar.
Bepalen of een textarea vergroot/verkleind kan worden
In de meeste browsers zijn <textarea>'s vergroot/verkleinbaar — je zult de sleepgreep in de rechterbenedenhoek opmerken, die kan worden gebruikt om de grootte van het element op de pagina aan te passen. Dit wordt bepaald door de resize-CSS-eigenschap — het vergroten/verkleinen is standaard ingeschakeld, maar je kunt het expliciet uitschakelen met een resize-waarde van none:
textarea {
resize: none;
}Geldige en ongeldige waarden stylen
Geldige en ongeldige waarden van een <textarea>-element (bijvoorbeeld waarden binnen en buiten de grenzen die zijn ingesteld door minlength, maxlength of required) kunnen worden gemarkeerd met de pseudo-klassen :valid en :invalid. Bijvoorbeeld, om je textarea een andere rand te geven afhankelijk van of deze geldig of ongeldig is:
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}Voorbeelden
Basisvoorbeeld
Het volgende voorbeeld toont een textarea met een vastgesteld aantal rijen en kolommen, wat standaardinhoud, en CSS-stijlen die voorkomen dat gebruikers het element groter maken dan 500px breed en 130px hoog:
<textarea name="textarea" rows="5" cols="15">Write something here</textarea>textarea {
max-height: 130px;
max-width: 500px;
}Resultaat
Voorbeeld met "minlength" en "maxlength"
Dit voorbeeld heeft een minimum en maximum aantal tekens — respectievelijk 10 en 20. Probeer het en zie zelf.
<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">
Write something here…
</textarea>textarea {
max-height: 130px;
max-width: 500px;
}Resultaat
Merk op dat minlength de gebruiker niet verhindert tekens te verwijderen zodat het ingevoerde aantal onder het minimum komt, maar dat de waarde die in de <textarea> is ingevoerd hierdoor wel ongeldig wordt. Merk ook op dat, zelfs als je een minlength-waarde hebt ingesteld (bijvoorbeeld 3), een lege <textarea> nog steeds als geldig wordt beschouwd, tenzij je ook het required-attribuut hebt ingesteld.
Voorbeeld met "placeholder"
Dit voorbeeld heeft een placeholder ingesteld. Let op hoe deze verdwijnt zodra je begint te typen in het vak.
<textarea
name="textarea"
rows="5"
cols="30"
placeholder="Comment text."></textarea>textarea {
max-height: 130px;
max-width: 500px;
}Resultaat
Placeholders mogen alleen worden gebruikt om een voorbeeld te tonen van het type gegevens dat in een formulier moet worden ingevoerd; ze zijn geen vervanging voor een correct <label>-element dat aan de invoer is gekoppeld. Zie <input>-labels voor een volledige uitleg.
Uitgeschakelde en alleen-lezen tekstvelden
Dit voorbeeld toont twee <textarea>'s — één is readonly en één is disabled.
Je kunt de inhoud van geen van beide elementen bewerken, maar het readonly-element is focusbaar en de waarde ervan wordt verzonden bij formulieren.
De waarde van het disabled-element wordt niet verzonden en het is niet focusbaar.
<textarea name="textarea" rows="5" cols="30" readonly>
I am a read-only textarea.
</textarea>
<textarea name="textarea" rows="5" cols="30" disabled>
I am a disabled textarea.
</textarea>textarea {
display: block;
resize: horizontal;
max-width: 500px;
}Resultaat
Technische samenvatting
| Content categories | Flow content, phrasing content, Interactive content, listed, labelable, en resettable, en submittable form-associated element. |
|---|---|
| Permitted content | Text |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role |
textbox
|
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLTextAreaElement |