php重置按钮,input 标签中 reset 重置按钮点击后表单不能清空的原因

问题说明

input 标签中的 reset 按钮有重置表单的效果，比如，将 text、password textarea 用户输入的内容清空，将单选、多选等恢复默认选择状态等。

一般的表单提交不会用到 reset 按钮，要么提交，要么取消。最近有一需求，需要表单中存在重置按钮。但点击 reset 按钮，表单并没有被重置。

原因分析

网上找到了 reset 不能清空的原因：reset 重置是将表单中的元素标签恢复到初始值或初始状态，当表单中的元素标签存在 value、checked、selected 等属性，reset 重置会恢复到这些属性定义的值或者状态。

首先，reset 必须得在 form 表单内才能生效，其次，input 输入类型的元素标签不能设置默认的 value 值，checkbox、radio 不能设置默认的 checked 选中属性，select 的 option 选择项不能设置 selected 属性值。否则 reset 就达不到置空的效果。

当然，像 php 这样可以嵌入 HTML 的写法中，一般会设置默认值或默认状态，这时候只能通过 js(jQuery) 脚本来清空了。$('input[type="reset"]').click(function () {

$('input[type="text"]').removeAttr('value');

$('input[type="password"]').removeAttr('value');

$('input[type="checkbox"]').removeAttr('checked');

$('input[type="radio"]').removeAttr('checked');

$('select option').removeAttr('selected');

});

这里使用 removeAttr 删除属性，而不是设置 value 为空字串，是因为 reset 按钮本身还绑定了 $('form')[0].reset() 方法。绑定点击事件先执行，将 value 值设置为空字串，然后执行表单重置，value 值又恢复成了原来的，就相当于没改。所以，必须要使用 removeAttr 删除属性才能生效。

[notice]查找资料过程中注意到，jQuery 没有自己的 form reset 方法，即 $('form').reset() 不存在，会报错。可以使用 DOM 的 reset 方法来重置表单：$('form')[0].reset()。[/notice]

php重置按钮,input 标签中 reset 重置按钮点击后表单不能清空的原因相关推荐

input标签中常见的type属性介绍
input标签中常用的type属性介绍 type="text"--->文本框type="password"--->密码框type="rad ...
html中加减号怎么输入,jQuery 实现点击加减号改变input标签中的value值,该怎么解决...
jQuery 实现点击加减号改变input标签中的value值我想点击左右两边的加减号,让中间input标签中的value属性值做出相应的改变,jQuery怎么实现? ------解决思路 ...
html中input标签中type属性小总(包含html5新增表单属性)
前言 HTML5新增了许多属性和方法,其中一些就有input标签中 type属性. 有关于input中type的全部可取值如下 1.button 2.text 3.time(会呈现表的形状) 4. ...
去掉h5播放器中voide标签中的下载按钮
去掉H5播放器中voide标签中的下载按钮,参考代码: <video width="320" height="240" controls> & ...
HTML5初学——列表标签（09-12课）和表单标签（13-30课）、查阅文档
09.无序列表(unorder list) 1.列表:如果说表格用于显示数据,那么列表就是用于布局的 2.列表最大的特点就是整齐.整洁.有序.它作为布局会更加自由和方便 3.分为三类:无序列表.有序列 ...
表单标签的作用、常用的表单控件
1.1 表单标签的作用作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式). 可见性:在网页上是不可见的. 1.2 form常用的属性 Form标签是表单标签的一个根标签 1.3 ...
html中表单元素中的单选框,Html表单元素及表单元素详解
大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素--文本框 5.表单元素button 6.表单元素--单选.多选 7.表单元素--select 8.表单元素--textarea ...
Winform开发框架中工作流模块的业务表单开发
在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...
form表单嵌套，用标签的form属性来解决表单嵌套的问题
form表单嵌套,用标签的form属性来解决表单嵌套的问题参考文章: (1)form表单嵌套,用标签的form属性来解决表单嵌套的问题 (2)https://www.cnblogs.com/jpfs ...
解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法.(推荐第二种方法) 提交数据的四种编码方式一,应用/ X WWW的窗体-ur ...

php重置按钮,input 标签中 reset 重置按钮点击后表单不能清空的原因

php重置按钮,input 标签中 reset 重置按钮点击后表单不能清空的原因相关推荐

最新文章

热门文章