Het element <input type="password">

Waarde

Het attribuut value bevat een string waarvan de waarde de huidige inhoud is van het tekst-invoerveld dat wordt gebruikt om het wachtwoord in te voeren. Als de gebruiker nog niets heeft ingevoerd, is deze waarde een lege string (""). Als de eigenschap required is opgegeven, moet het invoerveld voor het wachtwoord een andere waarde dan een lege string bevatten om geldig te zijn.

Als het attribuut pattern is opgegeven, wordt de inhoud van een password-invoerveld alleen als geldig beschouwd als de waarde de validatie doorstaat; zie Validatie voor meer informatie.

Aanvullende attributen

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

maxlength

De maximale stringlengte (gemeten in UTF-16-code-eenheden) die de gebruiker in het wachtwoordveld 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 het wachtwoordveld geen maximumlengte. Deze waarde moet ook groter dan of gelijk zijn aan de waarde van minlength.

De invoer voldoet niet aan de beperkingsvalidatie als de lengte van de in het veld ingevoerde tekst groter is dan maxlength UTF-16-code-eenheden. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

minlength

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

De invoer voldoet niet aan de beperkingsvalidatie als de lengte van de in het veld ingevoerde tekst korter is dan minlength UTF-16-code-eenheden. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

pattern

Het attribuut pattern, indien opgegeven, is een reguliere expressie waaraan de value van de invoer 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 rondom de patroontekst worden opgegeven.

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

Het gebruik van een patroon wordt sterk aanbevolen voor wachtwoordvelden, om te helpen waarborgen dat geldige wachtwoorden met een breed scala aan tekenklassen worden gekozen en gebruikt door uw gebruikers. Met een patroon kunt u hoofdlettergebruikregels voorschrijven, het gebruik van een bepaald aantal cijfers en/of leestekens vereisen, enzovoort. Zie de sectie Validatie voor details en een voorbeeld.

placeholder

Het attribuut placeholder is een string die de gebruiker een korte aanwijzing geeft over wat voor soort informatie in het veld wordt verwacht. Het moet een woord of korte zin zijn die het verwachte type gegevens illustreert, in plaats van een verklarend bericht. De tekst mag geen regeleinde- of carriage-return-tekens bevatten.

Als de inhoud van het invoerveld één schrijfrichting heeft (LTR of RTL) maar de placeholder in de tegenovergestelde richting moet presenteren, kunt u Unicode-bidirectionele opmaaktekens gebruiken om de schrijfrichting binnen de placeholder te overschrijven; zie How to use Unicode controls for bidi text voor meer informatie.

readonly

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

size

Het attribuut size 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 mag er niet op worden vertrouwd dat dit wel het geval is; de resulterende invoer kan smaller of breder zijn dan het opgegeven aantal tekens, afhankelijk van de tekens en het gebruikte lettertype (font-instellingen).

Dit stelt geen limiet in op hoeveel tekens de gebruiker in het veld kan invoeren. Het geeft alleen bij benadering aan hoeveel er tegelijk zichtbaar zijn. Gebruik het attribuut maxlength om een bovengrens voor de lengte van de invoergegevens in te stellen.

Wachtwoordvelden gebruiken

Wachtwoordinvoervelden werken over het algemeen net als andere tekstuele invoervelden; het belangrijkste verschil is het verhullen van de inhoud om te voorkomen dat mensen in de buurt van de gebruiker het wachtwoord kunnen lezen.

Een eenvoudig wachtwoordveld

Hier zien we het meest eenvoudige wachtwoordveld, met een label dat is ingesteld met het <label>-element.

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" />

Automatisch aanvullen toestaan

Om de wachtwoordmanager van de gebruiker in staat te stellen het wachtwoord automatisch in te vullen, geeft u het attribuut autocomplete op. Voor wachtwoorden moet dit doorgaans een van de volgende zijn:

<label for="userPassword">Password:</label>
<input id="userPassword" type="password" autocomplete="current-password" />

Het wachtwoord verplicht maken

Om de browser van de gebruiker te laten weten dat het wachtwoordveld een geldige waarde moet bevatten voordat het formulier kan worden verzonden, geeft u het Booleaanse attribuut required op.

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" required />
<input type="submit" value="Submit" />

Een invoermodus opgeven

Als uw aanbevolen (of vereiste) syntaxisregels voor wachtwoorden baat zouden hebben bij een alternatieve interface voor tekstinvoer in plaats van het standaardtoetsenbord, kunt u het attribuut inputmode gebruiken om een specifieke interface aan te vragen. Het meest voor de hand liggende toepassingsgeval hiervoor is wanneer het wachtwoord numeriek moet zijn (zoals een pincode). Mobiele apparaten met virtuele toetsenborden kunnen bijvoorbeeld ervoor kiezen om over te schakelen naar een numeriek toetsenbordindeling in plaats van een volledig toetsenbord, om het invoeren van het wachtwoord gemakkelijker te maken. Als de pincode voor eenmalig gebruik is, stelt u het attribuut autocomplete in op off of one-time-code om aan te geven dat deze niet wordt opgeslagen.

