HTML Tekstvelden

Tekstvelden zijn kleine rechthoekige vensters die klaar staan om informatie van gebruikers te ontvangen. Gebruikers zullen merken dat wanneer ze met de muisaanwijzer over deze velden bewegen dat de cursor verandert van een pijl naar een karakter (|). Dit betekent dat de gebruiker een beperkte hoeveelheid tekst op één regel kan invoeren. De standaard breedte van een tekstveld is ongeveer 20 tekens maar er mag meer tekst ingevoerd worden dan past in het tekstveld. De tekst scrollt aan het eind van het tekstveld automatisch door.

Een tekstveld wordt op een webpagina geplaatst met behulp van het <input> element.

<input type="text">

Door het "type" attribuut de waarde "text" te geven, bepaal je dat het om een tekstveld gaat.

Voorbeeld:

<p>Naam: <input type="text"></p>
<p>Email: <input type="text"></p>

Uitproberen

Breedte van een veld

Je kunt het attribuut size gebruiken om te bepalen hoe breed het veld op het scherm moet worden weergegeven.

Voorbeeld:

<p>Naam: <input type="text" size="30"></p>
<p>Email: <input type="text" size="30"></p>

Uitproberen CSS

Maximaal aantal tekens

Met het attribuut maxlength wordt het maximaal aantal tekens dat ingevoerd kan worden ingesteld.

Voorbeeld:

<p>Naam: <input type="text" maxlength="15"></p>
<p>Email: <input type="text" maxlength="15"></p>

Uitproberen

Voorbeeld van tekstvelden

In het volgende voorbeeld zijn de attributen type, name, size en maxlength toegevoegd aan het input element. Het name attribuut kent een naam toe aan het invoerveld. Name wordt gebruikt om de inhoud van een veld die naar een programma (script) op de server wordt gestuurd te identificeren.

Voorbeeld:

<p><b>Voer uw gegevens in:</b></p>
<table>
  <tr>
    <td>Voornaam:</td>
    <td><input type="text" name="vnaam" maxlength="15"></td>
  <tr>
    <td>Achternaam:</td>
    <td><input type="text" name="anaam" maxlength="15"></td>
  <tr>
    <td>Straat:</td>
    <td><input type="text" name="straat" maxlength="15"></td>
  <tr>
    <td>Postcode:</td>
    <td><input type="text" name="postcode" maxlength="7" size="7"></td>
  <tr>
    <td>Stad:</td>
    <td><input type="text" name="stad" maxlength="15"></td>
  <tr>
    <td>Land:</td>
    <td><input type="text" name="land" maxlength="15" size="25"></td>
  <tr>
    <td>Email:</td>
  <td><input type="text" name="email" maxlength="20" size="30"></td>
  </tr>
</table>

Uitproberen

Vorige Volgende