Internetformulieren – tekstvelden

Eerder heb ik toegelicht hoe een internetformulier werkt. In dit artikel meer over twee soorten velden die zichtbare teksten kunnen verwerken. Het input veld (type text) en de textarea. Onderdelen van formulieren worden controls genoemd. Hoe werken ze en wanneer gebruik je ze?

Input veld – type = text
Een input veld voor korte teksten is het input type=text veld. Denk hierbij aan velden voor voornaam, achternaam, e-mail etc. Voor wachtwoorden gebruik je een ander veld, het input type="password". Je maakt het input type=text veld als volgt:

Het effect hiervan is:

Voornaam

1) Zoals je kunt zien zet ik de uitleg van het veld ervoor in het label element.
2) Door het input element als type 'text' mee te geven geef je aan er teksten in ingevuld kunnen worden.
3) Het name attribuut heb je nodig het element een unieke naam te geven.
4) Met het value attribuut kan je al een waarde meegeven. Normaal gesproken laat je dit leeg, tenzij je de waarde al weet.
5) Met size geef je de zichtbare lengte van het veld op.
6) En met maxlength bepaal je hoeveel tekens er maximaal in het veld ingevuld kunnen worden.

In de begintijd van internetformulieren zag je vaak teksten in deze elementen als 'Type hier uw naam'. Dat hoeft tegenwoordig niet meer.
De weergave van het element kan je met CSS aanpassen. Met behulp van Javascript kan je ook beinvloeden wat je bezoekers wel of niet kunnen invullen. Hierop zal ik in een ander artikel nader ingaan.

Textarea
Een textarea is bedoeld voor langere teksten. Bijvoorbeeld voor extra opmerkingen in een formulier. Je maakt het op de volgende manier:

Het effect hiervan is:

OpmerkingenType hier uw opmerkingen

1) Met het name attribuut geef je de unieke naam van het veld aan.
2) Met het cols attribuut bepaal je de breedte (50 tekens).
3) Met het rows attribuut de hoogte (10 rijen).
4) De waarde van het veld zet je tussen de begin- en eind-tag. Let op: als je de waarde op een nieuwe regel begint, dan zie je een lege regel in het textarea veld.
5) Het standaardlettertype is courier.
6) Het maximaal aantal tekens kan je niet instellen.

Ook hier kan je de vormgeving weer regelen met CSS en met Javascript meer controle afdwingen.

Plaats van de elementen in het formulier
Plaats je tekstvelden tussen de begin- en eind-tag van je formulier. Zo maak je de elementen onderdeel van het formulier dat verstuurd wordt.