Email Input Type: HTML5

Lets look at email input type of HTML5 forms.

form-input-type-email-type-html5

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]

YouTube Link: https://www.youtube.com/watch?v=nxMBsVw8LXw [Watch the Video In Full Screen.]



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.