Het element <input type="email">

Waarde

Het value-attribuut van het <input>-element bevat een string die automatisch wordt gevalideerd op conformiteit met de syntaxis van e-mailadressen. Meer specifiek zijn er drie mogelijke waardeformaten die de validatie doorstaan:

1. Een lege string ("") die aangeeft dat de gebruiker geen waarde heeft ingevoerd of dat de waarde is verwijderd.
2. Eén correct gevormd e-mailadres. Dit betekent niet noodzakelijk dat het e-mailadres bestaat, maar wel dat het in ieder geval correct is opgemaakt. Dit betekent gebruikersnaam@domein of gebruikersnaam@domein.tld. Er komt uiteraard meer bij kijken; zie Validatie voor een reguliere expressie die overeenkomt met het validatie-algoritme voor e-mailadressen.
3. Alleen wanneer het multiple-attribuut is opgegeven, kan de waarde een lijst zijn van door komma's gescheiden, correct gevormde e-mailadressen. Voorloop- en volgspaties worden uit elk adres in de lijst verwijderd.

Zie Validatie voor details over hoe e-mailadressen worden gevalideerd om te zorgen dat ze correct zijn opgemaakt.

Aanvullende attributen

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

maxlength

De maximale stringlengte (gemeten in UTF-16-code-eenheden) die de gebruiker in het email-invoerveld 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 email-invoerveld geen maximale lengte. 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-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 email-invoerveld kan invoeren. Dit moet een niet-negatief geheel getal zijn dat kleiner 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 het email-invoerveld geen minimale lengte.

Het invoerveld 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.

multiple

Een booleaans attribuut dat, indien aanwezig, aangeeft dat de gebruiker een lijst van meerdere e-mailadressen kan invoeren, gescheiden door komma's en, optioneel, spatietekens. Zie Meerdere e-mailadressen toestaan voor een voorbeeld, of HTML-attribuut: multiple voor meer details.

pattern

Het pattern-attribuut is, indien opgegeven, een reguliere expressie waaraan de value van het invoerveld 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 handleiding 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 het gedeelte Patroonvalidatie voor details en een voorbeeld.

placeholder

Het placeholder-attribuut is een string 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 toelichtend bericht. De tekst mag geen regeleindetekens of nieuweregeltekens bevatten.

