Using the HTML5 input type to enhance the mobile input experience

English Original: Using HTML5 Input Types to Enhance the Mobile browsing Experience

Browsing the web on mobile devices have become incredbily popular over the past few years. However the browsing experience on these devices can sometimes leave a lot to be desired. This is especially true if it comes to filling in forms. Luckily the HTML5 specification introduces a number of new input types that make it easier for users to fill in your Web F Orms on mobile devices. In a rather awesome move, mobile browser vendors picked up on the new HTML5 input types and is using them to display Cust omized keyboard layouts The IT easier for users to enter data. The This blog post is going to learn about eight new input types that has been introduced in HTML5.	translator information 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 the mobile browser vendor picks up the new HTML5 input type and uses them to display the customized keyboard layout, making it easier for users to enter data.   In this article, you will learn about 8 new input types that have been introduced in the HTML5.
Note:  the IOS Screenshots In this post were taken Using an IPhone 5 and Safari. The Android screenshots were taken using a virtual device running Android 4.1 and the stock web browser. Email Inputs IOS (left) and Android (right) keyboards for Email Inputs the  email   Type prompts both the IOS and Android browsers to display slightly customized keyboards. Notice the presence of a shortened space bar and the addition of  @  and period (. ) keys In the bottom row of the IOS keyboard. On Android, the standard comma key is would appear to the left of the space bar have been replaced with an  @  key. <input type= "Email"  name= "email";	translator information 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";
url Inputs IOS Keyboard for URL Inputs the  URL  input type can be used to help users input web addresses. On IOS The whole space bar have been replaced with period (. ) and Forward-slash (/) keys as well As a special  . com  key. My testing showed no changes to the Android keyboard. <input type= "url"  name= "url";	translator information The URL input type iOS URL input keyboard 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";
telephone number Inputs IOS (left) and Android ( right) keypads for telephone Inputs Using the , tel  input type prompts both IOS and Android to Display a dialer keypad instead of the standard keyboard. <input type= "Tel"  name= "tel";	translator information Phone number input type iOS (left) and Android (right) for phone input keyboard 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 Inputs IOS (left) and Android (right) Keyboards for number Inputs the , number  input type causes IOS to present a keyboard with Numbe RS and punctuation. The Android browser would launch a keypad similar to the one displayed for telephone inputs. <input type= "number"  name= "number";	translator information The numeric input type iOS (left) and Android (right) are keyboard   for the numeric input, and the Number input type encourages 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 Inputs IOS Date Picker There is Also a number of input types available for dates and times. These can be really useful as they ensure the your data is provided in a standardized format. on IOS the  date  input type would prompt a date picker to be displayed. Unfortunately the Android browser does not yet has the support for any datetime input types. <input type= "Date"  name= "date";	translator information Date input type iOS date picker There are also many input types available for 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 for a date selector. Unfortunately, the Android browser does not yet support any of the DateTime input types. <input type= "date"  name= "date";
time Inputs IOS time picker Using the  time  type would prompt IOS to display a simple picker for selecting hours and minutes. <input type= "Time"  name= "time"; Date and Time Inputs IOS datetime picker the  DateTime  type would display a picker For selecting both a date and time. Although there is no option for explicitly selecting a year, the picker would automatically add a year to your input bas Ed on the date and month, you select. <input type= "datetime"  name= "datetime";	translator information Time input type iOS time picker When using type Time prompts iOS to display a simple picker to select hours and minutes. <input type= time  name= "Time"; date and hour input type iOS datetime picker When you use a datetime type, a picker is displayed to select both the date and time. Although there are no options for selecting 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 Inputs IOS Month picker the  month  type would display a simplified version of the date picker. The HTML specification also defines a  week  input type, however this does not seem to has been I Mplemented in either of the browsers I tested. <input type= "Month"  name= "month";	translator information A simplified version of the date selector is displayed when the month input type IOS month picker 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";
browser compatibility for HTML5 Input Types Browsers These new input types would just display a simple text input to users. This means so you can go ahead and start using these new input types today! Support for the Date/time input types amongst desktop browsers is still very limited. Opera currently has the best implementation and supporting all of the types mentioned in this post. Google Chrome has support for the date  type and nothing else at the moment. Safari has date-formatted text fields but does the calender widget, that's displayed in Opera and Chrome.	translator information Browser compatibility for HTML5 input type 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 Chrome supports  date  types, 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.
Final Thoughts Fortunately the days of have to endure a poor browsing experience on mobile is swiftly on the the-the-the-the-the-the-the- By taking advantage of the new mobile-friendly features introduced in HTML5 we can confidently deliver an enjoyable experi ence to all of our users, regardless of the device they is using. Useful Links Browser Support for Date/time Inputs WHATWG HTML5 spec:input Types	The final idea of the translator's information 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. Useful Links Browser support date/Time input Web hypertext Application Technology Working Group HTML5 specification: input type

Using the HTML5 input type to enhance the mobile input experience