Het element <input type="text">

Waarde

Het value-attribuut is een tekenreeks die de huidige waarde bevat van de tekst die in het tekstveld is ingevoerd. Je kunt deze in JavaScript ophalen met de eigenschap value van HTMLInputElement.

let theText = myTextInput.value;

Als er geen validatiebeperkingen gelden voor de input (zie Validatie voor meer details), kan de waarde een lege tekenreeks ("") zijn.

Aanvullende attributen

Naast de globale attributen en de attributen die op alle <input>-elementen van toepassing zijn, ongeacht hun type, ondersteunen tekstinputs de volgende attributen.

list

De waarde van het list-attribuut is de id van een <datalist>-element dat zich in hetzelfde document bevindt. De <datalist> biedt een lijst met vooraf gedefinieerde waarden die aan de gebruiker worden voorgesteld voor deze input. Waarden in de lijst die niet compatibel zijn met het type worden niet in de voorgestelde opties opgenomen. De geleverde waarden zijn suggesties, geen vereisten: gebruikers kunnen uit deze vooraf gedefinieerde lijst kiezen of een andere waarde opgeven.

maxlength

De maximale tekenreekslengte (gemeten in UTF-16-code-units) die de gebruiker in de text-input kan invoeren. Dit moet een geheel getal zijn van 0 of hoger. Als er geen maxlength is opgegeven, of een ongeldige waarde is opgegeven, heeft de text-input geen maximumlengte. Deze waarde moet ook groter dan of gelijk zijn aan de waarde van minlength.

De input zal niet voldoen aan de beperkingsvalidatie als de lengte van de tekstwaarde van het veld groter is dan maxlength UTF-16-code-units. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

minlength

De minimale tekenreekslengte (gemeten in UTF-16-code-units) die de gebruiker in de text-input kan invoeren. Dit moet een niet-negatief geheel getal zijn dat kleiner is dan of gelijk is aan de waarde die door maxlength is opgegeven. Als er geen minlength is opgegeven, of een ongeldige waarde is opgegeven, heeft de text-input geen minimumlengte.

De input zal niet voldoen aan de beperkingsvalidatie als de lengte van de tekst die in het veld is ingevoerd, korter is dan minlength UTF-16-code-units. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

pattern

Het pattern-attribuut is, indien opgegeven, een reguliere expressie waaraan de value van de input moet voldoen om de beperkingsvalidatie te doorstaan. Het moet een geldige JavaScript-reguliere expressie zijn, zoals gebruikt door het type RegExp, en zoals gedocumenteerd in onze gids over reguliere expressies; de vlag 'u' wordt opgegeven bij het compileren van de reguliere expressie, zodat het patroon wordt behandeld als een reeks Unicode-codepunten in plaats van als ASCII. Er mogen geen schuine strepen rond de patroontekst worden opgegeven.

Als het opgegeven patroon niet is opgegeven of ongeldig is, wordt er geen reguliere expressie toegepast en wordt dit attribuut volledig genegeerd.

Zie Een patroon opgeven voor meer details en een voorbeeld.

placeholder

Het placeholder-attribuut is een tekenreeks die een korte hint aan de gebruiker geeft over wat voor soort informatie in het veld wordt verwacht. Het moet een woord of korte zin zijn die het verwachte type data toont, in plaats van een verklarend bericht. De tekst mag geen regeleinden of carriage returns bevatten.

Als de inhoud van het besturingselement één richting (LTR of RTL) heeft, maar de placeholder in de tegenovergestelde richting moet worden weergegeven, kun je Unicode-tekens voor de bidirectionele opmaakalgoritme gebruiken om de richting binnen de placeholder te overschrijven; zie Hoe Unicode-besturingstekens voor bidi-tekst te gebruiken voor meer informatie.

readonly

Een booleaans attribuut dat, indien aanwezig, betekent dat dit veld niet door de gebruiker kan worden bewerkt. De value kan echter nog steeds worden gewijzigd door JavaScript-code die de eigenschap value van HTMLInputElement rechtstreeks instelt.

size

Het size-attribuut is een numerieke waarde die aangeeft hoeveel tekens breed het invoerveld moet zijn. De waarde moet een getal groter dan nul zijn, en de standaardwaarde is 20. Aangezien tekenbreedtes variëren, is dit mogelijk niet exact en zou hier niet op vertrouwd moeten worden; de resulterende input kan smaller of breder zijn dan het opgegeven aantal tekens, afhankelijk van de gebruikte tekens en het lettertype (de font-instellingen die worden gebruikt).

Dit stelt geen limiet in op hoeveel tekens de gebruiker in het veld kan invoeren. Het geeft alleen ongeveer aan hoeveel er tegelijk zichtbaar zijn. Om een bovengrens voor de lengte van de invoerdata in te stellen, gebruik je het maxlength-attribuut.

spellcheck

Het globale attribuut spellcheck wordt gebruikt om aan te geven of spellingscontrole voor een element moet worden ingeschakeld. Het kan worden gebruikt op elke bewerkbare inhoud, maar hier bekijken we specifieke aspecten die te maken hebben met het gebruik van spellcheck op <input>-elementen. De toegestane waarden voor spellcheck zijn:

