Tekst-invoer

In formulieren vind je vaak mogelijkheden om regels tekst in te voeren. Soms gaat dat in invoer-vensters die uit één regel bestaan, soms heb je een venster met meerdere regels en een schuifbalk tot je beschikking.

Hier vind je een beschrijving hoe je dit kunt aanpakken.

• Er worden twee items besproken:
  1. Tekst-velden voor één regel tekst.
  2. Tekst-velden voor meerdere regels tekst.

Gegevens ophalen uit een tekst-veld van één regel

Een éénregelig tekst-veld maak je met de tag <input type="text">. Het is doorgaans onderdeel van een formulier. Een eenvoudig voorbeeld is de volgende code:

<form name="Demo_1">
Type hier wat ==>
<input type="text" name="Voorbeeld_1" value="Letters, cijfers, enz."
size="20">
<input type="button" name="DoeHet" value="Tonen"
onClick="DemoActie_1()">
</form>

Het invoerveld is op de pagina gecentreerd door de <form>-tag in te sluiten in de tag <div align="center">. Merk op dat de <form>-tag geen action= en method= attributen heeft. Die zijn voor een "lokaal" formulier niet nodig.

Als je op de knop "Tonen" drukt, wordt een JavaScript-function met de naam DemoAction_1() aangeroepen. Het enige wat die function doet is een alert op het scherm zetten:

