Vóór de komst van HTML5 was er meer werk nodig om de e-mailadressen te valideren met behulp van Javascript. Dat is nu allemaal niet meer nodig met het nieuwe HTML5-invoertype e-mail.
Het invoerelement e-mail is speciaal ontworpen om e-mailadressen te verwerken en te valideren. Afhankelijk van de browser, zal het de gebruiker waarschuwen dat de ingevoerde informatie niet correct is en het formulier zal niet verzenden totdat de gebruiker correcties aanbrengt.
Voorbeeldcode:
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">Algemeen gebruik
Sla de volgende code op in een tekstdocument en open het met een webbrowser.
<!DOCTYPE html><html><head> <style> body { padding-top: 200px; padding-left: 300px } </style></head><body> <p>Please Provide Your Current E-Mail Address <form> <input type="email"> </form></body>Zo zou de pagina eruit moeten zien:
Als u meerdere adressen tegelijk wilt verzamelen, kunt u het multiple-attribuut toevoegen:
<input type="email" multiple>De gebruiker kan nu een of meer adressen invoeren, gescheiden door een komma.
Validatie
Browsers die het invoertype e-mail ondersteunen, bieden op verschillende manieren ondersteuning voor validatie. Alle browsers gebruiken echter een gemeenschappelijk validatiealgoritme volgens dit patroon:
De minimumvereisten zijn de symbolen @ en . en een gebrek aan spaties tussen de tekens. Het is niet mogelijk te controleren of het opgegeven adres bestaat. Dit is een kwestie die door uw server-side script moet worden afgehandeld. Een goede manier om te testen op geldige email adressen is om een link naar het email adres te sturen die, wanneer erop geklikt wordt, bevestigt dat het email adres geldig is.
Mozilla Firefox
Zodra de gebruiker klaar is met typen en naar een ander element gaat, zal Firefox de ingevoerde gegevens controleren. Als het geen geldig e-mailadres is, verschijnt er een rode rand om de invoer, zoals hieronder te zien is:
Als de gebruiker op de verzendknop klikt zonder het ingevoerde e-mailadres te wijzigen, wordt het formulier niet verzonden en verschijnt er een tooltip met de foutmelding bij de invoer.
Google Chrome
Google Chrome biedt geen visuele ondersteuning wanneer de gebruiker ongeldige gegevens invoert.
Bij het invoeren verschijnt echter een foutmelding met een tooltip die aangeeft wat de gebruiker moet invoeren.
Als je de gebruiker een aangepaste foutmelding wilt geven, kun je het title-attribuut gebruiken:
<input type="email" title="Please Provide A Valid Email Address !">Browserondersteuning
Het invoertype e-mail wordt breed ondersteund in alle moderne browsers. Kijk in de onderstaande tabel voor de minimaal ondersteunde versie. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
Voor details over browserondersteuning, zie: Kan ik het invoertype e-mail gebruiken
In het algemeen, als de gebruikte browserversie dit invoertype niet ondersteunt, wordt in plaats daarvan een invoertype tekst getoond. Als u gegevens verwerkt die aan de serverkant zijn ingediend, moet u de gegevens zelf valideren voordat u ze accepteert.
Op Android- en IOS-platforms bevat het toetsenbord automatisch de toetsen @ en . als het invoertype e-mail is.
Waarom dit nieuwe invoertype gebruiken
- Het invoertype e-mail maakt webontwikkeling eenvoudiger omdat het validatiewerk door de browser wordt gedaan. Als het vereiste attribuut is gespecificeerd, accepteert de browser niet dat het formulier wordt verzonden.
- U kunt ervoor kiezen om alle invoertype e-mail op uw website in een specifieke stijl op te maken, zodat ze over de hele linie in een standaardstijl verschijnen.
- Mobiele apparaten kunnen het zachte toetsenbord aanpassen aan de e-mailinvoer (met de @ en . gemakkelijk toegankelijk
Toegepaste CSS
Om een bepaalde stijl alleen toe te passen op e-mail invoervelden, gebruikt u de attribuut selector als volgt:
input{ background-color:#ccc;}Demo
Zie ook
- Hoe maak je een telefooninvoerveld in HTML5
- Hoe krijg je de waarde van een selectievakje bij het indienen van een formulier