Various keyboards in the mobile terminal

HTML5 introduces a large number of new input types. These new input types can prompt the browser as to what type of keyboard layout the on-screen keyboard should display. Users can enter the required information more easily without switching keyboards, and only see the corresponding keys for that input type.

The type is url for entering the URL. It must start with a valid URI scheme, such as http://, ftp://, or mailto:. as follows:

Insert picture description here

The type is tel for entering the phone number. It does not perform a specific validation syntax, so if you want to ensure a specific format, you can use the pattern attribute. as follows:

Insert picture description here

The type is email for entering the email address, and prompts that @ should be displayed by default on the keyboard. If you need users to provide multiple email addresses, you can add multiple attributes. as follows:

Insert picture description here

The type is search a text input field, and its style is consistent with the search field of the platform. as follows:

Insert picture description here

Type is number for digital input, which can be any reasonable integer or floating point value. as follows:

Insert picture description here

The type is range for number input, but unlike the number input type, its value is not so important. It is displayed to the user in the form of a slider control. as follows:

Insert picture description here

The type is datetime-local for inputting date and time values, and the time zone provided is the local time zone. as follows:

Insert picture description here

The type is date, which is used to enter only the date without providing the time zone. as follows:

Insert picture description here

The type is time for only inputting the time, without providing the time zone. as follows:

Insert picture description here

The type is week, which is used to enter only the week without providing the time zone. as follows:

Insert picture description here

The type is month to enter only the month without providing the time zone. as follows:

Insert picture description here

The type is color for selecting colors. as follows:

Insert picture description here

Guess you like

Origin blog.csdn.net/wu_xianqiang/article/details/107399782