Using the HTML5 input type to enhance the mobile input experience

Using the HTML5 input type to promote the mobile input experience English original: using HTML5 input Types to Enhance the mobile browsing Experience

Note: in this article, the iOS screen is intercepted using IPhone5 and Safari. The Android screen is run on the virtual device Android4.1 and its available web browser intercepts.

e-Mail input type

Keyboard for IOS (left) and Android (right) e-mail input

Email type, both iOS and Android browsers display a lightly customized keyboard. Note the shortened space bar exists and the bottom line of the iOS keyboard is joined by the @ and period (.) keys. On Android, the standard comma key will appear on the left side of the space bar, which has been replaced by an @ key.

<input type= "Email" name= "Email" >

URL input type

iOS URL input keyboard

The URL input type can be used to help users enter URLs. On iOS, all the spacebar has been replaced with a period (.) key and a forward slash (/) key, as well as a special. com key.

My test shows that the Android keyboard has not changed.

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

Phone number input type

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

When using the Tel input type, both iOS and Android are prompted to display the dial pad instead of the standard keyboard.

<input type= "Tel" name= "Tel" >

Number input type

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

The number input type prompts iOS to display numbers and punctuation on the keyboard. The Android browser launches a keyboard similar to the one that displays phone input.

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

Date input type

iOS date picker

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

The date input type on iOS prompts you to display a day selector. Unfortunately, the Android browser does not yet support any of the DateTime input types.

<input type= "Date" name= "Date" >

Time input type

iOS Time Picker

Using the time type prompts iOS to display a simple picker to select hours and minutes.

<input type= "Time" name= "Time" >

Date and time input type

iOS Date Time picker

When you use a datetime type, a picker is displayed to select both the date and time.

Although there is no option to select the year explicitly, the picker automatically adds the year to your input based on the date and month that you select.

<input type= "datetime" Name= "datetime" >

Month input type

IOS Month Picker

A simplified version of the date selector is displayed when the month type.

The HTML specification also defines a week input type, which, however, does not seem to be implemented on the browser I have tested.

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



Transferred from: http://www.oschina.net/translate/using-html5-input-types-to-enhance-the-mobile-browsing-experience

Using the HTML5 input type to enhance the mobile input experience