<a href>控制表单提交

最新推荐文章于 2022-10-03 00:01:28 发布
原创 最新推荐文章于 2022-10-03 00:01:28 发布 · 639 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#表单 #form #a href

本文介绍了一个简单的表单提交示例，通过HTML代码实现表单的提交功能，并使用JavaScript触发提交过程。

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

<form action='提交表单路径' method='get/post' name='reqForm' >
</form>
<a href='javascript:document.reqForm.submit();' >提交</a>


                

        

    

    
  



    

      

        

            

              
                
                  fefdsfa
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
关于控制submit 控制表单提交问题

				
			

			

				

					AB1992426的专栏
				

				

					10-01
					
					899
					
				

			

		

		

			
				
关于控制submit 控制表单提交问题

			
		

	



                

            
              



	

		

			

				
					
超链接 a href 提交表单通过get/post方式

				
			

			

				

					monster的博客
				

				

					11-25
					
					6545
					
				

			

		

		

			
				
我们知道超链接一般是通过get方式提交表单的，如下列子：
	<body align="center">
	 超链接一般是通过get方式提交表单的，如下列子：
	  <a href='index.jsp?page=1&text?sss'>这是超链接提交-->首页</a> <br>
	
	 如果想用超链...

			
		

	



              


  
              

                


	

		

			

				
					
超链接 a href 提交表单通过post方式

					
热门推荐

				
			

			

				

					东语的专栏
				

				

					03-28
					
					1万+
					
				

			

		

		

			
				
我们知道超链接一般是通过get方式提交表单的，如下列子：
首页  
如果想用超链接post这个表单该怎么做呢，请看下面：
   
  
	  
	  
	 
	  
	首页

			
		

	





	

		

			

				
					
HTML常用标签之超链接标签

				
			

			

				

					xinxin的博客
				

				

					10-03
					
					2652
					
				

			

		

		

			
				
2、内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如< a href=“first_page.html” >首页< /a >。第二步：找到目标位置标签，里面添加一个id属性=刚才的名字，如：< h3 id=“two”>第二集介绍< /h3 >3、空链接：如果编写程序的时候没有确定链接目标时，可使用：< a href = “#”> 首页 < /a >。1、外部链接：例如< a href = “http://www.baidu.com”>百度< /a >。

			
		

	



		

			
		



	

		

			

				
					
<body>
<form action="<%=basePath%>/student/queryAllStuServlet" method="post">
	<input type="text" name="truename" placeholder="请输入姓名进行搜索">
	<input type="text" name="osid" value="modify" style="display: none">
	<input type="text" name="page" value="1" style="display: none">
	<input type="submit" value="搜索">
</form>
<table border="1">
	<tr>
		<td>id</td>
		<td>昵称</td>
		<td>姓名</td>
		<td>性别</td>
		<td>出生日期</td>
		<td>所在专业</td>
		<td>兴趣</td>
		<td>备注</td>
		<td>操作</td>
	</tr>
	<c:forEach var="student" items="${stus}" varStatus="status">
		<tr <c:if test="${status.index % 2 == 0}">bgcolor="#F0F8FF"</c:if>>
			<td>${student.id}</td>
			<td>${student.nicheng}</td>
			<td>${student.truename}</td>
			<td>
				<c:choose>
					<c:when test="${student.xb == 1}">男</c:when>
					<c:otherwise>女</c:otherwise>
				</c:choose>
			</td>
			<td>${student.csrq}</td>
			<td>${student.zy}</td>
			<td>${student.xq}</td>
			<td>${student.bz}</td>
			<td><a href="student/modifyOneStuServlet?id=${student.id}">修改</a></td>
		</tr>
	</c:forEach>

</table>这段代码介绍，及思考

				
			

			

				

					06-14
				

			

		

		

			
				
 <button type="submit">提交</button> </form> ``` **核心流程**： 1. 用户填写表单 → 点击提交按钮  2. 表单数据通过POST请求发送到`StudentController`的`/add`映射  3. Controller调用`StudentService`处理业务...

			
		

	





	

		

			

				
					
<!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, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>   
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
    <link rel="stylesheet" href="/CSS/common.css">
    <link rel="stylesheet" href="/CSS/login.css">
    <script src="/JS/login.js"></script>
    <title>登录</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
        <a class="navbar-brand" href="index.html">主页</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation"data-toggle="dropdown" >
        <span class="navbar-toggler-icon" data-toggle="dropdown"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="ranking.html">排行</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="login.html">我的</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="new.html">最新</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">联系我们</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="true">
              全部
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">电视</a></li>
              <li><a class="dropdown-item" href="#">动漫</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
        </div>
        </div>
        </nav>
    <div class="con">
    <div class="login">
    <div class="login_logo sign-in-container">
        <form action="" method="post" name="login">
            <h1>登录</h1>
            <span>或使用您的账号</span>
            <input type="text" placeholder="name" name="name" id="name">
            <input type="password" placeholder="password" name="password" id="password">
            <input type="submit"value="登录" class="login_btn" onClick="return getStorage()">
            <p><a href="#">忘记密码</a></p>
        </form>
    </div>
    <div class="other_box">
        <div class="other">
            <div class="overlay-panel overlay-right">
                <h1>没有账号？</h1>
                <p>立即注册加入我们吧</p>
                <a href="/HTML/register.html">
                <button class="click" id="signUp" >注册</button>
            </a>
            </div>
        </div>
    </div>
       </div> 
    </div>
</body>
</html> 我需要注册界面的表单验证

				
			

			

				

					06-09
				

			

		

		

			
				
首先，HTML结构示例：```html<formid="registerForm"><div><labelfor="username">用户名</label><inputtype="text"id="username"name="username"><spanid="usernameError"class="error"></span></div><div><labelfor...

			
		

	





	

		

			

				
					
