<!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. Leetcode922.Sort Array By Parity II按奇偶排序数组2

    给定一个非负整数数组 A, A 中一半整数是奇数,一半整数是偶数. 对数组进行排序,以便当 A[i] 为奇数时,i 也是奇数:当 A[i] 为偶数时, i 也是偶数. 你可以返回任何满足上述条件的数组 ...

  2. mysql自定义function 写递归查询子节点

    #存储文本信息表 CREATE TABLE WordInfoEntity( word_id ) PRIMARY KEY NOT NULL, # 主键ID UUID word_greda :正文文本 , ...

  3. django其他

    聚合查询 聚合函数必须在分组之后使用 没有分组默认整体为一组 聚合函数 Max, Min, Sum, Avg, Count 从django.db.models 导入方法,然后使用关键字aggregat ...

  4. python 子类继承父类属性及实例化方法

  5. 在linux里如何建立一个快捷方式，连接到另一个目录

    用软链接 用法:ln -s 源目录 目标快捷方式, 比如你要在/etc下面建立一个叫LXBC553的快捷方式,指向/home/LXBC,那就是 ln -s /home/LXBC   /etc/LXBC ...

  6. Java中清空session的方法

    session.removeAttribute("sessionname")是清除SESSION里的某个属性. session.invalidate()是让SESSION失效. 或 ...

  7. ros:出现：error: ros/ros.h: No such file or directory

    出现这个问题是因为在cmakelist.txt中没有声明对roscpp的依赖.在find_package中添加roscpp,重新执行就ok了.

  8. iOS 获取一个类的所有方法

    #import <objc/runtime.h> #import <objc/message.h> 需要导入运行时头文件和消息发送文件 - (void)runTests { u ...

  9. Android 在图片的指定位置添加标记

    这些天,项目里加了一个功能效果,场景是: 假如有一个家居图片,图片里,有各样的家居用品: 桌子,毛巾,花瓶等等,需要在指定的商品处添加标记,方便用户直接看到商品,点击该标记,可以进入到商品详情页 .实 ...

  10. list extend 和 append

    append 一次追加一个列表 extend 一次追加所有的元素 单个的形式加入