Als de inhoud van het besturingselement één richting heeft (LTR of RTL) maar de placeholder in de tegenovergestelde richting moet worden weergegeven, kunt u opmaaktekens van het Unicode bidirectionele algoritme gebruiken om de richting 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 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 tekenbreedtes variëren, kan dit al dan niet exact zijn en mag er niet op worden vertrouwd dat dit zo is; het resulterende invoerveld kan smaller of breder zijn dan het opgegeven aantal tekens, afhankelijk van de gebruikte tekens en het gebruikte lettertype (de 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 maxlength-attribuut om een bovengrens voor de lengte van de invoergegevens in te stellen.

E-mailinvoervelden gebruiken

E-mailadressen behoren tot de meest ingevoerde tekstuele gegevensvormen op het web; ze worden gebruikt bij het inloggen op websites, bij het aanvragen van informatie, om bestelbevestigingen mogelijk te maken, voor webmail, enzovoort. Het email-invoertype kan uw werk als webontwikkelaar dan ook veel eenvoudiger maken, doordat het uw werk vereenvoudigt bij het bouwen van de gebruikersinterface en logica voor e-mailadressen. Wanneer u een e-mailinvoerveld maakt met de juiste type-waarde, email, krijgt u automatische validatie dat de ingevoerde tekst ten minste de juiste vorm heeft om mogelijk een legitiem e-mailadres te zijn. Dit kan helpen situaties te voorkomen waarin de gebruiker zijn adres verkeerd typt of een ongeldig adres opgeeft.

Het is echter belangrijk om te beseffen dat dit niet voldoende is om te garanderen dat de opgegeven tekst een e-mailadres is dat daadwerkelijk bestaat, overeenkomt met de gebruiker van de site, of op enige andere manier aanvaardbaar is. Het zorgt er alleen voor dat de waarde van het veld correct is opgemaakt om een e-mailadres te zijn.

Een basaal e-mailinvoerveld

Momenteel implementeren alle browsers die dit element ondersteunen het als een standaard tekstinvoerveld met basale validatiefuncties. De specificatie geeft browsers hierin echter wel enige vrijheid. Het element zou bijvoorbeeld geïntegreerd kunnen worden met het ingebouwde adresboek van het apparaat van de gebruiker, om het kiezen van e-mailadressen uit die lijst mogelijk te maken. In zijn meest basale vorm kan een email-invoerveld als volgt worden geïmplementeerd:

<input id="emailAddress" type="email" />

Merk op dat het als geldig wordt beschouwd wanneer het leeg is en wanneer één correct opgemaakt e-mailadres is ingevoerd, maar anders niet als geldig wordt beschouwd. Door het required-attribuut toe te voegen, worden alleen correct gevormde e-mailadressen toegestaan; het invoerveld wordt niet langer als geldig beschouwd wanneer het leeg is.

Meerdere e-mailadressen toestaan

Door het booleaanse attribuut multiple toe te voegen, kan het invoerveld worden geconfigureerd om meerdere e-mailadressen te accepteren.

<input id="emailAddress" type="email" multiple />

Het invoerveld wordt nu als geldig beschouwd wanneer er één e-mailadres wordt ingevoerd, of wanneer er een willekeurig aantal e-mailadressen aanwezig is, gescheiden door komma's en, optioneel, een aantal spatietekens.

Enkele voorbeelden van geldige strings wanneer multiple is opgegeven:

• ""
• "me@example"
• "me@example.org"
• "me@example.org,you@example.org"
• "me@example.org, you@example.org"
• "me@example.org,you@example.org, us@example.org"

Enkele voorbeelden van ongeldige strings:

• ","
• "me"
• "me@example.org you@example.org"

Placeholders

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

Hier hebben we een email-invoerveld met de placeholder sophie@example.com. Merk op hoe de placeholder verdwijnt en weer verschijnt terwijl u de inhoud van het invoerveld bewerkt.

<input type="email" placeholder="sophie@example.com" />

De invoergrootte beheren

U kunt niet alleen de fysieke lengte van het invoervak beheren, maar ook de minimale en maximale toegestane lengtes voor de invoertekst zelf.

Fysieke grootte van het invoerelement

De fysieke grootte van het invoervak kan worden beheerd met het size-attribuut. Hiermee kunt u het aantal tekens opgeven dat het invoervak tegelijk kan weergeven. In dit voorbeeld is het bewerkingsvak voor email 15 tekens breed:

<input type="email" size="15" />

Lengte van de elementwaarde

De size staat los van de lengtebeperking op het ingevoerde e-mailadres zelf, zodat u velden in een kleine ruimte kunt laten passen terwijl langere e-mailadresstrings toch kunnen worden ingevoerd. U kunt een minimale lengte, in tekens, opgeven voor het ingevoerde e-mailadres met het minlength-attribuut; gebruik op vergelijkbare wijze maxlength om de maximale lengte van het ingevoerde e-mailadres in te stellen.

Het onderstaande voorbeeld maakt een e-mailadresinvoervak van 32 tekens breed, waarbij de inhoud niet korter dan 3 tekens en niet langer dan 64 tekens mag zijn.

<input type="email" size="32" minlength="3" maxlength="64" />

Standaardopties opgeven

Eén standaardwaarde opgeven met het value-attribuut

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

<input type="email" value="default@example.com" />

Voorgestelde waarden aanbieden

Om nog een stap verder te 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 e-mailadressen te selecteren. Dit biedt ook hints 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 e-mailinvoervak.

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

Met het <datalist>-element en de bijbehorende <option>-elementen op hun plaats, biedt de browser de opgegeven waarden aan als mogelijke waarden voor het e-mailadres; dit wordt doorgaans gepresenteerd als een pop-up- of vervolgkeuzemenu met de suggesties. Hoewel de specifieke gebruikerservaring van browser tot browser kan verschillen, zorgt het klikken in het invoervak doorgaans voor een vervolgkeuzelijst met voorgestelde e-mailadressen. Terwijl de gebruiker vervolgens typt, wordt de lijst gefilterd om alleen overeenkomende waarden te tonen. Elk getypt teken versmalt de lijst totdat de gebruiker een keuze maakt of een aangepaste waarde intypt.

Validatie

Er zijn twee niveaus van contentvalidatie beschikbaar voor email-invoervelden. Ten eerste is er het standaardniveau van validatie dat voor alle <input>-elementen wordt geboden, dat automatisch controleert of de inhoud voldoet aan de vereisten voor een geldig e-mailadres. Maar er is ook de optie om extra filtering toe te voegen om ervoor te zorgen dat aan uw eigen specifieke vereisten wordt voldaan, indien u die heeft.

Basisvalidatie

Browsers bieden automatisch validatie om ervoor te zorgen dat alleen tekst die overeenkomt met de standaardindeling voor internet-e-mailadressen in het invoervak wordt ingevoerd. Browsers gebruiken een algoritme dat gelijkwaardig is aan de volgende reguliere expressie:

/^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?(?:\.[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?)*$/i;

Om meer te leren over hoe formuliervalidatie werkt en hoe u gebruik kunt maken van de CSS-eigenschappen :valid en :invalid om het invoerveld te stylen op basis van of de huidige waarde geldig is, zie Formuliergegevensvalidatie.

Patroonvalidatie

Als het ingevoerde e-mailadres verder beperkt moet worden dan alleen "elke string die op een e-mailadres lijkt", kunt u het pattern-attribuut gebruiken om een reguliere expressie op te geven waaraan de waarde moet voldoen om geldig te zijn. Als het multiple-attribuut is opgegeven, moet elk afzonderlijk item in de door komma's gescheiden lijst met waarden overeenkomen met de reguliere expressie.

Stel bijvoorbeeld dat u een pagina bouwt voor medewerkers van Best Startup Ever, Inc., waarmee zij contact kunnen opnemen met hun IT-afdeling voor hulp. In ons vereenvoudigde formulier moet de gebruiker zijn e-mailadres invoeren en een bericht waarin het probleem wordt beschreven waarbij hij hulp nodig heeft. We willen niet alleen garanderen dat de gebruiker een geldig e-mailadres opgeeft, maar om veiligheidsredenen eisen we ook dat het adres een intern bedrijfs-e-mailadres is.

Aangezien invoervelden van het type email valideren aan zowel de standaard e-mailadresvalidatie als het opgegeven pattern, kunt u dit eenvoudig implementeren. Laten we eens kijken hoe:

body {
  font: 16px sans-serif;
}

.emailBox {
  padding-bottom: 20px;
}

.messageBox {
  padding-bottom: 20px;
}

label {
  line-height: 22px;
}

label::after {
  content: ":";
}

<form>
  <div class="emailBox">
    <label for="emailAddress">Your email address</label><br />
    <input
      id="emailAddress"
      type="email"
      size="64"
      maxlength="64"
      required
      placeholder="username@beststartupever.com"
      pattern=".+@beststartupever\.com"
      title="Please provide only a Best Startup Ever corporate email address" />
  </div>

  <div class="messageBox">
    <label for="message">Request</label><br />
    <textarea
      id="message"
      cols="80"
      rows="8"
      required
      placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea>
  </div>
  <input type="submit" value="Send Request" />
</form>

Ons <form>-element bevat één <input> van het type email voor het e-mailadres van de gebruiker, een <textarea> om het bericht voor IT in te voeren, en een <input> van het type "submit", dat een knop maakt om het formulier te verzenden. Elk tekstinvoervak heeft een bijbehorend <label>-element, zodat de gebruiker weet wat er van hem wordt verwacht.

Laten we eens nader kijken naar het invoervak voor het e-mailadres. De attributen size en maxlength staan beide op 64, om ruimte te bieden voor een e-mailadres van 64 tekens, en om het aantal daadwerkelijk in te voeren tekens tot maximaal 64 te beperken. Het required-attribuut is opgegeven, zodat het verplicht is een geldig e-mailadres op te geven.

Er wordt een passende placeholder opgegeven — username@beststartupever.com — om te demonstreren wat een geldige invoer inhoudt. Deze string laat zowel zien dat er een e-mailadres moet worden ingevoerd, als suggereert dat het een bedrijfsaccount bij beststartupever.com moet zijn. Dit komt bovenop het feit dat het gebruik van type email de tekst zal valideren om te controleren of deze is opgemaakt als een e-mailadres. Als de tekst in het invoervak geen e-mailadres is, krijgt u een foutmelding die er ongeveer zo uitziet:

Als we het hierbij zouden laten, zouden we in ieder geval valideren op legitieme e-mailadressen. Maar we willen nog een stap verder gaan: we willen zeker weten dat het e-mailadres daadwerkelijk de vorm [gebruikersnaam]@beststartupever.com heeft. Hier gebruiken we pattern voor. We stellen pattern in op .+@beststartupever.com. Deze reguliere expressie vraagt om een string die bestaat uit ten minste één teken van welke soort dan ook, gevolgd door een "@" en vervolgens de domeinnaam "beststartupever.com".

Merk op dat dit bij lange na geen adequaat filter is voor geldige e-mailadressen; het zou dingen als " @beststartupever.com" (let op de spatie ervoor) of "@@beststartupever.com" toestaan, terwijl geen van beide geldig is. De browser voert echter zowel het standaard e-mailadresfilter als ons aangepaste patroon uit op de opgegeven tekst. Het resultaat is een validatie die zegt: "zorg dat dit op een geldig e-mailadres lijkt, en als dat zo is, zorg dat het ook een beststartupever.com-adres is."

Het is raadzaam om het title-attribuut samen met pattern te gebruiken. Als u dit doet, moet de title het patroon beschrijven. Dat wil zeggen: het moet uitleggen welke indeling de gegevens moeten hebben, in plaats van andere informatie. Dit komt doordat de title mogelijk wordt weergegeven of uitgesproken als onderdeel van een validatiefoutmelding. De browser kan bijvoorbeeld het bericht "The entered text doesn't match the required pattern." tonen, gevolgd door uw opgegeven title. Als uw title iets is als "Email address", zou het resultaat het bericht "The entered text doesn't match the required pattern. Email address" zijn, wat niet erg zinvol is.

Daarom geven we in plaats daarvan de string "Please provide only a Best Startup Ever corporate email address" op. Door dat te doen, kan het resulterende volledige foutbericht zoiets zijn als "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address."

Voorbeelden

Hier hebben we een e-mailinvoerveld met de ID emailAddress, dat maximaal 256 tekens lang mag zijn. Het invoervak zelf is fysiek 64 tekens breed en toont de tekst user@example.gov als placeholder wanneer het veld leeg is. Daarnaast is het vak, door gebruik van het multiple-attribuut, geconfigureerd om de gebruiker nul of meer e-mailadressen te laten invoeren, gescheiden door komma's, zoals beschreven in Meerdere e-mailadressen toestaan. Als laatste toevoeging bevat het list-attribuut de ID van een <datalist>, waarvan de <option>-elementen een reeks voorgestelde waarden opgeven waaruit de gebruiker kan kiezen.

Als extra toevoeging wordt het <label>-element gebruikt om een label voor het e-mailinvoervak vast te stellen, waarbij het for-attribuut verwijst naar de emailAddress-ID van het <input>-element. Door de twee elementen op deze manier aan elkaar te koppelen, krijgt het invoerveld de focus wanneer op het label wordt geklikt.

<label for="emailAddress">Email</label><br />
<input
  id="emailAddress"
  type="email"
  placeholder="user@example.gov"
  list="defaultEmails"
  size="64"
  maxlength="256"
  multiple />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

Technische samenvatting

Zie ook

• <input>
• <input type="tel">
• <input type="url">
• list
• placeholder