Een invoerveld kan spellingscontrole ingeschakeld hebben als het readonly-attribuut niet is ingesteld en het niet is uitgeschakeld.

De waarde die wordt geretourneerd bij het lezen van spellcheck weerspiegelt mogelijk niet de daadwerkelijke status van de spellingscontrole binnen een besturingselement, als de voorkeuren van de user agent de instelling overschrijven.

Tekstinputs gebruiken

<input>-elementen van het type text maken eenvoudige, eenregelige inputs. Je moet ze overal gebruiken waar je wilt dat de gebruiker een eenregelige waarde invoert en er geen specifieker inputtype beschikbaar is voor het verzamelen van die waarde (bijvoorbeeld als het gaat om een datum, URL, e-mail of zoekterm, heb je betere opties beschikbaar).

Basisvoorbeeld

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Dit wordt als volgt weergegeven:

Bij verzending wordt het naam/waarde-paar name=Chris naar de server gestuurd (als "Chris" als waarde van de input werd ingevoerd vóór verzending). Je moet niet vergeten het name-attribuut op het <input>-element op te nemen, anders wordt de waarde van het tekstveld niet meegestuurd met de verzonden data.

Placeholders instellen

Je kunt een nuttige placeholder in je tekstinput opnemen die een hint geeft over wat er moet worden ingevoerd, door het placeholder-attribuut te gebruiken. Bekijk het volgende voorbeeld:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Je kunt hieronder zien hoe de placeholder wordt weergegeven:

De placeholder wordt doorgaans weergegeven in een lichtere kleur dan de voorgrondkleur van het element, en verdwijnt automatisch zodra de gebruiker begint met het invoeren van tekst in het veld (of wanneer het veld programmatisch een waarde krijgt door het value-attribuut in te stellen).

Fysieke grootte van het invoerelement

De fysieke grootte van het invoervak kan worden bepaald met behulp van het size-attribuut. Hiermee kun je het aantal tekens opgeven dat de tekstinput tegelijk kan weergeven. Dit beïnvloedt de breedte van het element, waardoor je de breedte in tekens in plaats van in pixels kunt opgeven. In dit voorbeeld is de input bijvoorbeeld 30 tekens breed:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Validatie

<input>-elementen van het type text hebben geen automatische validatie die erop wordt toegepast (aangezien een eenvoudige tekstinput elke willekeurige tekenreeks moet kunnen accepteren), maar er zijn enkele client-side validatieopties beschikbaar, die we hieronder bespreken.

Een opmerking over styling

Er zijn nuttige pseudo-klassen beschikbaar voor het stylen van formulierelementen om de gebruiker te helpen zien wanneer hun waarden geldig of ongeldig zijn. Dit zijn :valid en :invalid. In deze sectie gebruiken we de volgende CSS, die een vinkje plaatst naast inputs met geldige waarden en een kruisje (X) naast inputs met ongeldige waarden.

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Deze techniek vereist ook een <span>-element dat na het formulierelement wordt geplaatst, dat dient als houder voor de iconen. Dit was nodig omdat sommige inputtypen in sommige browsers icoontjes die er direct achter zijn geplaatst niet goed weergeven.

Input verplicht maken

Je kunt het required-attribuut gebruiken als een eenvoudige manier om het invoeren van een waarde verplicht te stellen voordat formulierverzending is toegestaan:

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Dit wordt als volgt weergegeven:

Als je probeert het formulier te verzenden zonder dat er een gebruikersnaam is ingevoerd, geeft de browser een foutmelding weer.

Lengte van de invoerwaarde

Je kunt een minimale lengte (in tekens) opgeven voor de ingevoerde waarde met behulp van het minlength-attribuut; gebruik op vergelijkbare wijze maxlength om de maximale lengte van de ingevoerde waarde, in tekens, in te stellen.

Het onderstaande voorbeeld vereist dat de ingevoerde waarde tussen 4 en 8 tekens lang is.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Dit wordt als volgt weergegeven:

Als je probeert het formulier te verzenden met minder dan 4 tekens, krijg je een passende foutmelding (die per browser verschilt). Als je probeert meer dan 8 tekens in te voeren, laat de browser dit niet toe.

Een patroon opgeven

Je kunt het pattern-attribuut gebruiken om een reguliere expressie op te geven waaraan de ingevoerde waarde moet voldoen om als geldig te worden beschouwd (zie Valideren tegen een reguliere expressie voor een snelcursus over het gebruik van reguliere expressies om inputs te valideren).

Het onderstaande voorbeeld beperkt de waarde tot 4-8 tekens en vereist dat deze alleen kleine letters bevat.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Dit wordt als volgt weergegeven:

Voorbeelden

Je kunt goede voorbeelden zien van tekstinputs die in context worden gebruikt in onze artikelen Je eerste HTML-formulier en Hoe je een HTML-formulier structureert.

Technische samenvatting

Zie ook

• <input>
• <input type="search">
• <textarea>