为什么在html页面点击选择之后进行表单的提交，不能跳转到相应的asp页面中！！求求帮忙！！
这是html部分的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>性格测试</title>
</head>
<body>
<form method="get" action="grade.asp">
  <p>从排队看你的性格类型？</p>
  <p>通常在排队的时候你来晚了，下面哪种方式属于你或者是与你比较接近？请选择一种：</p>
  <a href="grade.asp?choice=1"><input type="radio" name="choice" value="1">（1）规规矩矩地排在最后一个。</a><br>
  <a href="grade.asp?choice=2"><input type="radio" name="choice" value="2">（2）面带微笑，随便排在最后。</a><br>
  <a href="grade.asp?choice=3"><input type="radio" name="choice" value="3">（3）满腹牢骚，怪自己来得太晚或是排队的
    人太多，并试着去加塞，别人不让还不高兴，甚至与人争吵。</label></a><br>
  <a href="grade.asp?choice=4"><input type="radio" name="choice" value="4">（4）不加塞，帮着维持秩序或者是加塞，呵斥别人让开点。</a>
  <br><br>
  <input type="submit" value="已选好，看看结论">
  <input type="reset" value="重新选">
</form>
</body>
</html>
这是asp部分的代码：

<%@ LANGUAGE="VBScript" %>
<html>
<head>
<meta charset="UTF-8">
<title>结果</title>
</head>
<body>
<%
Dim a
a = Request.QueryString("choice")
Select Case CInt(a)
    Case 1
        Response.Write "1完美型"
    Case 2
        Response.Write "2平和型"
    Case 3
        Response.Write "3活泼型"
    Case 4
        Response.Write "4领导型"
End Select
%>
</body>
</html>


				
			

			

				

					05-28
				

			

		

		

			
				
