In recent projects, planning always requires us to pop up various types of keyboards, especially under iOS. For example, when entering an account number, it should not support inputting Chinese, and when it is time to input pure numbers, we should talk about the numeric keyboard.
Personally, I feel that these are things that we seldom realize in our daily development. Although they are a bit tricky, they are all for the user experience and our products, so I found some information on the Internet and shared with friends here:
In the past few days Over the years, browsing the web on mobile devices has become incredibly popular. But the browsing experience on these devices sometimes leaves a lot to be desired. This is especially true when it comes to filling out forms. Fortunately, the HTML5 specification introduces many new input types that make it easier for users to fill out your web forms on mobile devices.
It's a pretty great development, as mobile browser vendors pick up the new HTML5 input types 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.
Note: In this article, the iOS screenshots were taken using iPhone5 and Safari. Android screenshots are taken on a virtual device running Android 4.1 and its available web browser.
Email input type
Keyboard for email input on iOS (left) and Android (right). The
email type, both iOS and Android browsers, show a lightly customized keyboard. Note the presence of the shortened space bar and the addition of the @ and period (.) keys to the bottom row of the iOS keyboard. Whereas on Android, the standard comma key will appear to the left of the space bar, which has been replaced by an @ key.
<input type="email" name="email">
URL input type
iOS的URL input键盘
url input 类型可以用来帮助用户输入网址。在iOS上，所有的空格键已被替换成句号（.）键和正斜杠（/）键，以及一个特殊的.com键。
我的测试显示，Android键盘没有变化。
<input type="url" name="url">
电话号码input类型
IOS（左）和Android（右）的电话input的键盘
使用 tel input 类型时，iOS和Android都是提示显示拨号键盘，而不是标准键盘。
<input type="tel" name="tel">
数字input类型
IOS（左）和Android（右）的数字input的键盘
number input 类型促使iOS显示数字和标点符号的键盘。Android浏览器将启动一个类似显示电话输入的键盘。
<input type="number" name="number">
日期input类型
iOS日期拾取器
对于日期和时间，也有许多input类型可用。由于他们保证了你的数据是以一个标准的格式提供，所以这些可以是非常有用的。
在iOS上的 date input 类型会提示显示一个日期选择器。不幸的是，Android浏览器还未支持任何datetime 的input类型。
<input type="date" name="date">
时间input类型
iOS时间拾取器
使用time类型时会提示iOS显示一个简单的拾取器来选择小时和分钟。
<input type="time" name="time">
日期和时间input类型
iOS日期时间拾取器
使用datetime类型时将显示一个用于同时选择日期和时间的拾取器。
虽然没有显式的选择年的选项，但是拾取器会自动根据您选择的日期和月份将年添加到你的input。
<input type="datetime" name="datetime">
月份input类型
A simplified version of the datepicker will be displayed when the iOS monthpicker is of type month.
The HTML specification also defines an input type for week, however, this doesn't seem to be implemented on the browsers I've tested.
<input type="month" name="month">
Browser compatibility with HTML5 input types Browsers that
do not support these new input types will only display a simple text input to the user. That means, you can go ahead and start using these new input types today!
Among desktop browsers, browsers that support date/time input types are still very limited. The Opera browser currently has the best implementation that supports all the types mentioned in this article. Google's Chrome browser supports the date type, but nothing else right now. Safari has a date-formatted text field, but doesn't support a calendar widget like the one shown on Opera and Chrome.
Fortunately, the days of putting up with a poor browser experience are soon gone on mobile. Taking advantage of the new mobile-friendly features introduced by HTML5 is sure to be an enjoyable experience for all of our users, no matter what device they are using.