Het element <input>

(Geen booleaans attribuut!) Het autocomplete-attribuut neemt als waarde een door spaties gescheiden tekenreeks die beschrijft welk type automatisch-aanvullen-functionaliteit het invoerveld eventueel moet bieden. Een typische implementatie van automatisch aanvullen onthoudt eerder ingevoerde waarden in hetzelfde invoerveld, maar er kunnen ook complexere vormen van automatisch aanvullen bestaan. Een browser kan bijvoorbeeld integreren met de contactenlijst van een apparaat om email-adressen automatisch aan te vullen in een e-mailinvoerveld. Zie autocomplete voor toegestane waarden.

Het autocomplete-attribuut is geldig voor hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color en password. Dit attribuut heeft geen effect op invoertypen die geen numerieke of tekstuele gegevens teruggeven; het is geldig voor alle invoertypen behalve checkbox, radio, file, of een van de knoptypen.

Zie het autocomplete-attribuut voor aanvullende informatie, waaronder informatie over wachtwoordbeveiliging en hoe autocomplete voor hidden licht anders werkt dan voor andere invoertypen.

Een booleaans attribuut dat, indien aanwezig, aangeeft dat het invoerveld automatisch focus moet krijgen zodra de pagina klaar is met laden (of wanneer de <dialog> die het element bevat, wordt weergegeven).

Niet meer dan één element in het document mag het autofocus-attribuut hebben. Als het op meerdere elementen wordt geplaatst, krijgt het eerste element met het attribuut focus.

Het autofocus-attribuut kan niet worden gebruikt bij invoervelden van het type hidden, aangezien verborgen invoervelden geen focus kunnen krijgen.

Overweeg de toegankelijkheid zorgvuldig bij het toepassen van het autofocus-attribuut. Het automatisch focussen van een besturingselement kan ervoor zorgen dat de pagina bij het laden scrollt. De focus kan ook op sommige touchapparaten dynamische toetsenborden laten verschijnen. Een schermlezer kondigt weliswaar het label aan van het formulierbesturingselement dat focus krijgt, maar zal niets aankondigen van wat daarvoor komt, en ook een ziende gebruiker op een klein apparaat mist evenzeer de context die de voorafgaande inhoud biedt.

Geldig voor zowel het radio- als het checkbox-type; checked is een booleaans attribuut. Indien aanwezig bij het radio-type geeft het aan dat dit keuzerondje het momenteel geselecteerde is in de groep gelijknamige keuzerondjes. Indien aanwezig bij het checkbox-type geeft het aan dat het selectievakje standaard is aangevinkt (wanneer de pagina wordt geladen). Het geeft niet aan of dit selectievakje op dit moment is aangevinkt: als de status van het selectievakje verandert, weerspiegelt dit contentattribuut die verandering niet. (Alleen het checked-IDL-attribuut van HTMLInputElement wordt bijgewerkt.)

• "limited-srgb": De kleur bevindt zich in de sRGB-kleurruimte. Dit omvat waarden van rgb(), hsl(), hwb() en hex-color. De kleurwaarde is beperkt tot 8 bits per r-, g- en b-component. Dit is de standaardwaarde.
• "display-p3": De Display P3-kleurruimte, bijv. color(display-p3 1.84 -0.19 0.72 / 0.6)

Geldig voor de invoertypen hidden, text, search, url, tel en email; het dirname-attribuut maakt het mogelijk de tekstrichting van het element mee te versturen. Indien opgenomen, verzendt het formulierbesturingselement twee naam/waarde-paren: het eerste is de name en value, en het tweede is de waarde van het dirname-attribuut als naam, met als waarde ltr of rtl, zoals ingesteld door de browser.

<form action="page.html" method="post">
  <label>
    Fruit:
    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit-dir=ltr -->

Wanneer bovenstaand formulier wordt verzonden, zorgt het invoerveld ervoor dat zowel het name/value-paar fruit=cherry als het dirname/richting-paar fruit-dir=ltr worden verzonden. Zie voor meer informatie het dirname-attribuut.

