Improve the mobile input experience by using the HTML5 input type, html5input

Improve the mobile input experience by using the HTML5 input type, html5input
Use HTML5 input to improve The Mobile Input Experience. Original article: Using HTML5 input Types to Enhance The Mobile Browsing Experience

 

Note:In this article, iOS screens are captured using iPhone 5 and Safari. Android screens are captured by running Android4.1 on virtual devices and their standby web browsers.

Email input type

Keyboard for IOS (left) and Android (right) email input

The email type. iOS and Android browsers both display a slightly customized keyboard. Note that the shortened Space key exists and the @ and period (.) keys are added to the bottom line of the iOS keyboard. On Android, the standard comma key will appear on the left of the Space key, which has been replaced by a @ key.

<Input type = "email" name = "email">

 

URL input type

IOS URL input Keyboard

The url input type can be used to help users enter the url. On iOS, all space keys have been replaced with the period (.) and forward slash (/) keys, and a special. com key.

My tests show that the Android keyboard has not changed.

<input type="url" name="url">

Telephone number input type

IOS (left) and Android (right) Phone input Keyboard

When the tel input type is used, both iOS and Android are prompted to display the dial-up keyboard instead of the standard keyboard.

<input type="tel" name="tel">

Numeric input type

IOS (left) and Android (right) numeric input keyboards

The number input type prompts iOS to display numbers and punctuation on the keyboard. The Android browser starts a keyboard similar to displaying phone input.

<input type="number" name="number">

Date input type

IOS Date Picker

There are also many input types available for date and time. Since they ensure that your data is provided in a standard format, these can be very useful.

The date input type on iOS displays a date selector. Unfortunately, the Android browser does not support any datetime input type.

<input type="date" name="date">

Time input type

IOS time picker

When the time type is used, the system will prompt iOS to display a simple picker for selecting hours and minutes.

<input type="time" name="time">

Date and Time input type

IOS Date and Time picker

When the datetime type is used, a picker is displayed for selecting the date and time at the same time.

Although the year option is not explicitly selected, the picker automatically adds the year to your input based on the date and month you selected.

<input type="datetime" name="datetime">

Input type of month

IOS month picker

The simplified version of the date selector is displayed for the month type.

The HTML specification also defines a week input type. However, this does not seem to be implemented in browsers I tested.

<input type="month" name="month">