It is a rare day at work when I don’t do anything
related to forms. Be it creating forms from scratch, modifying existing
forms, handling user interaction with them, whatever. I work with forms a
lot. So that’s why one of the things in HTML5
I’m looking forward to the most is the overhaul of the elements and attributes used to create forms.
Among other form-related things, HTML5 adds a whole bunch of new values for the input
element’s type
attribute:
-
search
-
tel
-
url
-
email
-
datetime
-
date
-
month
-
week
-
time
-
datetime-local
-
number
-
range
-
color
That’s a lot of useful form controls you can create. Browser support
isn’t all the way there yet of course, but some browsers do something
useful with several of these input types. I’ve made a very simple test page for HTML5 input types
so you can check which of them your browser handles.
To round this off, here are a few screenshots of the new input controls in browsers that support them.
<input type="tel">
in Safari on iPhone/iPod Touch:
<input type="url">
in Safari on iPhone/iPod Touch:
<input type="email">
in Safari on iPhone/iPod Touch:
<input type="number">
in Safari on iPhone/iPod Touch:
<input type="search">
in Safari 4.0.5 on Mac OS X:
<input type="range">
in Safari 4.0.5 on Mac OS X:
<input type="date">
in Opera 10.10 on Mac OS X:
<input type="email">
in Opera 10.10 on Mac OS X:
An interesting note is that on the iPhone/iPod Touch, the main difference between input types like text
, number
, url
, tel
, and email
is how the on-screen keyboard changes to display the characters you are most likely to enter.
I’m very much looking forward to the day when all major browsers have
full and consistent support for HTML5 input types. Unfortunately that
isn’t likely to happen for many years, so until then I guess we’re stuck
with the hackish JavaScript workarounds we use today for things like
sliders and datepickers.
分享到:
相关推荐
jQuery typeit.js打字机插件是一款支持自定义文本的基于jQuery+html5实现的打字特效,可设置打字速度,是否显示鼠标等参数,非常方便实用。
2、属性(以下三个仅HTML5支持,因此存在兼容性问题) (1)multiple :表示用户是否可以选择多个值。multiple只能用于type=file和type=email。 (2)accept:服务器接受的文件类型,否则将被忽略。 音频/ *代表声音...
WPS2021造成的HTML5 file.type值异常的解决方法.docx
Input元素的type属性 Input元素 01 Input元素 普通文本框 密码文本框 按钮 Input元素 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 ...
版本:HTML5 Shiv 3.7.3 自HTML5标准的提出就得到非常多的关注,而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题,让...<script type="text/javascript" src="js/html5shiv.js"></script>
ZK-1240: Input element support HTML5 type, like tel, number, email, and so on ZK-1242: Datebox support scrolling picker like ios's date picker for tablet/mobile device ZK-1243: Combobox support ...
HTML5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。 语法格式 <input type="控件类型" form="值" /> 示例 list属性 <input type="text" list...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> <h1>Page Header ...
lufy_legend(张路斌)的书《HTML5 canvas游戏开发实战》的PDF文档+实战示例代码。js的开发版本是lufylegend-1.5.1.js。
html5Validate支持HTML5验证相关的东西,如type="email", type="number", type="tel", type="url", step, min, max, required, pattern, multiple等,并有一些本地化扩展,如增加了type="zipcode"邮编等,支持type=...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...