<!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. 2018-5-22-SublimeText-粘贴图片保存到本地

    title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...

  2. SimpleDateFormat 以及java8 - DateTimeFormatter

    https://www.cnblogs.com/zhisheng/p/9206758.html 在看的过程中有这么一条: [强制]SimpleDateFormat 是线程不安全的类,一般不要定义为 s ...

  3. phpcms推送文章同时推送自定义字段

    首先进入phpcms后台,模型管理-字段管理里,新建字段,新建字段必须是主表字段,如图所示 2 来到网站根目录,寻找phpcms\modules\content\classes\push_api.cl ...

  4. ubuntu上安装firefox

    ubuntu自带有firefox,为什么还需要先卸载原有的firefox后重新安装? 因为自带的firefox是国际版本的,无法与国内版本的firefox进行同步. 因为Windows下的Firefo ...

  5. BOM的对象总结（location，screen，navigator，history）

    location对象 专门保存当前窗口正在打开的url的对象. 常用的属性有: location.href 保存了完整的url:这种方式做常用 在当前窗口打开: location.href=新url ...

  6. 【JZOJ4816】【NOIP2016提高A组五校联考4】label

    题目描述 输入 输出 样例输入 3 2 2 0 1 2 3 3 2 1 3 1 2 3 3 1 1 2 2 3 样例输出 4 2 12 数据范围 样例解释 解法 设f[i][j]为在第i个点填了j的合 ...

  7. MAC+VS Code+C/C++调试配置

    目录 VS Code C/C++ 环境配置 添加工作区文件夹 Say Hello world 关于三个配置文件--Debug 原地址 VS Code C/C++ 环境配置 添加工作区文件夹 虽然代码能 ...

  8. Limboy：自学 iOS 开发的一些经验

    不知不觉作为 iOS 开发也有两年多的时间了,记得当初看到 OC 的语法时,愣是被吓了回去,隔了好久才重新耐下心去啃一啃.啃了一阵,觉得大概有了点概念,看到 Cocoa 那么多的 Class,又懵了, ...

  9. CDH5.13.1安装

    文件下载 Cloudera Manager 地址:http://archive.cloudera.com/cm5/cm/5/ 这里下载的是5.13.1的版本,https://archive.cloud ...

  10. Ubuntu里node命令无效解决方法

    在ubuntu里用sudo apt-get install nodejs安装Node.js后, 会发现terminals里运行node命令(比如node –-version)时候会有No such f ...