html 表单一定要用submit提交吗

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 表单一定要用submit提交吗相关的知识，希望对你有一定的参考价值。

我用form 做参数传递，做了一个<a href="register.jsp">链接，将本页面的表单传递到register.jsp页面， 想用链接来跳转页面，因为submit不好看，应该怎么做啊？

不一定需要用submit提交

1. html提交表单

HTML提交表单简单易操作，依靠在<form>标签对中的<input type='submit'>提交按钮进行请求发送和参数提交。其中form标签的post属性决定提交方式是get还是post。

servlet或者action根据name属性获取提交的参数

2. HTML超链接请求

只使用html发送超链接请求的话，方式比较单一。传递参数值是被写死的，并且只能使用get方式去发送请求。如果不用javascript的话，超链接还是作为一个页面跳转按钮比较合适。
jsp代码

3. Javascript提交表单

使用js和html提交表单的话就可以灵活很多，因为js不仅有针对页面很多的触发事件，而且可以获取到html页面元素的信息。

3.1 form表单提交前触发事件

这里主要是介绍下在提交form表单之前的onsubmit事件,在很早以前学习的时候，这个事件会被作为用户输入数据校验的入口。不过仍然因为js使html页面的灵活性变高，这种前端校验用户输入的方式也不是那么唯一。
jsp代码

javascript代码

 参考技术A

html 表单不一定非要用submit提交，还有以下几种方式：

    选择input类型为submit组件的onclick()函数也可以实现提交。如：<input type="submit" value="提交" onclick="return validateForm();">

    使用用button按钮的onclick()函数，进行手动点击提交。如：<input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">  

扩展资料


    onsubmit属性内容一定要有return关键字，否则函数会直接执行，不会返回

    validateForm一定要返回一个boolean类型的返回值

    提交按钮要写成submit类型的

    提交时，设置form的action和method属性，然后利用form.submit()函数提交。

 参考技术B

不一定的，还有其它方式:

    最基本的表单提交

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表单提交示例 - 基本表单提交</title>

</head>

<body>

<form action="/server_url" method="post" onsubmit="return beforeSubmit()">

ID：<input id="username" type="text" name="username" />

Password：<input id="password" type="password" name="password" />

<input type="submit" value="Submit" />

</form>

<script type="text/javascript">

function beforeSubmit()

var username = document.getElementById('username').value;

var password = document.getElementById('password').value;

if (username.length < 6 || password.length < 6)

alert('格式不正确！');

return false;

else

return true;

2.FormData表单提交。

通过HTML5的FormData来提交表单，这种表单的提交方式是异步的，浏览器的地址是不会发生变化的。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表单提交示例 - FormData</title>

</head>

<body>

<form name="login_form" action="/server_url" method="post">

ID：<input id="username" type="text" name="username" />

Password：<input id="password" type="password" name="password" />

</form>

<button id="btn-submit" onclick="beforeSubmit()">Submit</button>

<script type="text/javascript">

function beforeSubmit()

var username = document.getElementById('username').value;

var password = document.getElementById('password').value;

if (username.length < 6 || password.length < 6)

alert('格式不正确！');

return;

// 1.创建一个FormData对象，直接把我们的表单传进去  

var formData = new FormData(document.forms.namedItem("login_form"));

// 2.创建一个http请求对象

var xmlHttpRequest = new XMLHttpRequest();

xmlHttpRequest.open('post', '/server_url');

xmlHttpRequest.onload = function(resp)

if (xmlHttpRequest.status == 200)

alert('提交成功！');

else

alert('Error:' + xmlHttpRequest.status);

;

xmlHttpRequest.send(formData);

</script>

</body>

</html>

扩展资料:

HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证。

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

<form> <input /></form>

参考资料:HTML表单

 参考技术C

不一定非要用submit提交，还有以下几种方式：

1、选择input类型为submit组件的onclick()函数也可以实现提交。

如：<input type="submit" value="提交" onclick="return validateForm();">

2、使用用button按钮的onclick()函数，进行手动点击提交。

如：<input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">  

扩展资料：

Html提交的小技巧

自动提交：

<html> 

<head> 

<title>Untitled Document</title> 

(1)自动提交表单: 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

</head> 

guage=javascript> 

setTimeout("document.form1.submit()",10000) 

</script> 

<body bgcolor="#FFFFFF" text="#000000"> 

<form name="form1" method="post" action="pp.asp"> 

<p> 

<input type="text" name="textfield"> 

</p> 

<p> 

<input type="text" name="textfield2"> 

</p> 

</form> 

</body> 

</html> 