- 使用JavaScript控制表单提交行为。例如：  ```javascript function submitForm() {  document.getElementById("submitButton").disabled = true; // 禁用提交按钮  return true; } ```  结合HTML表单使用：  ```...

			
		

	





	

		

			

				
					
<a href="http://127.0.0.1:9999/rq">
             <button>容器</button>
             </a>   
             <label for="search">搜索:</label>
<input type="search" id="search" name="search" placeholder="请输入搜索内容">剧中，在搜索旁边加个button提交

				
			

			

				

					03-08
				

			

		

		

			
				
<think>好的，我现在需要帮助用户解决在搜索框旁边添加提交按钮的问题。首先，用户提供的代码片段中有两个部分：一个链接到... <button type="submit">提交</button> </form> $$  实现步骤说明：  1. **表单封装**

			
		

	





	

		

			

				
					
<body style="background-color:#1c77ac; background-image:url(images/1.png);  height:100%;width:100%;background-size:cover;">        <div id="mainBody">       <div id="cloud1" class="cloud"></div>       <div id="cloud2" class="cloud"></div>     </div>     <div class="logintop">         <span>欢迎登录在线考试系统</span>         <ul>     <li><a href="#">回首页</a></li>     <li><a href="#">帮助</a></li>     <li><a href="#">关于</a></li>     </ul>         <base href="<%=basePath%>">          <title>登录</title>      	     <link rel="stylesheet" href="css/login.css">   </head>      <body>     <section>    <!--背景色-->          <div class="box">                  <div class="container">             <div class="form">                 <span style="text-align: center"><h2>学生考试管理系统</h2></span>                 <form action="login" method="post">                     <div class="inputBox">                        <input type="text" name="user" id="user"/ >                   </div>                     <div class="inputBox">                         <input type="password" name="pw"/ >                     </div>                     <div class="danxuan" style="text-align: center">                                          <input type="radio" name="sf" value="0" checked="checked"/>管理员                     <input type="radio" name="sf" value="1"/>教师                     <input type="radio" name="sf" value="2"/>学生                     </div>                     <div class="inputBox">                         <input type="submit" value="登录"/>                     </div>                                         <span style="text-align: center"></span>                 </form>              </div>         </div>     </div>          </div>

				
			

			

				

					06-13
				

			

		

		

			
				
登录页面的主体部分包含了一个标题“学生考试管理系统”，一个表单和一个提交按钮。表单包含了三个输入框，分别是用户名、密码、身份（管理员、教师或学生），以及一个“登录”按钮。该页面的样式由一个名为“login....

			
		

	





	

		

			

				
					
2种表单提交a href =“acitonServlet?key=value“

				
			

			

				

					zhansan的博客
				

				

					04-13
					
					161
					
				

			

		

		

			
				
另外一种提交方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF‐8">
<title>用户注册</title>
</head>
<body>
<h3>用户注册</h3>
<form action="server" method="get">
<!‐‐隐藏表单项‐‐>
<input type="hidden..

			
		

	





	

		

			

				
					
怎么用a标签提交表单？

				
			

			

				

					m0_52212192的博客
				

				

					06-14
					
					1511
					
				

			

		

		

			
				
怎么用a标签提交表单？
在提交表单的时候，我们可能会常常遇到一些各种各样的困惑，比如说，在jsp里使用表单提交，用input 的话并不好看，那么有什么方法可以不用input标签呢？？？
<form action="index.jsp" method="post" id="myform">
名字：<input type="test" name="stu_name"/>
</form>
<a href="#" onclick="document.getElementBy

			
		

	





	

		

			

				
					
点击a标签提交form表单

				
			

			

				

					zhangqian9527的博客
				

				

					10-24
					
					6793
					
				

			

		

		

			
				
今天在做用户管理分页的时候碰到一个问题，将分页的按钮单独写一个页面，在显示的页面将分页的按钮include进来；
但是在点击a标签的时候，会生成两个request，仔细看代码都没有问题，后来发现，a标签在添加href=“javascript:void(0)”时，只生成一个request；


原因：
点击a标签提交表单，如果a标签没有href=“javascript:void(0)” 属

			
		

	





	

		

			

				
					
<a> href Post提交请求

				
			

			

				

					weixin_34032779的博客
				

				

					08-25
					
					1382
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
html中<a href> </a>的用法

				
			

			

				

					ydm东方旭日的专栏
				

				

					02-17
					
					1万+
					
				

			

		

		

			
				
主要是用来进行跳转、链接的，实现的核心就是通过href属性实现的。
href的内容分为两类：
一、协议+地址 

主要是用来进行访问
常见的协议有
1）Http
百度

2）javascript
联系站长

3）mailto
联系站长

当然还有其他的协议
二、地址
 主要是用来进行跳转
2.1、绝对跳转
   百度
2.2、相对跳转有如下方式，需要了解（以

			
		

	





	

		

			

				
					
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>Contact</title>   
        <link rel="stylesheet" type="text/css" href="css/style_mobile.css">        
        <script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script language="javascript" type="text/javascript" src="js/action.js"></script>
	</head>
	<body>  
      <div id="container"> 
        
		<div id="header">
		 <div id="logo">David Lanham</div>
		  <ul>                              
   		    <li><a href="Index.html">Blog</a></li>
            <li><a href="Work.html">Work</a></li>
            <li><a href="About.html">About</a></li>
            <li><a class="active" href="Contact.html">Contact</a></li>             
          </ul> 
        </div>
	    	
		<div id="content">
          <p class="content_text">Contact</p>
          
		  <div id="from">
          
           <tr><p class="font">Name<font color="#FF0000">*</font></p></tr>
           <tr><input class="input" type="text" name="name" id="name" ></tr>
           <tr> <p class="font">Email<font color="#FF0000">*</font></p></tr>
           <tr><input class="input" type="text" name="email" id="email"></tr>
           <tr> <p class="font">Message<font color="#FF0000">*</font></p></tr>
           <tr><textarea class="msginput" type="text" name="message" id="message"></textarea></tr>
           <tr><input class="button" type="button" value="SUBMIT" id="button"></tr> 
          
          </div>
        </div>
        
		<div id="footer">
           <div id="fttext">
           <p>All illustrations on this site are from the very talented</p>
           <p> illustrator and designer David Lanham. Make sure to</p>
           <p>check out his work at <a href="#">DavidLanham.com.</a></p>
           </div> 
           
           <div id="ftimage">
           <a href="#"><img src="images/footer_baby.png"></a>
           </div>
           
           <div id="ft_text">
           <p class="ftname">David Lanham</p>
           <p class="ftabout">I create beatufiul illustrations and designs.<a href="#">About me.</a></p>
           </div>
           
           <ul>
            <li><a href="#"><img src="images/footer_bird.png"></a></li>
            <li><a href="#"><img src="images/footer_ball.png"></a></li>
            <li><a href="#"><img src="images/footer_be.png"></a></li>
            <li><a href="#"><img src="images/footer_@.png"></a></li>
            <li><a href="#"><img src="images/footer_message.png"></a></li>
           </ul>            
        </div>
        
	  </div>
	</body>
</html>

请检查上述前端html代码是否有问题，里面的提交按钮一直是灰色的，无法点击


					
最新发布

				
			

			

				

					08-08
				

			

		

		

			
				
你提供的 HTML 代码中存在一些结构和语义上的问题，尤其是 `<tr>` 标签被错误地用于非表格结构中。这虽然不会直接影响按钮的可点击状态，但属于不规范的 HTML 使用。至于“提交按钮一直是灰色的，无法点击”，这通常与按钮的状态（`disabled`）或样式（CSS）有关。

---

### 问题分析

你提到“提交按钮一直是灰色的，无法点击”，这通常意味着：

1. 按钮可能被设置了 `disabled` 属性。
2. 或者按钮的样式被 CSS 禁用了交互（如 `pointer-events: none`）。
3. 或者按钮的点击事件被 JavaScript 阻止（如未正确绑定事件）。

我们先检查 HTML 中的按钮部分：

```html
<input class="button" type="button" value="SUBMIT" id="button">
```

这个按钮是正常的，没有看到 `disabled` 属性。因此，问题可能出在：

- **CSS 样式**：`.button` 类可能设置了 `pointer-events: none` 或者 `opacity` 降低视觉效果。
- **JavaScript 控制**：可能有脚本在页面加载后禁用了按钮（例如根据输入框是否为空动态启用/禁用按钮）。
- **HTML 结构问题**：使用了 `<tr>` 标签包裹 input，这在非表格结构中无效，虽然不影响按钮功能，但属于结构错误。

---

### 解决方案

#### ✅ 1. 检查 CSS 中 `.button` 的样式

查看 `css/style_mobile.css` 文件中是否对 `.button` 设置了以下样式：

```css
.button {
    pointer-events: none;
    opacity: 0.5;
}
```

如果是这样，按钮看起来是灰色且无法点击。你需要移除或修改这些样式。

#### ✅ 2. 检查 JavaScript 是否禁用了按钮

查看 `js/action.js` 是否有类似如下代码：

```js
$('#button').prop('disabled', true);
```

或者：

```js
$('#button').css('pointer-events', 'none');
```

这会导致按钮被禁用。你可以先在页面加载时测试是否按钮被默认禁用：

```js
$(document).ready(function () {
    $('#button').prop('disabled', false); // 或者移除相关CSS
});
```

#### ✅ 3. 修复 HTML 结构

你使用了 `<tr>` 标签包裹 `<input>` 和 `<p>`，但没有 `<table>` 和 `<tbody>`，这是不规范的 HTML。请将表单结构改为如下：

```html
<div id="from">
    <p class="font">Name<font color="#FF0000">*</font></p>
    <input class="input" type="text" name="name" id="name">

    <p class="font">Email<font color="#FF0000">*</font></p>
    <input class="input" type="text" name="email" id="email">

    <p class="font">Message<font color="#FF0000">*</font></p>
    <textarea class="msginput" name="message" id="message"></textarea>

    <input class="button" type="button" value="SUBMIT" id="button">
