Het element <input type="url">

Waarde

Het value-attribuut van het <input>-element bevat een tekenreeks die automatisch wordt gevalideerd op overeenstemming met de URL-syntax. Meer specifiek zijn er twee mogelijke waardeformaten die de validatie doorstaan:

1. Een lege tekenreeks ("") geeft aan dat de gebruiker geen waarde heeft ingevoerd of dat de waarde is verwijderd.
2. Een enkele correct opgemaakte absolute URL. Dit betekent niet noodzakelijkerwijs dat het URL-adres bestaat, maar wel dat het ten minste correct is opgemaakt. Een invoer die overeenkomt met urlscheme://rest-of-url kan geldig zijn, zelfs als het opgegeven urlscheme niet bestaat.

Zie Validatie voor details over hoe URL's worden gevalideerd om ervoor te zorgen dat ze correct zijn opgemaakt.

Aanvullende attributen

Naast de globale attributen en de attributen die van toepassing zijn op alle <input>-elementen ongeacht hun type, ondersteunen url-invoervelden 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 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 verplichtingen: gebruikers kunnen uit deze vooraf gedefinieerde lijst kiezen of een andere waarde opgeven.

maxlength

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

Het invoerveld voldoet niet aan de beperkingsvalidatie als de lengte van de tekstwaarde van het veld groter is dan maxlength UTF-16-codeeenheden. Beperkingsvalidatie wordt alleen toegepast wanneer de waarde door de gebruiker wordt gewijzigd.

minlength

De minimale tekenreekslengte (gemeten in UTF-16-codeeenheden) die de gebruiker in het url-invoerveld 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 een ongeldige waarde is opgegeven, heeft het url-invoerveld geen minimumlengte.

Het invoerveld voldoet niet aan de beperkingsvalidatie als de lengte van de in het veld ingevoerde tekst korter is dan minlength UTF-16-codeeenheden. 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 het invoerveld moet voldoen om door de beperkingsvalidatie te komen. Het moet een geldige JavaScript-reguliere-expressie zijn, zoals gebruikt door het type RegExp, en zoals gedocumenteerd in onze handleiding voor 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 de sectie Patroonvalidatie voor details en een voorbeeld.

placeholder

Het placeholder-attribuut is een tekenreeks die 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 laat zien, in plaats van een verklarende boodschap. De tekst mag geen regeleinden of regelterugloop bevatten.

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

readonly

Het booleaanse attribuut readonly betekent, indien aanwezig, dat dit veld niet door de gebruiker kan worden bewerkt. De value kan echter nog steeds worden gewijzigd door JavaScript-code die de HTMLInputElement-eigenschap value 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. Omdat tekenbreedtes variëren, is dit mogelijk niet exact en er mag niet op worden vertrouwd dat het dat wel is; het resulterende invoerveld kan smaller of breder zijn dan het opgegeven aantal tekens, afhankelijk van de tekens en het gebruikte lettertype (instellingen van font).

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

spellcheck

Het globale attribuut spellcheck 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 specifieke aspecten met betrekking tot het gebruik van spellcheck op <input>-elementen. De toegestane waarden voor spellcheck zijn:

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

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

URL-invoervelden gebruiken

Wanneer u een URL-invoerveld maakt met de juiste type-waarde, url, krijgt u automatische validatie dat de ingevoerde tekst ten minste in de juiste vorm is om mogelijk een geldige URL te zijn. Dit kan helpen om gevallen te voorkomen waarin de gebruiker het adres van zijn website verkeerd typt, of een ongeldig adres opgeeft.

Het is echter belangrijk om op te merken dat dit niet voldoende is om te garanderen dat de opgegeven tekst een URL is die daadwerkelijk bestaat, overeenkomt met de gebruiker van de site, of op een andere manier acceptabel is. Het zorgt er alleen voor dat de waarde van het veld correct is opgemaakt om een URL te zijn.

Een eenvoudig URL-invoerveld

Dit element is geïmplementeerd als een standaard tekstinvoerveld met basale validatiefuncties. In zijn eenvoudigste vorm kan een URL-invoerveld als volgt worden geïmplementeerd:

<input id="myURL" name="myURL" type="url" />

