Summary -

In this topic, we described about the below sections -

The email input type allows the user to enter e-mail address. It is extremely comparable to a standard text input type. However, if it is used in combination with the required attribute, the browser may glance for the patterns to ensure a properly formatted e-mail address should be submitted.

Obviously, this checking is simple, maybe looking for an @ character or a period (.) and not permitting spaces. Chrome 5+, Firefox 4+, Opera 9.5+, and Internet Explorer 10 have previously implemented this basic validation. The browser goes as much as introducing the user with an error message if not supporting.

If the e-mail address submitted isn’t valid. We can style the field for the value entered using the :valid, :invalid or :required pseudo classes.

Syntax -

 <input type="email" name="email">

Example -

Below example explained how to create the input field of type e-mail address.
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Email Input Type</title>
       <style>
         input[type="email"]:valid{
         outline: 3px solid green;
         }
         input[type="email"]:invalid{
         outline: 3px solid red;
         }                   
       </style>
       <script>
          function getValue() {
          var email = document.getElementById("myemail").value;
          alert(email); 
         }                      
       </script>
   </head>
   <body>
       <form>
          <label for="myemail">Enter Email Address:</label>
          <input type="email" id="myemail" required> 
          <button type="button" onclick="getValue();">Get Value</button>
       </form>
   </body> 
</html>

Output -


Tip! We can style the email input field for various validation states, when a value is entered using the :valid, :invalid or :required pseudo-classes.
Note! The validation for the email input (i.e. type="email") is endorsed by each major browser like Safari, Opera, Firefox, Chrome, Internet Explorer 10 and above.
Browser Support

The following browsers and corresponding versions in the table that completely supports the email type.

Input Type Chrome Edge Firefox Safari Opera
Type="email" 5.0 10.0 4.0 5.0 10.1