您现在的位置是:网站首页> 编程资料编程资料

HTML5新增的表单元素和属性实例解析详解HTML5表单新增属性HTML Form表单元素全面了解html5表单及新增的改良元素详解HTML5 的新的表单元素(datalist/keygen/output)使用介绍HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注HTML标记语言——表单HTML表单标记教程(2):HTML表单标记教程(4):带有图片预览功能的上传表单的完整HTMLXHTML入门学习教程:表单标签

2021-09-01 913人已围观

简介 这篇文章主要为大家介绍了HTML5新增的表单元素和属性,具有一定的参考价值!需要的朋友可以参考下

本文以实例代码演示说明了HTML5新增的表单元素和属性,演示代码中包含了placeholder属性、autofocus 属性、list 和 datalist 元素、search 类型文本框、email 类型文本框、number 类型文本框、range 类型文本框、tel 类型文本框、url 类型文本框以及还有日期、时间类型的 input元素等等。
示例代码如下:


复制代码
代码如下:


HTML5 移动Web开发指南






HTML5 移动Web开发指南





HTML5 新元素--表单元素


 placeholder 属性:
一般用在文本框上
其主要作用是当文本框处于未输入状态并且内容为空时给文本框的提示内容
效果:
当文本框获取焦点时,提示信息自动清空,失去焦点且未输入内容时,提示信息又自动出现
省去传统的文本框需要借助 onfocel 和 onblur 事件才能实现的效果
(兼容大部分的PC浏览器和Mobile浏览器,只能说科技确实进步了)
示例:



 autofocus 属性:
指定控件自动获取焦点,需要注意的是一个HTML页面上只能有一个控件具有改属性
示例:



 list 和 datalist 元素:
list 元素的主要作用是提示文本框输入,提示的数据源则由 datalist 提供
目前 list 和 datalist 元素只有 Opera 浏览器支持,甚至没有任何一款移动浏览器支持该特性
示例:









 search 类型文本框:
主要用来搜索关键词的文本框
该文本框和普通文本框唯一区别,在 Safari 和 Chrome 浏览器下,文本框的外观为圆角
示例:



 email 类型文本框:
是一个可以指定电子邮件内容的文本框,通常用在输入E-mail地址的输入文本框上
这种文本框和普通文本框在外观上几乎一样,但实际上在Safari移动版浏览器下是有区别的
其键盘会根据文本框类型不同而显示相对应的键盘
示例:



 number 类型文本框:
是一种用于输入数字的文本框类型
它可以配合 min、max、及step属性使用
示例:



 range 类型文本框:
是一种数值范围输入文本框类型,提供的是一种滑动输入方式
需要配合 min、max、range等属性的使用
示例:



 tel 类型文本框:
是一种供用户输入电话号码的文本框类型
这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘
示例:



 url 类型文本框:
是一种供用户输入Url地址的文本框类型
这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘
示例:



 在HTML5规范中,除了新增表单元素外,还有日期、时间类型的 input元素
但这些类型都没有得到广泛的支持
具体如下:
日期和时间(含时区):

日期和时间(不含时区):

时间选择器文本框:

日期选择器文本框:

年的周号选择器文本框:

月份选择器文本框:







提示: 本文由整理自网络,如有侵权请联系本站删除!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!

上一篇:HTML5+CSS3实现拖放(Drag and Drop)示例5分钟弄清楚html5的drag and drop(小结)HTML5 拖放(Drag 和 Drop)详解与实例代码详解HTML5中的拖放事件(Drag 和 drop)突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述HTML5 drag和drop具体使用详解

下一篇:HTML5实现WebSocket协议原理浅析HTML5+WebSocket实现多文件同时上传的实例HTML5-WebSocket实现聊天室示例浅析HTML5的WebSocket与服务器推送事件html5的websockets全双工通信详解学习示例利用html5的websocket实现websocket聊天室html5-websocket基于远程方法调用的数据交互实现基于HTML5的WebSocket的实例代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网