</div>
```

---

### 示例修复后的代码（HTML + JS）

#### ✅ 修改后的 HTML 表单结构：

```html
<div id="from">
    <p class="font">Name<font color="#FF0000">*</font></p>
    <input class="input" type="text" name="name" id="name">

    <p class="font">Email<font color="#FF0000">*</font></p>
    <input class="input" type="text" name="email" id="email">

    <p class="font">Message<font color="#FF0000">*</font></p>
    <textarea class="msginput" name="message" id="message"></textarea>

    <input class="button" type="button" value="SUBMIT" id="button">
</div>
```

#### ✅ JS 示例：确保按钮可点击

```js
$(document).ready(function () {
    $('#button').on('click', function () {
        var name = $('#name').val();
        var email = $('#email').val();
        var message = $('#message').val();

        if (name && email && message) {
            alert("Form submitted!");
            // 这里可以添加提交逻辑
        } else {
            alert("Please fill all fields.");
        }
    });
});
```

---

### ✅ 建议优化点

1. 使用语义化标签，比如 `<form>`、`<label>` 等来增强可访问性和结构清晰度。
2. 不推荐使用 `<font>` 标签，建议使用 CSS 来控制样式。
3. 如果你想根据输入内容动态启用/禁用按钮，可以添加输入监听器。

---

###

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值