<label for="pin">PIN: </label>
<input id="pin" type="password" inputmode="numeric" />

Lengtevereisten instellen

Zoals gebruikelijk kunt u de attributen minlength en maxlength gebruiken om minimale en maximale toegestane lengtes voor het wachtwoord in te stellen. Dit voorbeeld bouwt voort op het vorige door aan te geven dat de pincode van de gebruiker minimaal vier en maximaal acht cijfers moet zijn. Het attribuut size wordt gebruikt om ervoor te zorgen dat het invoerveld voor het wachtwoord acht tekens breed is.

<label for="pin">PIN:</label>
<input
  id="pin"
  type="password"
  inputmode="numeric"
  minlength="4"
  maxlength="8"
  size="8" />

Tekst selecteren

Zoals bij andere tekstuele invoervelden, kunt u de methode select() gebruiken om alle tekst in het wachtwoordveld te selecteren.

HTML

<label for="userPassword">Password: </label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Select All</button>

JavaScript

document.getElementById("selectAll").onclick = () => {
  document.getElementById("userPassword").select();
};

Resultaat

U kunt ook selectionStart en selectionEnd gebruiken om het bereik van tekens in het veld dat momenteel geselecteerd is op te vragen (of in te stellen), en selectionDirection om te weten in welke richting de selectie heeft plaatsgevonden (of zal worden uitgebreid, afhankelijk van uw platform; zie de bijbehorende documentatie voor uitleg). Aangezien de tekst echter is verhuld, is het nut hiervan enigszins beperkt.

Validatie

Als uw toepassing beperkingen op de tekenset heeft of andere vereisten voor de daadwerkelijke inhoud van het ingevoerde wachtwoord, kunt u het attribuut pattern gebruiken om een reguliere expressie vast te leggen waarmee automatisch wordt gecontroleerd of uw wachtwoorden aan die vereisten voldoen.

In dit voorbeeld zijn alleen waarden geldig die bestaan uit minimaal vier en maximaal acht hexadecimale cijfers.

<label for="hexId">Hex ID: </label>
<input
  id="hexId"
  type="password"
  pattern="[0-9a-fA-F]{4,8}"
  title="Enter an ID consisting of 4-8 hexadecimal digits"
  autocomplete="new-password" />

Voorbeelden

Een burgerservicenummer (Social Security Number) opvragen

Dit voorbeeld accepteert alleen invoer die overeenkomt met het formaat van een geldig Amerikaans Social Security Number. Deze nummers, die in de VS worden gebruikt voor belasting- en identificatiedoeleinden, hebben de vorm "123-45-6789". Er bestaan ook diverse regels voor welke waarden in elke groep zijn toegestaan.

HTML

<label for="ssn">SSN:</label>
<input
  type="password"
  id="ssn"
  inputmode="numeric"
  minlength="9"
  maxlength="12"
  pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
  required
  autocomplete="off" />
<br />
<label for="ssn">Value:</label>
<span id="current"></span>

Dit gebruikt een pattern dat de ingevoerde waarde beperkt tot strings die geldige Social Security Numbers vertegenwoordigen. Uiteraard garandeert deze regexp geen geldig SSN (aangezien we geen toegang hebben tot de database van de Social Security Administration), maar het zorgt er wel voor dat het nummer er een zou kunnen zijn; het vermijdt over het algemeen waarden die niet geldig kunnen zijn. Daarnaast staat het toe dat de drie groepen cijfers worden gescheiden door een spatie, een streepje ("-") of niets.

De inputmode wordt ingesteld op numeric om apparaten met virtuele toetsenborden aan te moedigen over te schakelen naar een numeriek toetsenbordindeling voor eenvoudigere invoer. De attributen minlength en maxlength worden respectievelijk ingesteld op 9 en 12, om te vereisen dat de waarde minimaal negen en maximaal 12 tekens lang is (de eerste zonder scheidingstekens tussen de groepen cijfers, en de laatste inclusief deze tekens). Het attribuut required wordt gebruikt om aan te geven dat dit veld een waarde moet hebben. Tot slot wordt autocomplete ingesteld op off om te voorkomen dat wachtwoordmanagers en sessieherstelfuncties proberen de waarde ervan in te stellen, aangezien dit helemaal geen wachtwoord is.

JavaScript

De JavaScript toont het ingevoerde SSN op het scherm zodat u het kunt zien. Dit ondermijnt het doel van een wachtwoordveld, maar het helpt bij het experimenteren met het pattern.

const ssn = document.getElementById("ssn");
const current = document.getElementById("current");

ssn.oninput = (event) => {
  current.textContent = ssn.value;
};

Resultaat

Technische samenvatting