HTML5基础知识汇总_(2)自定义属性及表单新特性
2015-08-25 08:06
881 查看
自定义属性data-*
说起这个属性,其实现在很常见了;怎么说呢,因为在一些框架都能看到他的身影!!!比如Jquery mobile,里面非常频繁的使用了这个属性;
这个属性是哪里来的….当然是跟随最新的H5一起出来的…..
兼容性在PC端只能呢说一般般(目前.比较老式浏览器居多),,手机端支持还是比较OK的;
虽说是自定义属性,但是还是有一定的规格的,,比如前缀必须是data-[自定义属性];
比如
<div data-id="id"></div>
这货有什么用呢?用来操作数据的居多,比如给一款游戏弄一些额外的信息!!(data-level,data-score);
而操作数据一般有两种方式(原生JS和JQ):
1. 利用 getAttribute、setAttribute 存取 data[原生JS操作]
2. 利用 dataset API 存取 dataset [这种可以直接忽略data-,类似对象直接访问属性,也是JS操作的]
3. jQuery使用attr 和 data 依次等同于上面两种
在网上发现了一篇讲解比较详细的操作数据,可以瞄瞄
传送门: http://blog.netsh.org/posts/html-data-jquery_1812.netsh.html
表单的进化!
input增加的特性!
邮箱: <input type="email" name="user_email" >
若是用submit提交会验证Email,检查是否缺少@,@后面是否为空….挺齐全的
url
首页: <input type="url" name="user_url" >
同上,会检查内容格式,目前只支持绝对路径!!!!
number
页数: <input type="number" name="pagin" min="1" max="30" />
有四个属性:
min : 最小值 , 小于会报错提醒
max : 最大值, 大于会报错提醒
step : 默认为1, 可以看需求设置
value : 设置默认值,这个跟传统的一样
range
范围:<input type="range" name="range" min="5" max="25" />
这个和上面那个非常相似,连属性值都一致了..就是表现形式不同,,显示为滚动条
值得一提的是,宽高度的不一致决定了滚动条的方向是水平还是垂直;h>w.垂直!!
Date pickers
<input type="[attribute]" name="user_week" />
[attribute]换成下面的属性就能看到各种效果了,,就是兼容性不怎么样,chrome下正常;
等到各大浏览器都支持良好了,就能取代JS日期选择器了…. 一条代码搞定一个日期选择;
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
search
<input type="search" name="user_search" >
跟text相比,多了一个可关闭的X;还有一些样式上的区别;其他基本一致
tel
联系方式: <input type="tel" name="user_tel" >
和text大同小异,支持任何字符输入
color
最喜欢的颜色: <input type="color" name="color" >
这个属性兼容性不是很好,但是可以支持的浏览器体验很好,就是一个color picker!!!
required
邮箱: <input type="email" name="user_email" required="required">
防止域为空时提交表单,返回值是boolean, 设置了必须通过验证才能提交
placeholder
邮箱: <input type="email" name="user_email" required="required" placeholder="请输入您的邮箱!!">
这个属性见怪不怪了,,有点类似占位符,显示一行浅灰色的字体,但是又是可以编辑的,也可以通过JS获取当输入为空的时候,用placeholder的值替换
pattern
电话号码: <input type="text" name="phone" pattern="[1-9]{11}" title="联系人号码" />
目前很少看到, 但是正则却很常见,,待慢慢普及吧
novalidate
<form action="#" method="post" novalidate="true"> 邮箱: <input type="email" name="user_email" required="required" placeholder="请输入您的邮箱!!" novalidate="true"> <input type="submit" /> </form>
H5特性之一,验证表单值;
novalidate的作用就是取消验证,可作用于表单和input元素;
默认不设置则为验证!
multiple
<form action="#" method="post" novalidate="true"> 邮箱: <input type="email" name="user_email" required="required" placeholder="请输入您的邮箱!!" novalidate="true" multiple="multiple"> <input type="submit" /> </form>
支持上传(file)和邮箱控件(email)输入多个值,值之间用逗号隔开(半角)
autofocus
<input autofocus="autofocus" type="text">
自动获取焦点
autocomplete
<input autofocus="autofocus" type="text" autocomplete="no">
h5下该属性增加了开关功能(on/off),来决定是否自动完成
表单新元素
datalist
搜索引擎: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="Bing" value="http://www.bing.com" /> <option label="Baidu" value="http://www.baidu.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id
下拉默认值设置在option的value中
keygen
<form action="#" method="post"> 用户名: <input type="text" name="usr_name" > 加密方式: <keygen name="security" > <input type="submit" > </form>
很多浏览器对这属性支持还不大完善,,,,
加密方式两种,原理还是通过公钥和密钥的方式(类似SSH)
progress
<progress value="5" max="70"> </progress>
进度条制作利器!!,用来判断file这些的加载挺不错的….
必须设置max值才能显示对应的进度条,,不支持百分比!!!
meter
<div>您的额度:<meter value="50001" min="0" max="10000" low="1000" high="9000" optimum="6000">尽情耍!!</meter> </div>
用的不多,,目前;也是进度条效果
min/max是最小值和最大值;
value是当前值
low和high是低于和高于最优值(optimum)
总结
表单来了一次大跃进,但是吧,,目前还是没法顺心的用,,一些浏览器没跟上,还有一些用户使用老版本浏览器;所以这些新特性的使用,,哪怕再人性化,也只能慢慢来;过渡总需要时间的~~~
相关文章推荐
- HTML5+Canvas手机拍摄,本地压缩上传图片
- Native和H5两种情况的头像上传
- html5新增语义标签
- Html5的两个本地存储对象sessionStorage和localStorage
- Html5的多媒体元素:audio video
- 当前浏览器对HTML5支持状况(全平台)
- 当前浏览器对HTML5支持状况(全平台)
- Html5的列表元素:ol dl
- Html5新增小元素:figure与figurecaption address progress meter mark details与summary
- 最简单的HTML5游戏——贪吃蛇
- Html5新增语义结构元素:article section aside nav header hgroup footer time
- Html5制作工具对比
- 5 个强大的HTML5 API
- HTML5的链接
- Web 实时推送技术的总结
- 前端开发攻城师绝对不可忽视的五个HTML5新特性
- HTML5:绘制图形
- html5,cxt.arc(100,100,30,0,Math.PI*2,true);
- html5学习之路_003
- 9秒学院-html5游戏开发入门教程