HTML5 Email Input Type

Now a days, maximum web sites have newsletter subscription option to their users to subscribe. You can easily find "email" field for newsletter option which is common. The "email" field requires very specific unique input pattern as you know "email" has an @ and ending with ".com" or ".net" or something else.

If you have already worked with earlier versions of HTML, you had to write javascript regex object to match the patter for "email" input. HTML5 makes your development life simple, only you need to set type as "email" for input textbox as given below.

Syntax

<input id="email" type="email"/>
Here is a simple demo.

As of writing, only few browsers provide support for this new feature.

Browser Supports

If you want to make your textbox self explanatory, you can use additional attribute "Placeholder" by assigning meaningful text. The "placeholder", in the email textbox example,will looks like this:

Syntax

<input id="email" type="email" placeholder="Enter Valid Email"/>
Here is a simple demo.
Enter email address:   

This type are not for data validation, at least not yet. You will have to use the same regular expression to do so.

Example

<!DOCTYPE html>
<html>
<head>
  <!-- www.techstrikers.com -->
  <meta charset="utf-8">
  <title>HTML5 Email Example</title>
</head>
<body bgcolor="#bnde45">
<fieldset>
<legend>HTML5 Email Type</legend>
<table>
  <tr>
      <td><form action="#">
	  Enter email address: <input type="email" name="val" required/> 
	  <input type="submit"/></form></td></tr>
  </form></td></tr>
</table>
</fieldset>
<br/>
<fieldset>
<legend>HTML5 Email Type With List</legend>
<table>
  <tr>
      <td><form action="#">Choose email address: 
          <input type="email" list="email-choices" name="val" required/> 
		  <input type="submit"/>
          <datalist id="email-choices">
            <option label="jimi Scott" value="jimi@test.com">
            <option label="Peter" value="peter@example.com">
            <option label="Martin Paul" value="martin@example.com">
            <option label="Lee Binny" value="binny@example.com">
          </datalist>
          </form></td></tr>
  </form></td></tr>
</table>
</fieldset>

</body>
</html>
See Live Example

In above example, you have seen how input type "email" automatically validate email pattern. You may think what if you want to add custom email pattern? Well, an alternative solution is available. What you have to do is just use simple input type="text" with the pattern attribute, as shown here.

Syntax

<input id="email" type="text" placeholder="Enter Valid Email" 
pattern="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
Here is a simple demo.
Enter email address:   

Example

<!DOCTYPE html>
<html>
<head>
  <!-- www.techstrikers.com -->
  <meta charset="utf-8">
  <title>HTML5 Custom Email Pattern Example</title>
</head>
<body bgcolor="#bnde45">
<fieldset>
<legend>HTML5 Custom Email Pattern</legend>
<table>
  <tr>
      <td><form action="#">Enter email address: 
	  <input placeholder="Enter Valid Email" type="text" name="val" 
	  pattern="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/> 
	  <input type="submit"/></form></td></tr>
  </form></td></tr>
</table>
</fieldset>
</body>
</html>
See Live Example

In some cases you may need to skip the validation in your form. But the question is can you do it? The answer is "yes" you can. The solution is you have to continue using type="email" with the "formnovalidate" attribute on the submit button as shown here. When you add "formnovalidate" attribute in "submit" button, it will skip the validation.

Syntax

<input id="email" type="email" placeholder="Enter Valid Email"/>
Here is a simple demo.
Enter email address:  

Example

<!DOCTYPE html>
<html>
<head>
  <!-- www.techstrikers.com -->
  <meta charset="utf-8">
  <title>HTML5 No Validation Example</title>
</head>
<body bgcolor="#bnde45">
<fieldset>
<legend>HTML5 No Validation</legend>
<table>
  <tr>
      <td><form action="#">Enter email address: 
	  <input placeholder="Enter Valid Email" type="email" name="val"/> 
	  <input type="submit" formnovalidate/></form></td></tr>
  </form></td></tr>
</table>
</fieldset>
</body>
</html>
See Live Example