The input type has been widely used before H5, but H5 actually adds many new attributes and validation, providing convenience and bringing more security to our development. Today we will briefly talk about the new INPUT attribute and usage in H5.

Browser support:

\

(Image from W3school)

Email

E-mail: <input type="email" name="user_email" />
Copy the code

\

When we use email, we will detect whether the input format is correct or not. If we use Iphone, we can use the touch screen keyboard to complete the input of @. However, it should be made clear that I use Google browser when TESTING. There was an awkward situation when I used Safari:

\

So we all know that Internet Explorer is the least compatible browser for H5, so when I tested it, it worked fine:

\

Generally we default to Firefox is no problem:

\

Ok, I’m on email may use a different browser to implement effects respectively, several purposes, how was the first test the compatibility, and have a look at the practicability of the H5 is so good, now here is very good, so let’s all use Google to test the other new type.

URL

Homepage: <input type="url" name="user_url" />
Copy the code

\

number

Points: <input type="number" name="points" min="1" max="10" />
Copy the code

\

Ps: What needs to be explained here is that the number provides a limit condition for the maximum and minimum value, which can better meet the operation when we do the limit.

\

(Image from W3school)

Range

<input type="range" name="points" min="1" max="10" />
Copy the code

Ps: The same is true here, given several common attributes:

\

(Image from W3school)

Date

It provides the following common types:

Date - Day, month, and year Month - Month, and year Week - Week, and year Time - Time (hour and minute) DateTime - Time, day, month, and year (UTC time) datetime-local - Select time, day, month, year (local time)Copy the code

Let’s try the results separately:

Date:

\

\

The month:

\

Week:

\

Time:

\

Datetime:

\

Ps: I use here when we have a problem, have no choice, just their input, and it is no listen for an event, that is to say, you can enter any text can be verify by, I began to suspect that is a question of browser incompatibility, I try to use other browsers, but the result seems to be the same. We don’t know what caused it.

Datetime – local:

The same is true without any choice. I don’t know the reason. I will update this section later and try to find out the reason.

There’s a good chance I’m not doing it right.

Search:

This is just a normal search field. I didn’t find anything special.

\