10秒后提交。

 参考技术D

表单提交有很多方法：

一、最常见的就是type="submit"的按钮触发form的onsubmit事件

<scripttype="text/javascript">
    function validateForm()
      if(document.reply.title.value== "") //通过form名来获取form
             alert("pleaseinput the title!");
             document.reply.title.focus();
             returnfalse;
         
      if(document.forms[0].cont.value== "") //通过forms数组获取form
             alert("pleaseinput the content!");
             document.reply.cont.focus();
             returnfalse;
      
      returntrue;
  
<formname="reply"  method="post" onsubmit="returnvalidateForm( );">
        <input type="text"name="title" size="80" /><br />
        <textarea name="cont"cols="80" rows="12"></textarea><br />
        <input type="submit"value="提交" >
</form>

注意：

1.onsubmit属性内容一定要有return关键字，否则函数会直接执行，不会返回

2.validateForm一定要返回一个boolean类型的返回值

3.提交按钮要写成submit类型的

二、利用input类型为submit组件的onclick()函数

1.将上面form标签中的onsubmit="return validateForm()"属性，去掉。

2.为“提交”按钮添加onclick事件，如下：

<input type="submit" value="提交" onclick="return validateForm();">

三、利用button组件的onclick()函数，手动提交

<script type="text/javascript">  
    function modifyItem()   
        if (trim(document.getElementById("itemName").value) == "")   
            alert("物料名称不能为空！");  
            document.getElementById("itemName").focus();  
            return;  
           
        with (document.getElementById("itemForm"))   
            method = "post";  
            action = "item.do?command=modify&pageNo=$itemForm.pageNo";  
            submit();  
          
      
    //返回  
    function goBack()   
        window.self.location = "item.do?command=list&pageNo=$itemForm.pageNo";  
      
</script>  
<form name="itemForm" id="itemForm">  
      <input name="itemNo" type="text"   id="itemNo" value="$ item.itemNo " >  
      <input name="itemName" type="text"   id="itemName" value="$ item.itemName " >  
     <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">  
</form>

注意：  

1.提交时，设置form的action和method属性，然后利用form.submit()函数提交。

.submit（）在setTimeout之后不提交表单[重复]

【中文标题】.submit（）在setTimeout之后不提交表单[重复]【英文标题】：.submit() not submitting form after setTimeout [duplicate] 【发布时间】：2013-02-17 10:29:59 【问题描述】：

当用户在提交之前单击表单上的提交时，我试图设置延迟。我有一个显示的图像来测试点击事件，它工作正常，但表单从不提交...

这是我的 HTML 表单：

<form class='loginForm1' action='verify_credentials.php' method='post'>
    <fieldset>
        <legend>Log into Answer Tree</legend>
        <label>Username</label>
        <input class='inputs' name='username' type="text" placeholder="Enter username...">
        <label>Password</label>
        <input class='inputs' name='password' type="text" placeholder="Enter password...">
        <label class="checkbox">
            <input type="checkbox">Remember me</label>
        <button id='submit' type='button' class="btn btn-success">Submit</button>
    </fieldset>
</form>

这是脚本：

$(document).ready(function () 
    $(".containerLogin img").hide();
);

$(function () 
    $("#submit").click(function () 
        $(".containerLogin img").show();
        setTimeout(submitForm, 1000);
    );
);

function submitForm() 
    $(".loginForm1").submit();

我收到此错误消息：

Uncaught TypeError: Property 'submit' of object #&lt;HTMLFormElement&gt; is not a function

【问题讨论】：

好吧，.delay(2000).$('.loginForm1') 的语法是错误的一，二，.delay() 只会延迟动画。您应该按照问题标题中的建议使用 setTimeout。 你有两个打开的&lt;fieldset&gt;标签，fieldset应该在&lt;form&gt;里面。 srry 添加了错误的代码...这是我遇到的问题 控制台有错误吗？ 我刚刚更改了字段集...仍然没有运气 【参考方案1】：

您的按钮命名有问题，它会覆盖 submit() 处理程序。

将按钮重命名为

<button id='btnSubmit' type = 'button' ...

并更改您的选择器以匹配。

【讨论】：

是的，这样做了，哈哈，谢谢，当.. :)

以上是关于html 表单一定要用submit提交吗的主要内容，如果未能解决你的问题，请参考以下文章

html控件submit怎样提交表单到数据库？

AngularJS 等待提交表单（ng-submit）

HTML，如何按回车提交表单

html 同一个 form 能提交给不同的地址吗

html提交表单后返回原页面并显示表单数据

js表单提交和submit提交的区别