Een booleaans attribuut dat, indien aanwezig, aangeeft dat de gebruiker niet met het invoerveld moet kunnen interageren. Uitgeschakelde invoervelden worden doorgaans weergegeven met een dofferre kleur of een andere aanduiding dat het veld niet beschikbaar is voor gebruik.

Specifiek: uitgeschakelde invoervelden ontvangen het click-event niet, en uitgeschakelde invoervelden worden niet met het formulier verzonden.

Een tekenreeks die het <form>-element aanduidt waarmee het invoerveld is geassocieerd (dat wil zeggen, de formuliereigenaar). De waarde van deze tekenreeks moet, indien aanwezig, overeenkomen met de id van een <form>-element in hetzelfde document. Als dit attribuut niet is opgegeven, wordt het <input>-element geassocieerd met het dichtstbijzijnde omsluitende formulier, indien aanwezig.

Met het form-attribuut kun je een invoerveld ergens anders in het document plaatsen, maar toch laten opnemen in een formulier elders in het document.

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

Het is geldig voor text, search, url, tel, email, date, month, week, time, datetime-local, number, range en color.

Volgens de specificaties wordt het list-attribuut niet ondersteund door hidden, password, checkbox, radio, file, of een van de knoptypen.

Afhankelijk van de browser kan de gebruiker een aangepast kleurenpalet zien, streepjes langs een schuifbalk, of zelfs een invoerveld dat opent als een <select> maar ook niet-vermelde waarden toestaat. Raadpleeg de browsercompatibiliteitstabel voor de andere invoertypen.

Zie het <datalist>-element.

Geldig voor date, month, week, time, datetime-local, number en range; het bepaalt de hoogste waarde in het bereik van toegestane waarden. Als de value die in het element is ingevoerd deze overschrijdt, faalt het element bij validatie van beperkingen. Als de waarde van het max-attribuut geen getal is, heeft het element geen maximumwaarde.

Er is een speciaal geval: als het gegevenstype periodiek is (zoals bij datums of tijden), mag de waarde van max lager zijn dan die van min, wat aangeeft dat het bereik kan rondlopen; hiermee kun je bijvoorbeeld een tijdsbereik van 22.00 tot 4.00 uur opgeven.

Geldig voor text, search, url, tel, email en password; het bepaalt de maximale tekenreekslengte (gemeten in UTF-16-code-eenheden) die de gebruiker in het veld kan invoeren. Dit moet een geheel getal van 0 of hoger zijn. Als er geen maxlength is opgegeven, of een ongeldige waarde is opgegeven, heeft het veld geen maximale lengte. Deze waarde moet ook groter dan of gelijk aan de waarde van minlength zijn.

Het invoerveld faalt bij validatie van beperkingen als de lengte van de in het veld ingevoerde tekst groter is dan maxlength UTF-16-code-eenheden. Standaard voorkomen browsers dat gebruikers meer tekens invoeren dan toegestaan door het maxlength-attribuut. Validatie van beperkingen wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd. Zie Clientzijdige validatie voor meer informatie.

Geldig voor date, month, week, time, datetime-local, number en range; het bepaalt de laagste waarde in het bereik van toegestane waarden. Als de value die in het element is ingevoerd hier lager dan is, faalt het element bij validatie van beperkingen. Als de waarde van het min-attribuut geen getal is, heeft het element geen minimumwaarde.

Deze waarde moet kleiner dan of gelijk aan de waarde van het max-attribuut zijn. Als het min-attribuut aanwezig maar niet opgegeven of ongeldig is, wordt er geen min-waarde toegepast. Als het min-attribuut geldig is en een niet-lege waarde kleiner is dan het minimum dat is toegestaan door het min-attribuut, voorkomt validatie van beperkingen het verzenden van het formulier. Zie Clientzijdige validatie voor meer informatie.

