<!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. uni-app官方教程学习手记

    本人微信公众号:前端修炼之路,欢迎关注 背景介绍 大概在今年的十月份左右,我了解到Dcloud推出了uni-app.当时下载了一个Hbuilder X,下载了官方提供的hello示例教程.经过一番努力 ...

  2. tablespaces

    select * from user_tablespaces; select username,default_tablespace from user_users;

  3. python字符串函数总结

    字符串函数主要分为: 查找: strs = "this is a line of text for test" index1 = strs.find("is") ...

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

  5. 安装软件时候出现"无效驱动器D"

    安装软件的时候,出现以下问题. 如图:  无效驱动器 原因是因为之前安装过这样的软件在H盘,后期更改没了H,所以出现了错误. 解决方案: 打开注册表,搜索软件的关键字如  vmware 删除错误路径即 ...

  6. 【时光回溯】【JZOJ3571】【GDKOI2014】内存分配

    题目描述 输入 输出 输出m行,每行一个整数,代表输入中每次程序变化后系统所需要的空闲内存单位数. 样例输入 2 3 1 4 1 4 2 2 1 2 1 1 1 1 1 样例输出 2 3 1 数据范围 ...

  7. zabbix概述篇

    zabbix监控系统概述 监控系统 决不允许未经监控的业务和服务的上线 基本功能 采样:获取客户端数据(主动和被动模式) 存储 展示 告警 监控通道 ssh/telnet:无agent snmp:简单 ...

  8. hdu1403 后缀数组

    比较简单的应用. #include <stdio.h> #include <string.h> #define maxn 200002 int wa[maxn],wb[maxn ...

  9. H5本地存储技术和微信小程序中的本地存储

    1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. 2019-8-31-dotnet-使用-lz4net-压缩-Stream-或文件

    title author date CreateTime categories dotnet 使用 lz4net 压缩 Stream 或文件 lindexi 2019-08-31 16:55:58 + ...