When we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. This makes us that much closer to built-in form validation and we don’t have to write JavaScript validators. We can’t 100% rely on this just yet, for browser support reasons. In older browsers that do not comply with the “email” type, they’ll simply fall back to a regular textbox. Please note that all current browsers are a bit picky when it comes to which elements and attributes they do and do not support. For example, Opera supports email validation, so as long the name attribute is specified. However, it does not support the placeholder attribute. Because of this it is a good idea to not completely depend on this form of validation just yet, but you should still feel free to use it as an additive feature. Code:
<form method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button> Submit Form </button>
</form>