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

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)