<script>
function DemoActie_1() {
  window.alert('Ingetypte tekst is:
  '+document.Demo_1.Voorbeeld_1.value);
}
</script>

De alert geeft de string weer: Naam van de <form>.Naam van de <input>.value. In dit geval is dat document.Demo_1.Voorbeeld_1.value. Hiermee heb je de inhoud van het tekstveld tot je beschikking en kun er mee aan de slag.
Hieronder kun je het uitproberen.

Een paar van de meest gebruikte attributen van de <input>-tag zijn:

type=text	Hiermee zeg je dat het om een één-regelig tekstveld gaat (Noodzakelijk).
size=	Hiermee geef je de grootte van het veld aan op het scherm (Noodzakelijk).
maxlength=	Hiermee geef je de het maximale aantal karakters aan wat het veld kan opnemen (Mag evt. worden weggelaten).
name=	Unieke naam binnen de HTML-file (Noodzakelijk, anders kun je er niets mee doen). Hiervoor kan ook id worden ingezet. name mag dan worden weggelaten.
value=	Dit is de tekst die in het veld wordt geplaatst bij het openen van de pagina, of na een druk op een RESET-button (Mag worden weggelaten).
class=	Dit verwijst naar een class in een CSS-stylesheet. Dit gebruik je om bijvoorbeeld het lettertype en/of de kleur van de letters in het tekstveld te veranderen (Mag worden weggelaten).
id=	Unieke naam binnen de HTML-file (Noodzakelijk, anders kun je er niets mee doen). Voor het wijzigen van value (de inhoud van het tekst-veld) kan ook name worden ingezet. Dan kan id worden weggelaten. Verder kan dit op dezelfde manier worden gebruikt als class. Overigens heeft id de voorkeur. Met de function document.getElementById() hoef je je niet druk te maken over de plaats binnen de structuur van het document; dat zoekt getElementById() voor je uit. Als je name gebruikt heb je dat probleem wel.

Als de gevraagde invoer uit getallen bestaat zul je de opgehaalde string vaak moeten omzetten naar een object van het type Number. In het item Werken met getallen wordt uitgelegd hoe je dat aanpakt.

Je kunt een tekst-veld ook gebruiken om resultaten in weer te geven, bijvoorbeeld van een berekening. Het kan daarbij ongewenst zijn dat de gebruiker de inhoud van dat veld verandert. Dat bereik je door het attribuut readonly toe te voegen aan de <input>-tag.

De HTML-code ziet er nu als volgt uit (het attribuut value mag eventueel worden weggelaten):

<input type="text" name="Voorbeeld_1" size="20" readonly>

Je zet de gegevens in het tekstveld met de JavaScript-opdracht:

document.Demo_1.Voorbeeld_1.value = Resultaat;

In plaats van readonly kun je ook disabled gebruiken. In het laatste geval wordt het veld grijs gemaakt.

Gegevens ophalen uit een tekst-veld van meerdere regels

Hier onder zie je de code die gebruikt is voor het onderstaande meer-regelige tekst-veld. Het ding is hier voorzien van een button "Overnieuw." De JavaScript functie DemoActie_2() wordt aangeroepen als je op de knop "Tonen" drukt. De code van deze functie is gelijk aan die van de hierboven genoemde function DemoActie_1(), met dat verschil dat de object-namen zijn veranderd.

<form name="Demo_2">
<textarea cols="25" rows="7" name="Voorbeeld_2">Type hier je
tekst</textarea><br>
<input type="button" name="DoeHet" value="Tonen"
onClick="DemoActie_2()">
<input type="reset" name="NietDoen" value="Overnieuw">
</form>

Het invoerveld is op de pagina gecentreerd door de <form>-tag in te sluiten in de tag <div align="center">. Merk op dat de <form>-tag geen action= en method= attributen heeft. Die zijn voor een "lokaal" formulier niet nodig.

Een paar van de meest gebruikte attributen van de <textarea>-tag zijn:

rows=	Aantal regels bij gebruik van het (standaard-) vaste letterteken font van de browser (meestal Courier New) (Noodzakelijk).
cols=	Aantal kolommen bij gebruik van het (standaard-) vaste letterteken font van de browser (meestal Courier New) (Noodzakelijk).
name=	Unieke naam binnen de HTML-file (Noodzakelijk, anders kun je er niets mee doen). Hiervoor kan ook id worden ingezet. name mag dan worden weggelaten.
value=	Dit is de tekst die in het veld wordt geplaatst bij het openen van de pagina, of na een druk op een RESET-button (Mag worden weggelaten).
class=	Dit verwijst naar een class in een CSS-stylesheet. Dit gebruik je om bijvoorbeeld het lettertype en/of de kleur van de letters in het tekstveld te veranderen (Mag worden weggelaten).
id=	Unieke naam binnen de HTML-file (Noodzakelijk, anders kun je er niets mee doen). Voor het wijzigen van value (de inhoud van het tekst-veld) kan ook name worden ingezet. Dan kan id worden weggelaten. Verder kan dit op dezelfde manier worden gebruikt als class. Overigens heeft id de voorkeur. Met de function document.getElementById() hoef je je niet druk te maken over de plaats binnen de structuur van het document; dat zoekt getElementById() voor je uit. Als je name gebruikt heb je dat probleem wel.
wrap=	Regelafbreekmethode (Mag worden weggelaten). Het keyword achter wrap= kan zijn: off : Regels worden niet afgebroken op het scherm en worden niet-afgebroken verstuurd. soft: Regels worden op het scherm afgebroken. De regels worden niet-afgebroken verstuurd. Dit is wat Internet Explorer doet als je dit attribuut niet opgeeft. hard: Regels worden op het scherm afgebroken. De regels worden afgebroken verstuurd, zoals op het scherm wordt getoond.

Je kunt een meer-regelig tekst-veld ook gebruiken om resultaten in weer te geven. Het kan daarbij ongewenst zijn dat de gebruiker de inhoud van dat veld verandert. Dat bereik je door het attribuut readonly toe te voegen aan de <textarea>-tag.
Het gedrag en het gebruik van het readonly attribuut is hetzelfde als bij <input type="text">.
Ook hier kun je disabled gebruiken in plaats van readonly.

Opmerking:
 
Bij de tag <input type="text"> kun je type="text" vervangen door type="password". Alle in het veld getypte karakters verschijnen nu als sterretjes of als dikke stippen. Dit gebruik je als je data in wilt voeren die niet iedereen hoeft te zien, zoals een wachtwoord.