Er is een speciaal geval: als het gegevenstype periodiek is (zoals bij datums of tijden), mag de waarde van max lager zijn dan die van min, wat aangeeft dat het bereik kan rondlopen; hiermee kun je bijvoorbeeld een tijdsbereik van 22.00 tot 4.00 uur opgeven.

Geldig voor text, search, url, tel, email en password; het bepaalt de minimale tekenreekslengte (gemeten in UTF-16-code-eenheden) die de gebruiker in het invoerveld kan invoeren. Dit moet een niet-negatief geheel getal zijn, kleiner dan of gelijk aan de waarde die is opgegeven door maxlength. Als er geen minlength is opgegeven, of een ongeldige waarde is opgegeven, heeft het invoerveld geen minimale lengte.

Het invoerveld faalt bij validatie van beperkingen als de lengte van de in het veld ingevoerde tekst korter is dan minlength UTF-16-code-eenheden, waardoor het verzenden van het formulier wordt voorkomen. Validatie van beperkingen wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd. Zie Clientzijdige validatie voor meer informatie.

Een tekenreeks die een naam voor het invoerbesturingselement opgeeft. Deze naam wordt samen met de waarde van het besturingselement verzonden wanneer de formuliergegevens worden verzonden.

Beschouw name als een verplicht attribuut (ook al is het dat technisch niet). Als een invoerveld geen name heeft opgegeven, of name is leeg, wordt de waarde van het invoerveld niet met het formulier verzonden! (Uitgeschakelde besturingselementen, niet-aangevinkte keuzerondjes, niet-aangevinkte selectievakjes en reset-knoppen worden ook niet verzonden.)

Er zijn twee bijzondere gevallen:

1. _charset_: als deze naam gebruikt wordt voor een <input>-element van het type hidden, wordt de value van het invoerveld automatisch door de user agent ingesteld op de tekencodering die gebruikt wordt om het formulier te verzenden.
2. isindex: om historische redenen is de naam isindex niet toegestaan.

Het name-attribuut zorgt voor uniek gedrag bij keuzerondjes.

Slechts één keuzerondje in een gelijknamige groep keuzerondjes kan tegelijk aangevinkt zijn. Het selecteren van een willekeurig keuzerondje in die groep deselecteert automatisch het momenteel geselecteerde keuzerondje in dezelfde groep. De waarde van dat ene aangevinkte keuzerondje wordt samen met de naam verzonden als het formulier wordt verzonden.

Bij het tabben door een reeks gelijknamige keuzerondjes krijgt, als er één is aangevinkt, dat aangevinkte rondje focus. Als ze niet in de brontekstvolgorde bij elkaar staan en één van de groep is aangevinkt, begint het tabben in de groep zodra het eerste element van de groep bereikt wordt, waarbij alle niet-aangevinkte rondjes worden overgeslagen. Met andere woorden: als er één is aangevinkt, slaat tabben de niet-aangevinkte keuzerondjes in de groep over. Als er geen is aangevinkt, krijgt de keuzerondjegroep focus wanneer het eerste rondje met dezelfde naam wordt bereikt.

Zodra een van de keuzerondjes in een groep focus heeft, kun je met de pijltjestoetsen door alle keuzerondjes met dezelfde naam navigeren, zelfs als de keuzerondjes niet bij elkaar staan in de brontekstvolgorde.

Wanneer een invoerelement een name krijgt, wordt die naam een eigenschap van de HTMLFormElement.elements-eigenschap van het bijbehorende formulierelement. Als je een invoerveld hebt waarvan name is ingesteld op guest, en een ander waarvan name is ingesteld op hat-size, kan de volgende code gebruikt worden:

let form = document.querySelector("form");

let guestName = form.elements.guest;
let hatSize = form.elements["hat-size"];

Wanneer deze code is uitgevoerd, is guestName het HTMLInputElement voor het guest-veld, en hatSize het object voor het hat-size-veld.

