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:
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:
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:
The type is search a text input field, and its style is consistent with the search field of the platform. as follows:
Type is number for digital input, which can be any reasonable integer or floating point value. as follows:
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:
The type is datetime-local for inputting date and time values, and the time zone provided is the local time zone. as follows:
The type is date, which is used to enter only the date without providing the time zone. as follows:
The type is time for only inputting the time, without providing the time zone. as follows:
The type is week, which is used to enter only the week without providing the time zone. as follows:
The type is month to enter only the month without providing the time zone. as follows:
The type is color for selecting colors. as follows: