Het element <input type="search">

Waarde

Het value-attribuut bevat een tekenreeks die de waarde vertegenwoordigt die in het zoekveld staat. Je kunt deze in JavaScript ophalen met de HTMLInputElement.value-eigenschap.

searchTerms = mySearch.value;

Als er geen validatiebeperkingen gelden voor de invoer (zie Validatie voor meer details), kan de waarde elke tekenreeks of 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 zoekveldinvoer de volgende attributen.

list

De waarde van het list-attribuut is het id van een <datalist>-element dat zich in hetzelfde document bevindt. De <datalist> biedt een lijst met vooraf gedefinieerde waarden om de gebruiker voor deze invoer voor te stellen. Eventuele waarden in de lijst die niet compatibel zijn met het type worden niet opgenomen in de voorgestelde opties. De opgegeven 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-eenheden) die de gebruiker in het zoekveld kan invoeren. Dit moet een geheel getal zijn van 0 of hoger. Als er geen maxlength is opgegeven, of er is een ongeldige waarde opgegeven, heeft het zoekveld geen maximale lengte. Deze waarde moet ook groter dan of gelijk aan de waarde van minlength zijn.

De invoer zal falen bij beperkingsvalidatie als de lengte van de tekst die in het veld is ingevoerd groter is dan maxlength UTF-16-code-eenheden. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

minlength

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

Het zoekveld zal falen bij beperkingsvalidatie als de lengte van de tekst die in het veld is ingevoerd kleiner is dan minlength UTF-16-code-eenheden. 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 invoer moet voldoen om beperkingsvalidatie 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; de 'u'-vlag 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 forward slashes 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 de sectie Een patroon opgeven voor details en een voorbeeld.

placeholder

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

Als de inhoud van het besturingselement één richting heeft (LTR of RTL), maar de placeholder in de tegenovergestelde richting moet presenteren, kun je Unicode-opmaaktekens voor bidirectioneel 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 ervan kan echter nog steeds worden gewijzigd door JavaScript-code die de value-eigenschap 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 de tekenbreedte varieert, kan dit al dan niet exact zijn en moet er niet op worden vertrouwd dat dit precies klopt; de resulterende invoer kan smaller of breder zijn dan het opgegeven aantal tekens, afhankelijk van de tekens en het gebruikte lettertype (de font-instellingen).

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

spellcheck

spellcheck is een globaal attribuut dat wordt gebruikt om aan te geven of spellingcontrole voor een element moet worden ingeschakeld. Het kan worden gebruikt op elke bewerkbare inhoud, maar hier bekijken we specifiek het gebruik van spellcheck op <input>-elementen. De toegestane waarden voor spellcheck zijn:

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

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

Niet-standaard attributen

De volgende niet-standaard attributen zijn beschikbaar voor zoekinvoervelden. Vermijd het gebruik ervan waar mogelijk.

incremental

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

Als incremental niet is opgegeven, wordt de search-gebeurtenis 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).

De search-gebeurtenis is snelheidsbeperkt, zodat deze niet vaker wordt verzonden dan een door de implementatie bepaald interval.

results

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

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

Zoekvelden gebruiken

<input>-elementen van het type search lijken erg op die van het type text, behalve dat ze specifiek bedoeld zijn voor het verwerken van zoektermen. Ze zijn in principe gelijkwaardig qua gedrag, maar user agents kunnen ervoor kiezen ze standaard anders te stylen (en sites kunnen natuurlijk stylesheets gebruiken om er aangepaste stijlen op toe te passen).

Basisvoorbeeld

<form>
  <div>
    <input type="search" id="mySearch" name="q" />
    <button>Search</button>
  </div>
</form>

Dit wordt als volgt weergegeven:

q is de meest gebruikelijke name die aan zoekinvoervelden wordt gegeven, hoewel dit niet verplicht is. Bij verzending wordt het naam/waarde-paar dat naar de server wordt gestuurd q=zoekterm.

Verschillen tussen de typen search en text