Geldig voor text, search, url, tel, email en password; het pattern-attribuut wordt gebruikt om een reguliere expressie te compileren waaraan de value van het invoerveld moet voldoen om de validatie van beperkingen te doorstaan. Het moet een geldige JavaScript-reguliere expressie zijn, zoals gebruikt door het RegExp-type, en zoals gedocumenteerd in onze gids over reguliere expressies. Er mogen geen schuine strepen om de patroontekst worden geplaatst. Bij het compileren van de reguliere expressie:

1. wordt het patroon impliciet omwikkeld met ^(?: en )$, zodat de match vereist is tegen de volledige invoerwaarde, d.w.z. ^(?:<patroon>)$.
2. wordt de 'v'-vlag opgegeven, zodat het patroon behandeld wordt als een reeks Unicode-codepunten in plaats van als ASCII.

Als het pattern-attribuut aanwezig maar niet opgegeven of ongeldig is, wordt er geen reguliere expressie toegepast en wordt dit attribuut volledig genegeerd. Als het pattern-attribuut geldig is en een niet-lege waarde niet overeenkomt met het patroon, voorkomt validatie van beperkingen het verzenden van het formulier. Als multiple aanwezig is, wordt de gecompileerde reguliere expressie vergeleken met elke door komma's gescheiden waarde.

Zie Clientzijdige validatie voor meer informatie.

Geldig voor text, search, url, tel, email, password en number; het placeholder-attribuut biedt de gebruiker een korte hint over wat voor soort informatie in het veld verwacht wordt. Het moet een woord of korte zin zijn die een hint geeft over het verwachte type gegevens, in plaats van een uitleg of prompt. De tekst mag geen regeleinden bevatten. Als een veld bijvoorbeeld de voornaam van een gebruiker moet vastleggen en het label "First Name" is, kan een geschikte placeholder "bijv. Mustafa" zijn.

• De browser maakt een impliciete aria-details- en aria-expanded-relatie tussen de popover en de oproeper, en plaatst de popover op een logische positie in de volgorde van toetsenbordfocusnavigatie wanneer deze wordt weergegeven. Dit maakt de popover toegankelijker voor gebruikers van toetsenbord en ondersteunende technologie (zie ook Toegankelijkheidsfuncties van popovers).
• De browser maakt een impliciete ankerverwijzing tussen de twee, wat het erg gemakkelijk maakt om popovers te positioneren ten opzichte van hun besturingselementen met behulp van CSS-ankerpositionering. Zie Popover-ankerpositionering voor meer details.

• "hide"
  • : De knop verbergt een weergegeven popover. Als je probeert een al verborgen popover te verbergen, gebeurt er niets.
• "show"
  • : De knop toont een verborgen popover. Als je probeert een al zichtbare popover te tonen, gebeurt er niets.
• "toggle"
  • : De knop wisselt een popover tussen zichtbaar en verborgen. Als de popover verborgen is, wordt hij getoond; als de popover zichtbaar is, wordt hij verborgen. Als popovertargetaction wordt weggelaten, is "toggle" de standaardactie die door de besturingsknop wordt uitgevoerd.

Een booleaans attribuut dat, indien aanwezig, aangeeft dat de gebruiker de waarde van het invoerveld niet mag bewerken. Het readonly-attribuut wordt ondersteund door de invoertypen text, search, url, tel, email, date, month, week, time, datetime-local, number en password.

Zie het HTML-attribuut readonly voor meer informatie.

required is een booleaans attribuut dat, indien aanwezig, aangeeft dat de gebruiker een waarde voor het invoerveld moet opgeven voordat het bijbehorende formulier verzonden kan worden. Het required-attribuut wordt ondersteund door de invoertypen text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio en file.

Zie Clientzijdige validatie en het HTML-attribuut required voor meer informatie.

