HTML5 input element type: email and url Introduction

Comments: You may be aware of the HTML5 improvements. Next I will introduce two new input element types: email and url. Let's take a look at their benefits with the Code. If you are interested, refer to the previous blog post. We have discussed some HTML5 improvements, such as placeholder, prefetching, and webStorage, the following describes two new input element types: email and url. Let's follow the code to see their benefits:

Syntax format:
The new input type attribute replaces text with email or url:

The Code is as follows:
<! -- Email, non-@ + non-@ symbol, you can also use other,
For example, [a-zA-Z0-9] {3, 30} @ [a-zA-Z0-9] + \ w * \. (com | cn | org | net) -->
<Input type = "email" pattern = "[^ @] * @ [^ @] *" value = "">
<! -- Url -->
<Input type = "url" value = "">


Using the pattern attribute field specific to HTML5, you can provide a regular expression to verify the format of the email and url address. We will discuss this topic in another article.

Advantages
-You can customize special css styles. input [type = email]
-You can customize special css styles. input [type = url]
-More semantic definitions can be made.
-Mobile app Adaptability: A special keyboard is displayed for the email and url in the mobile browser. You do not need to switch between them manually.

At first, I was disgusted with adding Redundant input types. But after thinking deeply, I think it is a good way to improve user experience. What do you think?