De belangrijkste basisverschillen zitten in de manier waarop browsers ze verwerken. Het eerste wat opvalt, is dat sommige browsers een kruisje tonen waarop geklikt kan worden om de zoekterm direct te verwijderen indien gewenst; in Chrome wordt deze actie ook geactiveerd door op escape te drukken. De volgende schermafbeelding komt uit Chrome:

Daarnaast slaan moderne browsers ook automatisch eerder ingevoerde zoektermen op, over verschillende domeinen heen, die vervolgens als autocomplete-opties verschijnen wanneer latere zoekopdrachten worden uitgevoerd in zoekvelden op dat domein. Dit helpt gebruikers die na verloop van tijd geneigd zijn dezelfde of vergelijkbare zoekopdrachten uit te voeren. Deze schermafbeelding komt uit Firefox:

Laten we nu enkele nuttige technieken bekijken die je op je zoekformulieren kunt toepassen.

Placeholders instellen

Je kunt een nuttige placeholder in je zoekveld opnemen die een hint kan geven over wat er gedaan moet worden, met behulp van het placeholder-attribuut. Bekijk het volgende voorbeeld:

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…" />
    <button>Search</button>
  </div>
</form>

Hieronder zie je hoe de placeholder wordt weergegeven:

Labels en toegankelijkheid van zoekformulieren

Een probleem met zoekformulieren is hun toegankelijkheid; een gangbare ontwerppraktijk is om geen label voor het zoekveld op te geven (hoewel er mogelijk een vergrootglaspictogram of iets dergelijks is), omdat het doel van een zoekformulier voor ziende gebruikers meestal vrij duidelijk is vanwege de plaatsing (dit voorbeeld toont een typisch visueel patroon).

Dit kan echter verwarring veroorzaken voor gebruikers van schermlezers, aangezien zij geen mondelinge aanduiding krijgen van wat het zoekveld is. Een manier om dit te voorkomen zonder je visuele ontwerp te beïnvloeden, is het gebruik van landmark-elementen.

• Omhul de volledige zoekfunctionaliteit in een <search>-element, dat een landmark-regio creëert die ondersteunende technologie kan aankondigen en snel naartoe kan navigeren. Als je <input> zich al in een <form> bevindt, kun je in plaats daarvan role="search" toevoegen aan het <form>-element, wat het <form> ook een search-landmark maakt. Het <search>-element gebruikt native HTML-semantiek, terwijl role="search" meer ondersteuning heeft en mogelijk korter is om te typen als je al een <form>-omhulsel hebt.
• Als dat niet voldoende is, kun je een aria-label-attribuut op de <input> zelf gebruiken. Dit moet een beschrijvend tekstlabel zijn dat door de schermlezer wordt voorgelezen; het wordt gebruikt als een niet-visueel equivalent van <label>.

Laten we een minimaal voorbeeld bekijken:

<search>
  <form>
    <div>
      <input
        type="search"
        id="mySearch"
        name="q"
        placeholder="Search the site…"
        aria-label="Search through site content" />
      <button>Search</button>
    </div>
  </form>
</search>

Hieronder zie je hoe dit wordt weergegeven:

Er is geen visueel verschil met het vorige voorbeeld, maar gebruikers van schermlezers hebben veel meer informatie tot hun beschikking.

Fysieke grootte van het invoerelement

De fysieke grootte van het invoervak kan worden bepaald met het size-attribuut. Hiermee kun je het aantal tekens opgeven dat het invoervak tegelijk kan weergeven. In dit voorbeeld is het zoekvak bijvoorbeeld 30 tekens breed:

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…"
      size="30" />
    <button>Search</button>
  </div>
</form>

Het resultaat is dit bredere invoervak:

Validatie

<input>-elementen van het type search beschikken over dezelfde validatiefuncties als gewone text-invoervelden. Het is minder waarschijnlijk dat je in het algemeen validatiefuncties wilt gebruiken voor zoekvakken. In veel gevallen zouden gebruikers gewoon overal naar mogen zoeken, maar er zijn enkele gevallen om te overwegen, zoals zoekopdrachten op gegevens met een bekende opmaak.

