原文链接:http://bang.chinabyte.com/thread-416700-1-1.html
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
本章全面介绍这些新的输入类型:
- email
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
注释:Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。
Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时,会自动验证 email 域的值。
实例
E-mail: <input type="email" name="user_email" />
提示:iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。
Input 类型 - url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
实例
Homepage: <input type="url" name="user_url" />
提示:iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。
Input 类型 - number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定:
实例
Points: <input type="number" name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定:
属性值描述maxnumber规定允许的最大值minnumber规定允许的最小值stepnumber规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)valuenumber规定默认值
请试一下带有所有限定属性的例子:
提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)。
Input 类型 - range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定:
实例
<input type="range" name="points" min="1" max="10" />
请使用下面的属性来规定对数字类型的限定:
属性值描述maxnumber规定允许的最大值minnumber规定允许的最小值stepnumber规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)valuenumber规定默认值
Input 类型 - Date Pickers(数据检出器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
下面的例子允许您从日历中选取一个日期:
实例Date: <input type="date" name="user_date" />
Input 类型 - search
search 类型用于搜索域,比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。
分享到:
相关推荐
WEB开发 之 HTML5 Input 类型.docx
html5新增input类型总结(教辅).pdf
html5简介 html5Canvas、html5Web存储、html5Input类型、html5表单元素、html5表单属性、html5参考手册、html5标准属性、html5事件属性。 二、速查手册:将html5所有结点全部以表格形式展示出来,并带有每个结点的...
网上之所以还没有大量的出现对这些新型的input类型的使用,是因为还有很多人在使用古老的IE6/IE8,只有当使用这些古老浏览器的人所占的比例可以忽略不计时,那就是HTML5主导天下之日,那天也是我们Web开发人员的新...
HTML5表单中新增的input输入类型3.pdf 学习资料 复习资料 教学资源
1.0 html5 简介 2.0 html5 视频 3.0 html5 音频 4.0 html5 Canvas 5.0 html5 web存储 6.0 html5 Input类型 7.0 html5 表单元素 8.0 html5 表单属性 9.0 html5 参考手册 10.0 html5 标准属性 11.0 html5 事件属性
HTML5(软件品牌)-1期 12 教学课件_单元5_HTML5的input类型.pdf 学习资料 复习资料 教学资源
主要介绍了HTML5新增的8类INPUT输入类型介绍,这8个新的输入类型分别是email类型、url类型、number类型、range类型、日期类型、search类型、tel类型,本文分别对它们一一介绍,需要的朋友可以参考下
HTML5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。 语法格式 <input type="控件类型" form="值" /> 示例 list属性 <input type="text" list...
HTML5.chm中文帮助文档API,《HTML5从入门到精通》中文学习教程.pdf教程,《HTML 5 教程.pdf》...HTML 5 Input 类型 HTML 5 表单元素 HTML 5 表单属性 HTML 5 参考手册 HTML 5 标准属性 HTML 5 事件属性 HTML 5 标签
HTML 5 简介............................................................HTML 5 Input 类型......................................................................................................................
HTML5教程 --HTML5简介 --HTML5视频 --HTML5音频 --HTML5 Canvas --HTML5 Web存储 --HTML5 Input类型 --HTML5表单元素 --HTML5表单属性 --HTML5参考手册 --HTML5标准属性 --HTML5事件属性
HTML5简介 HTML5视频、音频 HTML5 canvas绘图 HTML5 WEB存储 HTML5 input类型 HTML5 表单元素属性等等
HTML5表单中新增的input输入类型1.pdf 学习资料 复习资料 教学资源
vue移动端input上传视频、音频,供大家参考,具体内容如下 html部分 现场视频 <video id=videoId controls width=100%></video> <input style=display:none; id=pop_video type=file accept=...
在前面的博文,我们已经讨论了一些HTML5改进的地方,比如placeholder,prefetching以及webStorage,下面我要介绍的是两个新的input元素类型: email和url。让我们跟着代码来看看他们的好处: 语法格式: 新的input type...
HTML5表单中新增的input输入类型1案例.pdf 学习资料 复习资料 教学资源
HTML5表单中新增的input输入类型2案例.pdf 学习资料 复习资料 教学资源
HTML5表单中新增的input输入类型3案例.pdf 学习资料 复习资料 教学资源
<input type="控件类型" /> 说明 Input元素的type属性 02 单行文本框 描述 单行文本输入框常用来输入简短的信息,如用户名、账号、证件号码等,常用的属性有name、value、maxlength。 语法格式 <input type="text" /...