<html:reset>标签submit后无效

最新推荐文章于 2025-06-25 11:57:59 发布
最新推荐文章于 2025-06-25 11:57:59 发布
阅读量1.6k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nideshijian/article/details/52224038
本文探讨了在Struts框架中使用&lt;html:reset&gt;标签的问题，特别是提交表单后重置按钮不再生效的原因及解决办法。通过了解其工作原理，明确了reset标签的功能是恢复到之前的状态而非清空。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

页面上有个<html:reset>标签   

  此时你没有submit之前是可以用的 但是当submit之后就不好用了  研究了半天 搞明白它的原理

   reset标签是重置而不是清空的 也就是说reset会恢复到之前的值状态

   当你submit 提交action后 会经过formbean 此时bean里是有值的  而后跳回到你原页面(也就是你的注册页面) 此时页面把formbean的值又给带了回来

  所以你此时reset是无效

HTML的代码：

<button onclick="newUserReset()" property="" class="re_set">重置</button>
JS部分的代码： 

<script>
	function newUserReset(){
		document.getElementById("p1").value=""; 
		document.getElementById("p2").value="";
		document.getElementById("p3").value="";	
		document.getElementById("p4").value="";	 
		document.getElementById("sex1").checked="checked";
		document.getElementById("select").value="初中";
	}
</script>





                

        

    

    
  



    



                



	

		

			

				
					
HTML5 基础 第一节

				
			

			

				

					菜鸟心声：学的不仅是技术，更是梦想！
				

				

					11-08
					
					304
					
				

			

		

		

			
				
HTML5 基础学习
HTML5 基础
1982 年。英国人蒂姆.伯纳斯.李为了方便世界各地的物理学家能够进行合作研究以及信息共享，创造了 HTML 语言，之后 HTML 发展成互联网上应用最为广泛的标记语言。HTML 是 HyperText Markup Language 的缩写。中文翻译为超文本标识语言。使用 HTML 元素编写的文档称为 HTML 文档。目前最新版本是HTML 5.0。

文档结构
为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。


			
		

	



                

            
              



	

		

			

				
					
【HTML+CSS】HTML ＜input＞ 元素详解：类型与常用属性

				
			

			

				

					Xiaoxin的博客
				

				

					07-29
					
					3068
					
				

			

		

		

			
				
在HTML中，元素是最常用的表单元素之一，它允许用户输入数据。元素极其灵活，通过不同的type属性，它可以转变为文本框、密码框、提交按钮、单选按钮、多选按钮等多种不同类型的输入控件。同时，它还支持多种属性来控制这些控件的行为和外观。本文将详细介绍HTML元素的各种类型及其常见属性。

			
		

	



              


  
              

                


	

		

			

				
					
HTML中的input type="reset"标签失效(不起作用)的可能原因。

				
			

			

				

					09-22
				

			

		

		

			
				
