H5 新增表单属性和事件

最新推荐文章于 2024-07-29 00:36:24 发布
转载 最新推荐文章于 2024-07-29 00:36:24 发布 · 128 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wanguofeng/p/10837302.html 

<!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>

 

转载于:https://www.cnblogs.com/wanguofeng/p/10837302.html

天为我蓝
关注
HTML5-表单新增事件
weixin_49924309的博客
08-07 345
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form ac
H5增强表单input标签、数据列表和属性
YY的博客
09-21 1230
H5增强表单input标签、数据列表和属性
h5学习笔记之表单事件
qq_39773416的博客
08-26 402
表单验证反馈: Invalid事件 validity对象(valid查看验证是否通过) input.addEventListener(‘invalid’,fn,false) 阻止默认验证：ev.preventDefault() formnovalidate属性 : 关闭验证 oText.addEventListener(“invalid”,fn1,false); ev.preventDefau...
【H5】新增表单事件
夜雨Gecer的博客
08-23 398
onInout 获取input内的value发生变化时触发 <input id="test_input"> <script> document.getElementById('test_input').oninput=function () { console.log(this.value); } </sc...
H5--新增表单元素&控件&属性&事件
web_only_的博客
09-24 1956
H5网站重构 先简单回顾一下H5新标签：结构性标签、功能性标签 结构性标签：负责web上下文件结构的定义 功能性标签：功能性内容的表达 表单—新增控件类型 HTML5 增加了多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，主要内容： 接下来依次介绍下H5 新增的表单控件类型，所有案例均用谷歌浏览器展示 1、type=“email” 限制用户输入为邮箱类型(即输入内容必须含有@符号，并...
H5自定义属性
qq_46112274的博客
12-19 1044
1、H5自定义属性 1.1、设置H5自定义属性 1.2、获取H5自定义属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width
h5新增表单属性
weixin_44680639的博客
07-18 1037
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false-----node.addEventListener("invalid",fn1,false);适用于form,以及type为text,search,url,tel,email,password类型的input。当格式不符合email格式时，提交是不会成功的，会出现提示；当格式不符合url格式时，提交是不会成功的，会出现提示；必须有value属性，为了后台获取后的识别（不写统一为on）.
H5新增表单属性
想搞全栈的前端
04-05 604
H5新增的input类型 <form> 邮箱：<input type="email"><br/> 数量：<input type="number" value="20" max="25" min="18"><br/> 电话：<input type="tel"><br/>...
详解HTML5表单新增属性
01-19
在H5中可以把form放到页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=testform> <input type=text> </form> <textarea...
HTML5 中新增了哪些表单元素？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-29 648
随着 Web 技术的发展，HTML5 引入了许多新的表单元素和属性，极大地提升了 Web 应用的可用性和用户体验。本文将详细介绍 HTML5 中新增的表单元素，并通过示例代码展示它们的用法和应用场景。接下来，你可以尝试在自己的项目中应用这些技术，创造更加高效和用户友好的 Web 应用。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。而在 HTML5 中，新增了许多专门针对特定类型数据的输入字段，使得表单更加灵活且易于实现复杂的数据输入逻辑。
HTML5新增的标签和属性归纳总结
09-28
3. iframe新增了seamless属性，使得内嵌框架看起来没有边框和边距，并且可以使用srcdoc属性定义框架的内容。 4. base标签的href属性和target属性用于定义默认的链接地址和链接打开的方式。 5. 在有序列表（ol）中...
012day(表单，表单的css样式，post和get，h5新增加的表单type属性值，h5新增的表单属性，h5新增加的表单标签，bfc)
w296932099的博客
07-26 408
一、表单 1、表单的作用：用来收集用户的信息的; 2、表单的组成： ①表单域：（表单的区域） <form name="" method="get/post" action=""></form> ②表单控件 ： <input type="text" value=""/> 3⃣提示信息（请输入姓名） 3、单选框radio 请选择你的性别<input type="radio" name="sex">男 <input type="radio" n
H5学习笔记——form表单
OneKey
03-16 4268
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&
23 H5自定义属性属性值操作
丨Anna丨的博客
10-28 431
23 H5自定义属性属性值操作 H5每一个预定义attribute属性都有一个对应的property属性与之对应。但是自定义属性没有。因此H5提供一个自定义属性属性值的property的操作。 语法 自定义的数据属性名称是以data- 开头的.它必须要遵循XML名称的产生规则规则，该规则是说它只可以包含字母，数字和下面的字符：Dash(-)，点(.)，冒号(:)，下划线(_).此外不应包含ASCII码大写字母 Eg: <div id="test" data-test="test1" d..
优化算法基于四则运算的算术优化算法原理与Python实现：面向图像分割的全局寻优方法研究
最新发布
09-06
内容概要：本文系统介绍了算术优化算法（AOA）的基本原理、核心思想及Python实现方法，并通过图像分割的实际案例展示了其应用价值。AOA是一种基于种群的元启发式算法，其核心思想来源于四则运算，利用乘除运算进行全局勘探，加减运算进行局部开发，通过数学优化器加速函数（MOA）和数学优化概率（MOP）动态控制搜索过程，在全局探索与局部开发之间实现平衡。文章详细解析了算法的初始化、勘探与开发阶段的更新策略，并提供了完整的Python代码实现，结合Rastrigin函数进行测试验证。进一步地，以Flask框架搭建前后端分离系统，将AOA应用于图像分割任务，展示了其在实际工程中的可行性与高效性。最后，通过收敛速度、寻优精度等指标评估算法性能，并提出自适应参数调整、模型优化和并行计算等改进策略。; 适合人群：具备一定Python编程基础和优化算法基础知识的高校学生、科研人员及工程技术人员，尤其适合从事人工智能、图像处理、智能优化等领域的从业者；; 使用场景及目标：①理解元启发式算法的设计思想与实现机制；②掌握AOA在函数优化、图像分割等实际问题中的建模与求解方法；③学习如何将优化算法集成到Web系统中实现工程化应用；④为算法性能评估与改进提供实践参考； 阅读建议：建议读者结合代码逐行调试，深入理解算法流程中MOA与MOP的作用机制，尝试在不同测试函数上运行算法以观察性能差异，并可进一步扩展图像分割模块，引入更复杂的预处理或后处理技术以提升分割效果。
【微信小程序源码】图文信息；欢迎页面，音乐控制.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
bedrock-testing-support-7.0.4.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
【微信小程序源码】物业管理.zip
09-06
资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！ 更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041
grpc-services-1.68.1.jar中文-英文对照文档.zip
09-06
1、压缩文件中包含： 中文-英文对照文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
生成H5新增的表单控件代码阅读选择题10题
04-21
以下为10道HTML5新增表单控件代码阅读选择题，每题包含代码片段和功能识别： 1. **代码片段** ```html ``` **问题**：这段代码实现的功能是？ A. 下拉选择列表 B. 输入内容建议 C. 表单数据加密 D. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值