未加星标

HTML5 for the mobile web forms and input types

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

In this article we take a look at some of the new form enhancements available in html5, and look at how they contribute to an improved user experience for mobile forms. In particular we will see how forms can be enhanced with the additional input types offered by HTML5, and show what you can expect across various classes of mobile browser.

HTML5 Input Types

HTML5 has a bunch of new input types for forms. These input types allow better input control and validation, some of which are particularly useful for mobile users, where input is often more cumbersome than on desktop. The full list of input types is included below:

In the following sections, we take a look at some of the more interesting ones, such as color , date , email , range , tel , which have fairly obvious application to mobile devices. For demonstration purposes, we provide screenshots on a number of mobile browsers, as well as embedding live examples throughout the article.

Input type color

When supported, using this input type will trigger a colour-picker on the client device. The chosen colour will be submitted as the corresponding RGB hex value.

Usage: <inputtype="color" />

Try it:

Depending on your browser, a text field, or a colour-input field may be displayed below. If it is a colour-input, click it to trigger the colour picker.


HTML5 for the mobile web   forms and input types
HTML5 for the mobile web   forms and input types
Color input as implemented on Opera Mobile, and Chrome browsers on Android Browser support and fallbacks Android iOS IE Mobile Opera Mobile Opera Classic Opera Mini Firefox Mobile Chrome for Android color (Sources: caniuse.com , DeviceAtlas , mobilehtml5.org )

When not supported, a simple text field is displayed. Since most users won’t know the RGB hex value of a colour, it’s definitely worth having a fallback in place. Based on the table above you can decide to display a javascript colour picker for high-end devices, and implement a simple server-side choice for low-end devices.

Input type date

When supported, interacting with a field using this input type will display a native-like date picker widget.

Usage: <inputtype="date" />

Try it:


HTML5 for the mobile web   forms and input types
HTML5 for the mobile web   forms and input types
Date input type as implemented on Opera Mobile for Android, and iOS 7

Note that the date input type, as well as variants datetime and datetime-local offer useful attributes, such as min and max that can restrict and validate the user input data. We take a closer look at this in the section below on.

Browser support and fallbacks Android iOS IE Mobile Opera Mobile Opera Classic Opera Mini Firefox Mobile Chrome for Android date (Sources: caniuse.com , DeviceAtlas , mobilehtml5.org )

Although the implementations are different across the various mobile OS platforms, support is quite widespread, with the exception of the stock Android browser.

For this browser and for low-end devices a simple text field will be displayed. This is not very user-friendly for date input. A JavaScript datepicker can be implemented for high-end devices which do not support this field. A good server-side fallback for low-end devices is to build three dropdowns, for year, month, and day.

On desktop browsers too, this input type is widely supported, with the exception of Safari, Internet Explorer and Firefox. However, IE Edge does support date input types, and it’s under development in Firefox (and available in Firefox Nightly builds).

Input type datetime, and datetime-local

These input types allow the user to enter both time and date information. When supported, interacting with a field using this input type will display a native-like date picker widget, and a time widget below the date. The difference between datetime and datetime-local is that the former is with respect to UTC time, but the latter does not carry any timezone information at all.

Usage: <inputtype="datetime-local" /> Try it:
HTML5 for the mobile web   forms and input types
Datetime-local input as implemented on Chrome for Android browser Browser support and fallbacks Android iOS IE Mobile Opera Mobile Opera Classic Opera Mini Firefox Mobile Chrome for Android

Datetime/

datetime-local

(Sources: caniuse.com , DeviceAtlas , mobilehtml5.org )

At the time of writing, there is more support across mobile browsers for datetime-local than there is for datetime . For instance, Chrome and Firefox for Android both support datetime-local but not datetime . In fact selecting datetime field in Firefox (v24.0) crashed the browser in our testing. So, unless there is a specific requirement to include the timezone information with the form submission, it’s probably safer to stick with datetime-local .

For unsupported browsers and low-end devices a simple text field will be displayed. As mentioned for the date field above, for low-end devices a user-friendly server-side fallback is to build three dropdowns for day, month, and year. For high end devices which don’t support this input type, a JavaScript datetime picker can be implemented as a fallback.

Input type email

This one doesn’t need much discussion. Where supported, the input will be restricted to valid email addresses by the browser. When an invalid email address is submitted, the browser will display an error message, as illustrated in the image below. The browser may also display a modified keyboard to include the ‘@’ symbol, to make inputting an email address that little bit easier.

Usage: <inputtype="email" />

Try it:

On desktop browsers, this field will look like a normal text field; on mobile browsers a ke

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML5HTMLAndroidChromeiOSJavaJavaScriptFirefoxUTUTC
分页:12
转载请注明
本文标题:HTML5 for the mobile web forms and input types
本站链接:http://www.codesec.net/view/531837.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(62)