<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="">

        用户名：<input type="text" name="userName"> <br><br>

        密码：<input type="password" name="userPwd"> <br><br>

        <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->

        邮箱：<input type="email"> <br><br>

        <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->

        电话：<input type="tel"> <br><br>

        <!--验证只能输入合法的网址：必须包含http://-->

        网址：<input type="url"> <br><br>

        <!--number：只能输入数字(包含小数点)，不能输入其它的字符

            max:最大值  min:最小值  value:默认值-->

        数量：<input type="number" value="60" max="100" min="0"> <br><br>

        <!--search：可以提供更人性化的输入体验-->

        请输入商品名称：<input type="search"> <br><br>

        <!--range:范围-->

        范围：<input type="range" max="100" min="0" value="5"> <br><br>

        颜色：<input type="color"> <br><br>

        <!--日期时间相关-->

        <!--time:时间：时分秒-->

        时间：<input type="time"> <br><br>

        <!--date：日期：年月日-->

        日期：<input type="date"> <br><br>

        <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->

        日期时间：<input type="datetime"><br><br>

        <!--datetime-local:日期和时间-->

        日期时间：<input type="datetime-local"> <br><br>

        月份：<input type="month"> <br><br>

        星期：<input type="week">

        <!--提交-->

        <input type="submit">

        <form action="" id="myForm"><br><br>

            <!--placeholder：提示文本，提示占位-->

            <!--autofocus:自动获取焦点-->

            <!--autocomplete:自动完成：on:打开  off:关闭

                1.必须成功提交过:提交过才会记录

                2.当前添加autocomplete的元素必须有name属性-->

            用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br><br>

            <!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘-->

            <!--required:必须输入，如果没有输入则会阻止当前数据提交-->

            <!--pattern:正则表达式验证

                *:代表任意个

                ?:代表0个或1个

                +：代表1个或多个-->

            手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br><br>

            <!--multiple：可以选择多个文件-->

            文件：<input type="file" name="photo" multiple> <br><br>

            <!--email:有默认验证  在email中，multiple允许输入多个邮箱地址，以逗号分隔-->

            邮箱：<input type="email" name="email" multiple><br><br>

            <!--提交：-->

            <input type="submit"> <br><br>

        </form>

        <!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交-->

        <!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交-->

        地址：<input type="text" name="address" form="myForm">

    </form>

</body>

</html>

H5新添加的事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="">

    用户名：<input type="text" name="userName" id="userName"><br>

    电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>

    <input type="submit">

</form>

<script>

    /*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/

    document.getElementById("userName").oninput=function(){

        console.log("oninput:"+this.value);

    }

    /*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/

    document.getElementById("userName").onkeyup=function(){

        console.log("onkeyup:"+this.value);

    }

    /*oninvalid:当验证不通过时触发*/

    document.getElementById("userPhone").oninvalid=function(){

        /*设置默认的提示信息*/

        this.setCustomValidity("请输入合法的11位手机号");

   }

</script>

</body>

</html>

H5 新增表单属性和事件的更多相关文章

  1. H5新增表单属性

    一.form属性 <form id="test"> <input type="text" placeholder="请输入合适的信息 ...

  2. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  3. H5新增input表单、表单属性

    新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...

  4. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  5. 移动端H5通用表单验证插件

    将表单验证的通用部分提炼出来,做成一个简易插件,方便调用. 已将源码放到GitHub上,名字叫zValidate. 手机可扫描下图查看示例,PC端可点击此处查看: 一.原理 1)需要引入zepto.j ...

  6. H5学习之旅-H5的表单（11）

    H5的表单元素 form:表单 input:输入域,type属性可以设置text,password,button等不同的属性 textarea:文本域 lable:控制标签 fieldset:定义域 ...

  7. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  8. HTML 总结-表单-表单属性

    HTML5 表单属性 HTML5 的新的表单属性 本章讲解涉及 <form> 和 <input> 元素的新属性. 新的 form 属性: autocomplete novali ...

  9. CSS表单属性

    一般来说,表单在一个页面中是必不可少的,下面是我对表单的知识总结: 依次要说的是表单元素.表单属性.以及表单提交(js知识) 1,表单元素: <form action="提交的位置 / ...

随机推荐

  1. 记一次goland的包导入问题

    昨天把go的GOPATH环境变量设置成了“/home/mi/app/gopath”,今天用goland新建的项目在/home/mi/go/src目录下,名字是studygolang,如下图. 结果导入 ...

  2. List分页

    listObj.Skip((pagecount-1)*pagesize).Take(pagesize) 假设你每页10条数据当前是第3页 跳到第4页则:listObj.Skip((4-1)*10).T ...

  3. Directx11教程36 纹理映射(6)

    原文:Directx11教程36 纹理映射(6)    本章主要是整理代码,做以下两件事情: 1.把世界坐标矩阵的计算,放在GraphicsClass的渲染函数中,之前放在D3DClass中,而且只是 ...

  4. Directx教程(27) 简单的光照模型(6)

    原文:Directx教程(27) 简单的光照模型(6)      从myTutorialD3D11_15到myTutorialD3D11_19的工程中,我们都只有一个光源,光源的位置在LightCla ...

  5. 快速启动Oracle服务

    快速启动Oracle服务的批处理命令步骤 新建记事本 粘贴如下内容: @echo off echo 确定要启动Oracle 11g服务吗? pause net start OracleOraDb11g ...

  6. 【转载】GAWK AWK工具使用手册

    IBM GAWK入门资料http://www.ibm.com/developerworks/cn/education/aix/au-gawk/ AWK 是什么? 最简单地说,AWK 是一种用于处理文本 ...

  7. Java面向对象----继承概念,super关键字

    继承概念: 继承需要符合的关系  is-a  , 父类通用更抽象,子类更特殊更具体 类之间的关系 继承体现 组合体现 实现接口体现 继承的意义 代码重用 体现不同抽象层次 extends关键字 Sup ...

  8. SGU 103 Traffic Lights【最短路】

    题目链接: http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=16530 题意: 给定每个点最初的颜色,最初颜色持续时间,以 ...

  9. jsp中几注释的区别

    1).JSP页面中的HTML注释 SP页面中的HTML注释使用“<!—”和“-->”创建,它的具体形式如下所示: <!-- 注释内容 --> 当它出现在JSP页面时,微蘑菇将不 ...

  10. iOS 9适配系列教程：后台定位

    http://www.cocoachina.com/ios/20150624/12200.html Demo:GitHub地址 [iOS9在定位的问题上,有一个坏消息一个好消息]坏消息:如果不适配iO ...