Table of Content
The <input type=”email”> defines a field for an email address. The input value is automatically validated to ensure it is a properly formatted email address.
<input> email is used to let the user enter and edit an email address or a list of email addresses.
To define an email field that allows multiple email addresses, add the “multiple” attribute.
Define a field for an email address (validates automatically when submitted):
<input type="email" name="emailaddress">
The input value is automatically validated to ensure that it’s either empty or a properly-formatted email address (or list of addresses) before the form can be submitted. The :valid and :invalid CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid email address or not.
On browsers that don’t support inputs of type email, an email input falls back to being a standard text input.
What is the value in the email input tag?
The <input> element’s value attribute contains a DOMString which is automatically validated as conforming to email syntax. More specifically, there are three possible value formats that will pass validation:
An empty string (“”) indicating that the user did not enter a value or that the value was removed.
A single properly-formed email address. This doesn’t necessarily mean the e-mail address exists, but it is at least formatted correctly. In simple terms, this means firstname.lastname@example.org. There’s more to it than that, of course; see Validation for a regular expression that matches the e-mail address validation algorithm.
If and only if the multiple attribute is specified, the value can be a list of properly-formed email addresses separated by commas. Any trailing and leading whitespace is removed from each address in the list.
What are the additional email input attributes?
In addition to the attributes that operate on all <input> elements regardless of their type, email inputs support the following attributes: maxlength, minlength, multiple, pattern, placeholder, readonly, size, and spellcheck.
How to use the email input in HTML5?
E-mail addresses are among the most frequently-inputted textual data forms on the web; they’re used when logging into web sites, when requesting information, to allow order confirmation, for webmail, and so forth. As such, the email input type can make your job as a web developer much easier since it can help simplify your work when building the user interface and logic for e-mail addresses.
When you create an email input with the proper type value, email, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate email address. This can help avoid cases in which the user mistypes their address, or provides an invalid address.
It’s important, however, to note that this is not enough to ensure that the specified text is an email address which actually exists, corresponds to the user of the site, or is acceptable in any other way. It simply ensures that the value of the field is properly formatted to be an email address.
How to validate an email address?
One of the new values to the type attribute is email. Using this type of field instead of the regular text field the browser uses a regular expression to check that the user has in fact typed in an email address. Does this means that the user cannot type in a fake email address? No. But you do not have to worry that the user types in a comma instead of a period or that she accidentally types a space. No matter what the user is going to submit, it is going to look like an email address.
<form> <input type="email" required /> <br /> <input type="submit" value="Submit Now!"> </form>
Some browsers only look for the @ and other browsers look for at pattern consisting of a @ followed by at least one letter and a dot.
As of right now, this is not supported by e.g. Internet Explorer 9.0 and previous version or by the Android browser. This means that in order to have valid email validation for these browsers you will have to make a workaround to have this feature working in all browsers. This does not mean that you should not implement the attribute email, because if the browser does not recognize type=”email” it will just treat is as type=”text” and render it as plain text.