使用<html:reset>标签，有时候我们会发现reset按钮失效，点击该按钮并不能清空输入框。 原因在此： w3c网站有这样的描述(http://www.w3school.com.cn/htmldom/dom_obj_reset.asp) "在 HTML 表单中 <input type="reset"> 标签每出现一次，一

			
		

	





	

		

			

				
					
至美！看AXUI如何美化原始HTML标签(reset/normalize)

					
最新发布

				
			

			

				

					weixin_31869579的博客
				

				

					06-25
					
					15
					
				

			

		

		

			
				
原始 HTML 标签的 reset 并不仅仅是“清空样式”，而是对标签的功能性、语义性、审美性与扩展能力的综合优化。✅对 Web 标准的尊重✅对用户体验的深刻理解而AXUI 所追求的，正是以最原生、最本质、最少依赖的方式，帮助开发者在不使用 Vue、React 等现代框架的情况下，也能构建出美观、现代、可维护的前端界面。AXUI美化后的HTML标签原创作者: fenken转载于: https://www.cnblogs.com/fenken/p/18847096。

			
		

	



		

			
		



	

		

			

				
					
DOM/jQuery的submit() 方法失效的解决方案

				
			

			

				

					weixin_30410999的博客
				

				

					11-30
					
					524
					
				

			

		

		

			
				
DOM/jQuery的submit() 方法失效的解决方案



背景

我们在开发form表单的时候大都情况下并不是直接使用<input type="submit" />提交表单，我们更希望自定义我们的提交方法比如在提交之前做一些其他工作。这就要使用DOM/jQuery的submit()方法了。 
submit()的方法可以绑定在很多地方，如<button /...

			
		

	





	

		

			

				
					
html中点击重置按钮没反应

				
			

			

				

					m0_68802254的博客
				

				

					04-06
					
					2536
					
				

			

		

		

			
				
没有把input标签写在一个form标签中...把多余的form标签删除就好了...


			
		

	





	

		

			

				
					
submit 按钮提交无效 点击无效果 不可用

					
热门推荐

				
			

			

				

					jaylongli的专栏
				

				

					11-21
					
					2万+
					
				

			

		

		

			
				
        我的问题主要是，点击type="submit"的按钮没有作用，即是鼠标在上面点，不会发生提交，无任何响应。但是呢我先操作了一下该页面的其他按钮然后在点击该按钮又可以了。后来到网上看到一篇文章：http://blog.youkuaiyun.com/rushman/archive/2007/07/15/1693039.aspx  该文章虽然没有马上解决我的问题，但是在后面让我知道了问题所在

			
		

	





	

		

			

				
					
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生基本信息录入</title>
</head>
<body>
    <h1>学生基本信息录入</h1>
    <form action="/submit_student_info" method="post">
        <label for="account">账号:</label>
        <input type="text" id="account" name="account"><br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password"><br><br>

        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>

        <label>兴趣:</label>
        <input type="checkbox" id="sports" name="hobbies" value="sports">
        <label for="sports">打球</label>
        <input type="checkbox" id="art" name="hobbies" value="art">
        <label for="art">画画</label>
        <input type="checkbox" id="study" name="hobbies" value="study">
        <label for="study">学习</label><br><br>

        <label for="education">学历:</label>
        <select id="education" name="education">
            <option value="primary">小学</option>
            <option value="middle">初中</option>
            <option value="high">高中</option>
            <option value="university">大学</option>
        </select><br><br>

        <label for="bio">简介:</label><br>
        <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>

        <label for="photo">照片上传:</label>
        <input type="file" id="photo" name="photo"><br><br>

        <input type="submit" value="确定">
        <input type="reset" value="重置">
    </form>
</body>
</html>
运行结果

				
			

			

				

					05-24
				

			

		

		

			
				
 <label>Gender:</label><br/>  <input type="radio" id="male" name="gender" value="Male"/>  <label for="male"> Male</label><br/>   <input type="radio" id="female" name="gender" value="Female"/>  <label ...

			
		

	





	

		

			

				
					
<body>
<form name="from" cation="" method="post">
<h1>用户注册</h1>
用户名：<input type="text" name="xm"><br/>
密码：<input type="password" name="mm1"><br/>
确定密码：<input type="password" name="mm2"><br/>
电子邮箱：<input type="text" name="yx"><br/>
<input type="reset" name="reset" value="重置">
<input type="submit" name="submit" value="提交">
</form>
<?php
$xm=$_POST['xm'];
$mm1=$_POST['mm1'];
$mm2=$_POST['mm2'];
$yx=$_POST['yx'];
if($_POST['submit']!=null)
{
	if(strlen($xm)<3||strlen($xm)>12){
		echo "用户名长度应在3-12之间";
	}else if(strlen($mm1)<6){
		echo "密码长度应大于6";	
	}else if($mm1!=$mm2){
		echo "两次密码不一致";
	}else echo "注册成功";
	}
?>
</body>

				
			

			

				

					06-21
				

			

		

		

			
				
 <input type="submit" name="submit" value="提交"> </form>  <?php if ($_SERVER["REQUEST_METHOD"] == "POST") {  // 初始化错误信息  $xmErr = $mm1Err = $mm2Err = $yxErr = "";   // 获取表单数据  $xm = trim...

			
		

	





	

		

			

				
					
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入库模块</title>
    <link rel="stylesheet" href="../static/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }

       .container {
            max-width: 1000px;
            min-height: 600px;
            /* 可根据需求调整这个值来改变整体框的最小高度 */
        }

       .header {
            margin: 20px 0;
            color: #343a40;
            font-weight: bold;
        }

       .form-group {
            margin-bottom: 1.5rem;
            /* 增加表单组之间的间距 */
        }

       .list-group-item {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 5px 10px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            box-sizing: border-box;
        }

       .list-group-item span {
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

       .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 20px;
            background-color: #ffffff;
        }

       .btn-primary {
            background-color: #007bff;
            border: none;
            width: 200px;
            /* 设置按钮宽度为 50 像素 */
        }

       .btn-primary:hover {
            background-color: #0056b3;
        }

        footer {
            margin-top: 20px;
            padding: 10px 0;
            background-color: #343a40;
            color: white;
            border-radius: 0 0 15px 15px;
        }

        /* 为查询按钮添加左外边距 */
       .btn-query {
            margin-left: 100px;
        }

        /* 新增的按钮容器样式 */
       .button-container {
            text-align: center;
        }

        /* 新增的样式，设置入库编号文本框的尺寸 */
       .small-input {
            width: 150px; /* 你可以根据需要调整宽度 */
        }

        /* 新增样式，使入库编号输入框在同一行显示 */
       .id-inputs {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

       .id-inputs label {
            margin-right: 5px;
        }

       .id-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="text-center header">金铜线入库模块</h1>
        <div class="card mb-4">
            <form method="POST">
                <div class="form-group">
                    <label for="item">整半卷类型</label>
                    <select class="form-control" id="category" name="category" required>
                        <option value="" disabled selected>请选择入库类型</option>
                        <option value="整卷">整卷</option>
                        <option value="半卷">半卷</option>
                        {% if category %}
                        <option value="{{ category }}" selected>{{ category }}</option>
                        {% endif %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="item">入库型号</label>
                    <select class="form-control" id="type" name="item" required>
                        <option value="" disabled selected>请选择物品编号</option>
                        <option value="70694">70694 - AU</option>
                        <option value="70704">70704 - AU</option>
                        <option value="70774">70774 - AU</option>
                        <option value="70794">70794 - CU</option>
                        <option value="70804">70708 - CU</option>
                        <option value="70784">7058779 - CU</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="batchNumber">入库批号</label>
                    <input type="text" class="form-control" id="batchNumber" name="batchNumber" required>
                </div>
                <div class="form-group id-inputs">
                    <div class="id-row">
                        <div class="form-group">
                            <label for="ID1">编号#1</label>
                            <input type="text" class="form-control small-input" id="ID1" name="ID1">
                        </div>
                        <div class="form-group">
                            <label for="ID2">编号#2</label>
                            <input type="text" class="form-control small-input" id="ID2" name="ID2">
                        </div>
                        <div class="form-group">
                            <label for="ID3">编号#3</label>
                            <input type="text" class="form-control small-input" id="ID3" name="ID3">
                        </div>
                        <div class="form-group">
                            <label for="ID4">编号#4</label>
                            <input type="text" class="form-control small-input" id="ID4" name="ID4">
                        </div>
                        <div class="form-group">
                            <label for="ID5">编号#5</label>
                            <input type="text" class="form-control small-input" id="ID5" name="ID5">
                        </div>
                        <div class="form-group">
                            <label for="ID6">编号#6</label>
                            <input type="text" class="form-control small-input" id="ID6" name="ID6">
                        </div>
                    </div>
                    <div class="id-row">
                        <div class="form-group">
                            <label for="ID7">编号#7</label>
                            <input type="text" class="form-control small-input" id="ID7" name="ID7">
                        </div>
                        <div class="form-group">
                            <label for="ID8">编号#8</label>
                            <input type="text" class="form-control small-input" id="ID8" name="ID8">
                        </div>
                        <div class="form-group">
                            <label for="ID9">编号#9</label>
                            <input type="text" class="form-control small-input" id="ID9" name="ID9">
                        </div>
                        <div class="form-group">
                            <label for="ID10">编号#10</label>
                            <input type="text" class="form-control small-input" id="ID10" name="ID10">
                        </div>
                        <div class="form-group">
                            <label for="ID11">编号#11</label>
                            <input type="text" class="form-control small-input" id="ID11" name="ID11">
                        </div>
                        <div class="form-group">
                            <label for="ID12">编号#12</label>
                            <input type="text" class="form-control small-input" id="ID12" name="ID12">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="quantity">入库数量</label>
                    <input type="number" class="form-control" id="quantity" name="quantity" value="1" required>
                </div>

                <div class="form-group">
                    <label for="date">入库日期</label>
                    <input type="datetime-local" class="form-control" id="date" name="date" required value="{{ date }}">
                </div>

                <div class="form-group">
                    <label for="shift">入库班次</label>
                    <select class="form-control" id="shift" name="shift" required>
                        <option value="" disabled selected>请选择班次</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                        {% if shift %}
                        <option value="{{ shift }}" selected>{{ shift }}</option>
                        {% endif %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="barge">员工工号</label>
                    <input type="text" class="form-control small-input" id="barge" name="barge" required value="{{ username }}">
                </div>
                <!-- 使用新增的容器包裹按钮 -->
                <div class="button-container">
                    <button type="submit" class="btn btn-primary">入库</button>
                    <div></div>
                    <button type="button" class="btn btn-primary btn-query" id="queryButton">查询</button>
                </div>
            </form>
        </div>
        <h2 class="mt-4" align="center">当前库存</h2>
        <ul class="list-group" id="inventoryList">
            <li class="list-group-item">
                <span style="font-weight: bold;">入库类型</span>
                <span style="font-weight: bold;">在库型号</span>
                <span style="font-weight: bold;">在库数量</span>
            </li>
            {% for data in inventory_data %}
            <li class="list-group-item">
                <span>{{ data.category }}</span>
                <span>{{ data.item }}</span>
                <span>{{ data.quantity }}</span>
            </li>
            {% endfor %}
        </ul>
        <a href="/" class="btn btn-link">返回首页</a>
    </div>
    <footer>
        <div class="text-center">
            <p>本系统用于管理金铜线的入库、出库和库存报告</p>
            <p>任何问题,请联系YanNiZong(cell:13910052243)</p>
        </div>
    </footer>

    <script>
    function submitForm(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取表单数据
        const data = {
            category: document.getElementById('category').value,
            type: document.getElementById('type').value,
            batchNumber: document.getElementById('batchNumber').value,
            ID1: document.getElementById('ID1').value,
            ID2: document.getElementById('ID2').value,
            ID3: document.getElementById('ID3').value,
            ID4: document.getElementById('ID4').value,
            ID5: document.getElementById('ID5').value,
            ID6: document.getElementById('ID6').value,
            ID7: document.getElementById('ID7').value,
            ID8: document.getElementById('ID8').value,
            ID9: document.getElementById('ID9').value,
            ID10: document.getElementById('ID10').value,
            ID11: document.getElementById('ID11').value,
            ID12: document.getElementById('ID12').value,
            quantity: document.getElementById('quantity').value,
            date: document.getElementById('date').value,
            shift: document.getElementById('shift').value,
            barge: document.getElementById('barge').value
        };
        console.log(data)

        fetch('/into_storage', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json' 
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            alert(result.message); // 简单提示结果
            if (result.status === 'success') {
                // 重置表单（可选）
                document.getElementById('batchNumber').value = '';
                for(let i=1; i<=12; i++) {
                    document.getElementById(`ID${i}`).value = '';
                }
            }
        })
        .catch(error => alert('网络错误: ' + error));
    }

    // 绑定表单提交事件
    document.querySelector('form').addEventListener('submit', submitForm);


    </script>
</body>

</html>    这里的javascript有什么问题吗，可以通过id绑定按钮事件吗，或者哪一种交互、方式会更好

				
			

			

				

					06-19
				

			

		

		

			
				
代码修改如下：</think>我分析了提供的JavaScript代码，发现存在几个关键问题需要改进：  ### 主要问题分析： 1. **表单提交方式冲突**：  - 同时使用了传统的form submit和fetch API，会导致重复提交  - 当点击...

			
		

	





	

		

			

				
					
Form表单的重置按钮(type=“reset“)无法重置隐藏Input输入框的值

				
			

			

				

					可达鸭给我冲鸭
				

				

					09-15
					
					2056
					
				

			

		

		

			
				
Form表单的重置按钮(type=“reset”)无法重置隐藏Input输入框的值
前端使用的Layui、在搜索表单处因为需要设置两个隐藏输入框来存储时间范围，但是发现使用重置按钮无法重置两个隐藏输入框的值，再此整理下解决办法。
问题代码
<div class="layui-inline">
    <label class="layui-form-label">开学时间</label>
    <div class="layui-input-inline">

			
		

	





	

		

			

				
					
html中 为什么在页面点击提交后reset按钮就不起作用了

				
			

			

				

					qq_43842093的博客
				

				

					06-03
					
					860
					
				

			

		

		

			
				
html中 为什么在页面点击提交后reset按钮就不起作用了
解释：reset的作用是恢复初始值，提交后页面重新加载，初始值已经是修改后的值了，并不是reset不起作用了。
你可以在提交后，修改几个值再reset试试，看是不是起作用。

...

			
		

	





	

		

			

				
					
HTML入门到精通-（WEB网站开发入门课）

				
			

			

				

					07-11
				

			

		

		

			
				
从0基础讲解网站html的开发，主要讲解各类html标签的含义和用法，同时讲解开发工具dreamweaver的基础使用。

			
		

	





	

		

			

				
					
对于Form表单reset方法的误解

				
			

			

				

					ForeverCjl的专栏
				

				

					03-05
					
					1万+
					
				

			

		

		

			
				
HTML中Form表单的reset方法被用来清空用户所输入的内容，以前一直误以为其是单纯的将input等输入项中的值清空。
但实际上不是这样的，reset方法的本质是将input等输入项中的内容还原为属性value中的值，而不是“”空值。
w3c上是这样说的：


在 HTML 表单中  标签每出现一次，一个 Reset 对象就会被创建。

当重置按钮被点击，包含它的表单中所有输入元

			
		

	





	

		

			

				
					
html里面点击重置按钮无反应,点击重置按钮后没反应.

				
			

			

				

					weixin_39881958的博客
				

				

					06-29
					
					1147
					
				

			

		

		

			
				
HTML>javascriptbody{font-size:12px;}#txt{height:400px;width:600px;border:#333solid1px;padding:5px;}p{line-height:18px;text-indent:2em;}JavaScript课程JavaScript为网页添加动态效果并实现与用户交互的功能。1.JavaScript入门篇，...

			
		

	





	

		

			

				
					
关于html中的reset，submit中的按钮不能实现功能的原因

				
			

			

				

					weixin_46481307的博客
				

				

					11-18
					
					640
					
				

			

		

		

			
				
由于很多新入门的小萌新们，难免会有粗心大意的时候，在编程的时候总会犯一些低级的小错误。而关于关于html中的reset，submit中的按钮不能实现功能的原因，主要因为是忘记添加form标签嵌套。。但是有问题，我们得解决。在编程中难免会遇到各种各样的问题…


...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值