html5的Form新特性
form新增的输入型控件：
| 名称 | 说明 | 图例 |
| 电子邮箱文本框，显示跟普通的没什么区别 |  |
|
| tel | 电话号码，pc端不会有明显的变化，但是移动端会自动切换键盘,输入有误不会阻止默认提交 | |
| url | 网页url |  |
| search | 搜索引擎，chrome下输入文字后，会多出一个关闭的X |  |
| range | 特定范围内的数值选择器，min、max、step( 步数 ) |  |
| number | 只能包含数字的输入框,有键盘监听，不能输入其他字符。 |  |
| color | 颜色选择器 |  |
| datetime | 显示完整日期 | 直接使用好像不行 |
| datetime-local | 显示完整日期，不含时区 |  |
| time | 显示时间，不含时区 |  |
| date | 显示日期、时间控件 |  |
| week | 显示周 |  |
| month | 显示月 |  |
Form新增表单特性和函数
placeholder : 输入框提示信息。
autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off。
autofocus : 指定表单获取输入焦点。
list和datalist : 为输入框构造一个选择列表。
list值为datalist标签的id。
required : 此项必填，不能为空。（可以直接破解）
- Pattern : 正则验证 pattern="\d{1,5}"。（可以直接破解）
Formaction 在submit里定义提交地址，重写表单的action属性。
Form表单验证
Invalid事件：oText.addEventListener("invalid",fn1,false);
- validity对象，通过下面的valid可以查看验证是否通过。
- 阻止默认验证：ev.preventDefault()。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post" id="myForm">
<input type="text" id="username" name="username" required="required"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById("username");
//如果不添加监听函数，username不填写，浏览器会默认阻止form提交，并给出提示：请填写此字段。
//如果有添加，验证失败会先执行该函数，且this.validity.valid的值为false。
//如果在函数中不添加ev.preventDefault();浏览器同样会给出提示：请填写此字段。添加则意味着阻止默认提示。
oInput.addEventListener("invalid",function(ev){
console.log(this.validity.valid);
// ev.preventDefault();
},false);
}
</script> - formnovalidate属性：用在<input type="submit" value="提交" formnovalidate="formnovalidate"/>中，添加该属性，则关闭验证。
- valueMissing : 输入值为空时。
typeMismatch : 控件值与预期类型不匹配。
- patternMismatch : 输入值不满足pattern正则。
tooLong : 超过maxLength最大限制。
- rangeUnderflow : 验证的range最小值。
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则。
setCustomValidity(); 自定义验证。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="myForm" action="" method="post">
<input type="text" name="" id="myNumber" value="" required="required"/>
<input type="submit" name="" id="" value="提交" />
</form
</body> </html>
<script type="text/javascript">
window.onload = function(){
var oNumber = document.getElementById("myNumber");
oNumber.setCustomValidity("必填项，请输入！");
}
</script>
html5的Form新特性的更多相关文章
- HTML5的常用新特性你必须知道
HTML5的常用新特性你必须知道 1 新的 声明 HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 的用处. 不是 HTML ...
- HTML5和CSS3新特性一览
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
- 常用的HTML5、CSS3新特性能力检测写法
伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,w ...
- html4与html5的区别及html5的一些新特性
区别 1.html5语法的改变 HTML5简化了很多细微的语法,例如: 1.1doctype的声明; html4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
- HTML5，CSS3新特性，与旧版的区别
HTML5新特性 (1)语意化更好的内容元素,比如 article.footer.header.nav.section (2)本地存储.sessionStorage.localStorage和inde ...
- HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- HTML5 十大新特性(二)——表单新特性
H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...
- HTML5 中的新特性：
一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...
随机推荐
- Zabbix自带的mysql监控模块
Zabbix自带的mysql监控模块 [root@Cagios zabbix-]# cp conf/zabbix_agentd/userparameter_mysql.conf /usr/local/ ...
- Zabbix 默认网络发现模板修改(第三篇)
zabbix 默认网络发现模板不能显示ip,我想让他在graph的标题上显示ip,具体要像如下效果 原文地址:http://www.cnblogs.com/caoguo/p/4977254.html ...
- HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
- CSS超链接常见四种状态在控制
一.首选设置一下以下4种状态常: 1.a:active是超级链接的初始状态 2.a:hover是把鼠标放上去时的状况 3.a:link 是鼠标点击时 4.a:visited是访问过后的情况.
- is_NaN的使用
原生js中使用判断某个值是否是数值,有且只有一个方法就是is_NaN. 原理:这个函数使用了Number() 去转换需要判断的值.Number() 去转换值,如果有任意非数值字符存在则就不是一个数值. ...
- Python - 面对对象(进阶)
目录 Python - 面对对象(进阶) 类的成员 一. 字段 二. 方法 三. 属性 类的修饰符 类的特殊成员 Python - 面对对象(进阶) 类的成员 一. 字段 字段包括:普通字段和静态字段 ...
- F - Many Moves
F - Many Moves Time limit : 2sec / Memory limit : 256MB Score : 900 points Problem Statement There a ...
- [cogs461] [网络流24题#10] 餐巾 [网络流，最小费用最大流]
建图:从源点向第一层连边,第一层表示当天用掉多少餐巾,第二层表示当天需要多少餐巾,所以注意购买餐巾的边容量为无穷大,要从源点开始连向第二层的点,每天可能有剩余,在第一层内表示为流入第二天的节点.具体见 ...
- bootstrap-table与Spring项目集成实例收集
bootstrap-table项目官网:https://github.com/wenzhixin/bootstrap-table bootstrap-table各版本下载:https://github ...
- [转]十五天精通WCF——第十一天 如何对wcf进行全程监控
说点题外话,我们在玩asp.net的时候,都知道有一个叼毛玩意叫做“生命周期”,我们可以用httpmodule在先于页面的page_load中 做一些拦截,这样做的好处有很多,比如记录日志,参数过滤, ...