Merk op dat het als geldig wordt beschouwd wanneer het leeg is en wanneer één correct opgemaakt URL-adres is ingevoerd, maar dat het anders als ongeldig wordt beschouwd. Door het required-attribuut toe te voegen, zijn alleen correct opgemaakte URL's toegestaan; het invoerveld wordt niet langer als geldig beschouwd wanneer het leeg is.

Er gebeurt hier niets magisch. Het verzenden van dit formulier zou ertoe leiden dat de volgende gegevens naar de server worden verzonden: myURL=http%3A%2F%2Fwww.example.com. Merk op hoe tekens waar nodig worden geëscaped.

Placeholders

Soms is het nuttig om in de context een aanwijzing te geven over welke vorm de invoergegevens moeten hebben. Dit kan vooral belangrijk zijn als het paginaontwerp geen beschrijvende labels biedt voor elk <input>. Hier komen placeholders om de hoek kijken. Een placeholder is een waarde die laat zien welke vorm de value moet hebben door een voorbeeld van een geldige waarde te tonen, die wordt weergegeven in het invoerveld wanneer de value van het element "" is. Zodra gegevens in het veld worden ingevoerd, verdwijnt de placeholder; als het veld weer wordt leeggemaakt, verschijnt de placeholder opnieuw.

Hier hebben we een url-invoerveld met de placeholder http://www.example.com. Let op hoe de placeholder verdwijnt en weer verschijnt terwijl u de inhoud van het invoerveld wijzigt.

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

Invoergrootte bepalen

U kunt zowel de fysieke lengte van het invoerveld als de minimum- en maximumlengte van de invoertekst beheren.

Fysieke grootte van het invoerelement

De fysieke grootte van het invoerveld kan worden beheerd met het size-attribuut. Hiermee kunt u het aantal tekens opgeven dat het invoerveld tegelijk kan weergeven. In dit voorbeeld is het url-invoerveld bijvoorbeeld 30 tekens breed:

<input id="myURL" name="myURL" type="url" size="30" />

Lengte van de elementwaarde

De size staat los van de lengtebeperking van de ingevoerde URL zelf. U kunt met het minlength-attribuut een minimumlengte, in tekens, opgeven voor de ingevoerde URL; gebruik op vergelijkbare wijze maxlength om de maximumlengte van de ingevoerde URL in te stellen. Als maxLength groter is dan size, zal de inhoud van het invoerveld naar behoefte scrollen om de huidige selectie of het invoegpunt te tonen terwijl de inhoud wordt gewijzigd.

Het onderstaande voorbeeld maakt een 30 tekens brede invoerbox voor URL-adressen, waarbij de inhoud niet korter dan 10 tekens en niet langer dan 80 tekens mag zijn.

<input
  id="myURL"
  name="myURL"
  type="url"
  size="30"
  minlength="10"
  maxlength="80" />

Standaardopties opgeven

Een enkele standaardwaarde opgeven met het value-attribuut

Zoals altijd kunt u een standaardwaarde voor een url-invoerveld opgeven door het value-attribuut in te stellen:

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

Voorgestelde waarden aanbieden

Als u nog een stap verder wilt gaan, kunt u een lijst met standaardopties aanbieden waaruit de gebruiker kan kiezen door het list-attribuut op te geven. Dit beperkt de gebruiker niet tot die opties, maar stelt hem wel in staat om sneller veelgebruikte URL's te kiezen. Dit biedt ook aanwijzingen voor autocomplete. Het list-attribuut geeft de ID op van een <datalist>, die op zijn beurt één <option>-element per voorgestelde waarde bevat; de value van elke option is de bijbehorende voorgestelde waarde voor het URL-invoerveld.

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://voorbeeld.nl/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://voorbeeld.nl/"></option>
  <option value="http://w3.org/"></option>
</datalist>

Met het <datalist>-element en de bijbehorende <option>-elementen op hun plaats, zal de browser de opgegeven waarden aanbieden als mogelijke waarden voor de URL; dit wordt meestal weergegeven als een pop-up of vervolgkeuzemenu met de suggesties. Hoewel de specifieke gebruikerservaring van browser tot browser kan verschillen, verschijnt er doorgaans een vervolgkeuzelijst met voorgestelde URL's wanneer u in het invoerveld klikt. Vervolgens wordt de lijst, terwijl de gebruiker typt, aangepast om alleen overeenkomende waarden te tonen. Elk getypt teken beperkt de lijst verder totdat de gebruiker een keuze maakt of een aangepaste waarde typt.