Een opmerking over styling

Er zijn nuttige pseudo-klassen beschikbaar voor het stylen van geldige/ongeldige formulierelementen: :valid en :invalid. In dit gedeelte gebruiken we de volgende CSS, die een vinkje plaatst naast invoervelden met geldige waarden, en een kruisje naast invoervelden met ongeldige waarden.

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

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

Voor deze techniek is ook een <span>-element nodig dat na het formulierelement wordt geplaatst en dat als houder voor de pictogrammen dient. Dit was nodig omdat sommige invoertypen in sommige browsers pictogrammen die er direct achter zijn geplaatst niet goed weergeven.

Invoer verplicht maken

Je kunt het required-attribuut gebruiken als een eenvoudige manier om het invoeren van een waarde verplicht te stellen voordat het formulier verzonden mag worden:

<form>
  <div>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="Search the site…"
      required />
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

input {
  margin-right: 10px;
}

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

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

Dit wordt als volgt weergegeven:

Als je bovendien probeert het formulier te verzenden zonder een zoekterm in te voeren, toont de browser een bericht. Het volgende voorbeeld komt uit Firefox:

Er worden verschillende berichten weergegeven wanneer je probeert het formulier te verzenden met verschillende soorten ongeldige gegevens in de invoervelden; zie de onderstaande voorbeelden.

Lengte van de invoerwaarde

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

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

<form>
  <div>
    <label for="mySearch">Search for user</label>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="User IDs are 4–8 characters in length"
      required
      size="30"
      minlength="4"
      maxlength="8" />
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

input {
  margin-right: 10px;
}

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

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

Dit wordt als volgt weergegeven:

Als je probeert het formulier te verzenden met minder dan 4 tekens, krijg je een passend foutbericht (dat per browser verschilt). Als je meer dan 8 tekens probeert 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 korte inleiding).

Laten we een voorbeeld bekijken. Stel dat we een zoekformulier voor product-ID's willen aanbieden, en de ID's bestaan allemaal uit codes van twee letters gevolgd door vier cijfers. Het volgende voorbeeld behandelt dit:

<form>
  <div>
    <label for="mySearch">Search for product by ID:</label>
    <input
      type="search"
      id="mySearch"
      name="q"
      placeholder="two letters followed by four numbers"
      required
      size="30"
      pattern="[A-z]{2}[0-9]{4}" />
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

input {
  margin-right: 10px;
}

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

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

Dit wordt als volgt weergegeven:

Voorbeelden

Toegankelijk zoekformulier

Dit voorbeeld toont een typisch <nav>-menu dat een zoekformulier bevat. WAI-ARIA-functies worden gebruikt om het formulier toegankelijker te maken voor gebruikers van ondersteunende technologie (AT).

HTML

De belangrijkste nav-items bestaan uit een lijst met links. Het zoek-<form> krijgt een role="search"-attribuut, wat het <form> een search-landmark maakt en het aan AT aankondigt. We geven het <input type="search">-element ook een aria-label om het een duidelijk label te geven dat door schermlezers wordt voorgelezen.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <form role="search">
    <input
      type="search"
      name="q"
      placeholder="Search query"
      aria-label="Search through site content" />
    <button>Search!</button>
  </form>
</nav>

html {
  font-family: sans-serif;
  font-size: 10px;
}

nav {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 10px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  text-align: center;
  flex: 1;
}

nav a {
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.2;
}

nav form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

input {
  font-size: 1.6rem;
}

input[type="search"] {
  flex: 3;
  height: 30px;
}

button {
  flex: 1;
  height: 30px;
  padding: 0 1em;
  background: #333;
  border: 0;
  color: white;
}

We hebben de CSS en JavaScript van het voorbeeld verborgen voor de duidelijkheid, aangezien ze niet relevant zijn voor het begrijpen van de HTML. Je kunt ze bekijken door op de knop "Play" in het onderstaande live-voorbeeld te drukken.

const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Resultaat

Technische samenvatting

Zie ook

• <input>
• <input type="text">