<input type="text" pattern="[email regex]">
<input type="email" pattern="[email regex]">
As both ways of validating email addresses has their pros and cons it is up to you to decide which one to use. You should not try to use them both at the same time as this might induce a clash in browsers that support both features. Using type=”email” has the advantage that it is semantically correct both using the pattern attribute has the advantage that there are several easy-to-use polyfills on the web which ensures support for a greater range of audience.
pattern attribute shouldn't be necessary on any browser which fully conforms to the HTML5 specification on how the various
type states are implemented.
For example, this is how the
input element should be implemented:
multipleattribute isn't specified...
While the value of the element is neither the empty string nor a single valid e-mail address, the element is suffering from a type mismatch.If the
multipleattribute is specified...
The value attribute, if specified, must have a value that is a valid e-mail address list.
In really basic terms this means that the element's
value will return empty if an empty string nor valid email address has been entered into it. This means that the browser should attempt to validate the email address where no
pattern attribute is present. If the
pattern attribute is present, both the browser and the specified regular expression would be taken into account.
Despite not being necessary, you may still want to use the
pattern attribute to only catch certain varieties of input. For instance,
admin@mailserver1 is a valid email address (according to Wikipedia), and you may want to explicitly only allow email addresses which have a TLD. The same applies to region-specific phone numbers.