<!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. 洛谷 P3950 部落冲突 树链剖分

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例1 输出样例1 输入样例2 输出样例2 输入样例3 输出样例3 说明 思路 AC代码 总结 题面 题目链接 P3 ...

  2. Mysql+php报错原因

    SQL syntax --语法错误,看near,错误会在near后引号中的内容 的附近 Table/Database....... dosen't existes ---表/库(库名/表名) 不存在 ...

  3. day39-Spring 18-Spring的JDBC模板：查询的操作

    package cn.itcast.spring3.demo2; import java.sql.ResultSet; import java.sql.SQLException; import jav ...

  4. vue_qqmapdemo1

    腾讯地图vue组件,实现异步加载腾讯地图,坐标拾取器,支持按城市名称搜索. 搜索框样式依赖elementUI,不需要可删除顶部,地图部分无依赖项 //qqmap.vue <template> ...

  5. Selenium-------ActionChainApi接口详解

    ActionChains UI自动化测试过程中,经常遇到那种,需要鼠标悬浮后,要操作的才会元素出现的这种场景,那么我们就要模拟鼠标悬浮到某一个位置,做一系列的连贯操作,Selenium给我们提供了Ac ...

  6. 【JZOJ4860】【NOIP2016提高A组集训第7场11.4】分解数

    题目描述 Dpstr学习了动态规划的技巧以后,对数的分解问题十分感兴趣. Dpstr用此过程将一个正整数x分解成若干个数的乘积:一开始令集合A中只有一个元素x,每次分解时从A中取一个元素a并找出两个大 ...

  7. python 文件读写编码

  8. 【Linux】gnuplot命令大全

    gnuplot命令大全 在linux命令提示符下运行gnuplot命令启动,输入quit或q或exit退出. plot命令 gnuplot> plot sin(x) with line line ...

  9. Inventor安装失败怎样卸载重新安装Inventor，解决Inventor安装失败的方法总结

    技术帖:Inventor没有按照正确方式卸载,导致Inventor安装失败.楼主也查过网上关于如何解决Inventor安装失败的一些文章,是说删除几个Inventor文件和Inventor软件注册表就 ...

  10. python内置函数and匿名函数

    一.内置函数 什什么是内置函数? 就是python给你提供的. 拿来直接⽤用的函数, 比如print., input等等. 截⽌止 到python版本3.6.2 python⼀一共提供了了68个内置函 ...