Geldig voor date, month, week, time, datetime-local, number en range; het attribuut step is een getal dat de granulariteit opgeeft waaraan de waarde moet voldoen. Alleen waarden die een heel aantal stappen van de stapbasis verwijderd zijn, zijn geldig. De stapbasis is min indien opgegeven, anders value, of 0 als geen van beide is opgegeven (behalve voor week, dat een standaard stapbasis van −259.200.000 heeft, wat het begin van week 1970-W01 voorstelt).

Indien niet expliciet opgenomen:

• is de standaardwaarde van step 1 voor number en range.
• heeft elk datum-/tijd-invoertype een bij het type passende standaard step-waarde; zie de afzonderlijke invoerpagina's: date, datetime-local, month, time en week.

De waarde moet een positief getal zijn — geheel getal of kommagetal — of de speciale waarde any, wat betekent dat er geen stapgrootte wordt afgedwongen en elke waarde is toegestaan (afgezien van andere beperkingen, zoals min en max).

Als je bijvoorbeeld <input type="number" min="10" step="2"> hebt, is elk even geheel getal van 10 of hoger geldig. Bij weglating is bij <input type="number"> elk geheel getal geldig, maar kommagetallen (zoals 4.2) niet, omdat step standaard 1 is. Om 4.2 geldig te maken, had step ingesteld moeten worden op any, 0.1, 0.2, of de min-waarde had een getal moeten zijn dat eindigt op .2, zoals <input type="number" min="-5.2">.

Zie Clientzijdige validatie voor meer informatie.

Alleen geldig voor checkbox-invoervelden; switch is een booleaans attribuut dat aangeeft of het checkbox-invoerveld als schakelaar (switch) weergegeven moet worden.

Een tekenreeks die het type van het te renderen besturingselement opgeeft. Om bijvoorbeeld een selectievakje te maken, wordt de waarde checkbox gebruikt. Als dit wordt weggelaten (of een onbekende waarde wordt opgegeven), wordt het invoertype text gebruikt, waardoor een tekstveld met platte tekst ontstaat.

Toegestane waarden staan hierboven vermeld bij Invoertypen.

Het booleaanse attribuut incremental is een WebKit- en Blink-uitbreiding (dus ondersteund door Safari, Opera, Chrome, enz.) die, indien aanwezig, de user agent vertelt de invoer als een live zoekopdracht te verwerken. Terwijl de gebruiker de waarde van het veld bewerkt, stuurt de user agent search-events naar het HTMLInputElement-object dat het zoekvak voorstelt. Hierdoor kan je code de zoekresultaten in real time bijwerken terwijl de gebruiker de zoekopdracht bewerkt.

Als incremental niet is opgegeven, wordt het search-event alleen verzonden wanneer de gebruiker expliciet een zoekopdracht start (bijvoorbeeld door tijdens het bewerken van het veld op de toets Enter of Return te drukken).

Het search-event is snelheidsbeperkt, zodat het niet vaker wordt verzonden dan een door de implementatie bepaald interval.

Het results-attribuut — alleen ondersteund door Safari — is een numerieke waarde waarmee je het maximale aantal vermeldingen kunt overschrijven dat wordt weergegeven in het door het <input>-element van nature aangeboden vervolgkeuzemenu met eerdere zoekopdrachten.

De waarde moet een niet-negatief decimaal getal zijn. Indien niet opgegeven, of als een ongeldige waarde wordt opgegeven, wordt het standaard maximale aantal vermeldingen van de browser gebruikt.

Het booleaanse attribuut webkitdirectory geeft, indien aanwezig, aan dat alleen mappen door de gebruiker geselecteerd kunnen worden in de interface van de bestandskiezer. Zie HTMLInputElement.webkitdirectory voor aanvullende details en voorbeelden.

Hoewel oorspronkelijk alleen geïmplementeerd voor op WebKit gebaseerde browsers, is webkitdirectory ook bruikbaar in Microsoft Edge en in Firefox 50 en later. Ondanks de relatief brede ondersteuning is het echter nog steeds geen standaard en zou het niet gebruikt moeten worden tenzij er geen alternatief is.