Using the HTML5 input type to promote the mobile input experience (translate)

Source: Internet
Author: User

Over the past few years, browsing the web on mobile devices has become incredibly popular. However, the browsing experience on these devices is sometimes left with a lot to be desired. This is especially noticeable when it comes to filling out a form. Fortunately, the HTML5 specification introduces many new input types, making it easier for users to fill out your Web forms on mobile devices.

This is a pretty good move, and mobile browser vendors pick up the new HTML5 input type and use them to display customized keyboard layouts that make it easier for users to enter data.

In this article, you will learn about 8 new input types that have been introduced in HTML5.

Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

Other translation versions (1)

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. The keyboard

Email type for

e-mail input type

iOS (left) and Android (right) e-mail input, 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", 
Translated 1 years ago

0 people top

 

top   Good translation!

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" >
Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

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" >
Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

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" >
Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

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" >
Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

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" >
Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

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" >
Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

browser compatibility for the input type of HTML5

Browsers that do not support these new input types will only display a simple text input to the user. This means that you can go ahead and start using these new input types today!

In desktop browsers, browsers that support the date/time input type are still very limited. The Opera browser currently has the best implementations and supports all the types mentioned in this article. Google's Chrome browser supports the date type, but now there's nothing else. The Safari browser has a Date formatted text field, but does not support calendar widgets like those shown on opera and chrome.

Andylam
Translated over 1 years ago

0 Person Top

Top translation of good Oh!

The final idea

Fortunately, the days of the browser that once endured a bad experience, on the mobile side have soon ceased. The benefits of the new mobile-friendly features introduced by HTML5 are sure to enjoy a pleasant experience for all of our users, no matter which device they use.

Using the HTML5 input type to promote the mobile input experience (translate)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.