Labels gebruiken voor voorgestelde waarden

U kunt ervoor kiezen om het label-attribuut op te nemen bij een of alle van uw <option>-elementen om tekstuele labels op te geven. Sommige browsers geven mogelijk alleen de labels weer, terwijl andere zowel het label als de URL weergeven.

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://voorbeeld.nl/" label="dit naslagwerk"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://voorbeeld.nl/" label="Voorbeeld"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

Validatie

Er zijn twee niveaus van inhoudsvalidatie beschikbaar voor url-invoervelden. Ten eerste is er het standaardvalidatieniveau dat voor alle <input>-elementen wordt geboden, dat automatisch controleert of de inhoud voldoet aan de vereisten om een geldige URL te zijn. Maar er is ook de mogelijkheid om extra filtering toe te voegen om ervoor te zorgen dat aan uw eigen specifieke eisen wordt voldaan, als u die heeft.

Basisvalidatie

Browsers die het invoertype url ondersteunen, bieden automatisch validatie om ervoor te zorgen dat alleen tekst die overeenkomt met het standaardformaat voor URL's in het invoerveld wordt ingevoerd.

De syntax van een URL is behoorlijk ingewikkeld. Deze wordt gedefinieerd door WHATWG's URL Living Standard en wordt voor nieuwkomers beschreven in ons artikel What is a URL?

Een URL verplicht maken

Zoals eerder vermeld, hoeft u alleen het required-attribuut aan het invoerveld toe te voegen om een URL-invoer verplicht te maken voordat het formulier kan worden verzonden (u kunt het veld dan niet leeg laten).

Patroonvalidatie

Als de ingevoerde URL verder beperkt moet worden dan alleen "elke tekenreeks die op een URL lijkt", kunt u het pattern-attribuut gebruiken om een reguliere expressie op te geven waaraan de waarde moet voldoen om geldig te zijn.

Voorbeelden

URL-validatie

In dit voorbeeld zorgen we ervoor dat een URL wordt ingevuld met behulp van het required-attribuut en dat de URL zich op voorbeeld.nl bevindt, met behulp van het pattern-attribuut ter illustratie.

HTML

In het url-invoerveld stellen we pattern in op ".*\.voorbeeld.nl.*". Deze reguliere expressie valideert een tekenreeks die bestaat uit een willekeurig aantal tekens, gevolgd door ".voorbeeld.nl", gevolgd door een willekeurig aantal tekens. Omdat de browser zowel het standaard URL-filter als ons aangepaste patroon toepast op de opgegeven tekst, krijgen we een validatie die zegt: "zorg ervoor dat dit een geldige URL is, en dat deze ook .voorbeeld.nl bevat."

Merk op dat een strikter patroon zoals https://developer\.voorbeeld.nl.* robuuster zou zijn, maar dat zou het type="url"-attribuut in dit geval overbodig maken.

Het title-attribuut beschrijft ook het pattern voor gebruikers met ondersteunende technologie.

<form>
  <label for="myURL">
    Enter a url from this site:
    <input
      id="myURL"
      name="myURL"
      type="url"
      required
      pattern=".*\.voorbeeld.nl.*"
      title="URL should include voorbeeld.nl" />
    <span class="validity"></span>
  </label>
  <button>Submit</button>
</form>

CSS

De CSS geeft visuele aanwijzingen om de gebruiker te tonen of de inhoud :valid of :invalid is door een passende content-eigenschap toe te voegen, en bevat alternatieve tekst voor gebruikers met ondersteunende technologie.

input:focus:invalid {
  outline: 2px solid red;
}

input:focus:valid {
  outline: 2px solid green;
}

input + span {
  padding: 0 0.3rem;
}

input:invalid + span::after {
  content: "✖" / "Content is not valid";
  color: red;
}

input:valid + span::after {
  content: "✓" / "Content is valid";
  color: green;
}

Resultaat

Kopieer de URL van deze pagina en plak deze in het invoerveld en u zult een groene omlijning en een groen vinkje zien. Voer een andere URL in die niet voorbeeld.nl bevat, of een ongeldige URL, en u zult een rode omlijning en een rood kruis zien.

Bekijk de secties Patroonvalidatie en URL-invoervelden gebruiken voor andere voorbeelden.

Technische samenvatting

Zie ook

• <input>
• <input type="tel">
• <input type="email">