Lets look at email input type of HTML5 forms.
In this video, we illustrate how you can implement simple email validation using email input type.
HTML file
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < !DOCTYPE html> <html> <head> <title>Email input type: HTML5</title> <link href="myStyle.css" rel="stylesheet" /> </head> <body> <form> <label for="mail">Email: </label> <input type="email"/><br /> <input type="submit"/> </form> </body> </html> |
Here we have an input field of type email. We haven’t implemented complicated JavaScript to check if the entered text actually contains a @ symbol and a valid TLD. email input type checks for all these small requirements to pass it as an email address.
Form Input Type – email: HTML5
[youtube https://www.youtube.com/watch?v=nxMBsVw8LXw]
Note:
It doesn’t validate the email address completely. Infact, it doesn’t check if the entered email address is actually a real email address or a dummy one. It simply checks for minimal thing in the entered text to determine if it is an email address or not – like @ symbol and a valid TLD(Top Level Domain) extension.
Also on mobile devices, when it encounters these email input type, user is prompted with keypad that aids in entering email address – like the @ symbol present on the same screen and need not to navigate to special symbols section on the keypad.