三种常用的html表单提交方式

作者:IT技术 | 时间:2018-10-28

表单元素是一个让用户在其中输入内容的地方,但是数据输完了以后,还需要把表单里的数据提交到服务器端进行处理保存,下面我为大家介绍三种常用的html表单提交方式,希望对大家能有帮助。

默认方式表单提交

默认情况下,<form>表单标签有下面两个属性:

1,action:表示当前表单中的内容提交给哪个页面进行处理

2,method:表示当前表单提交的方式,常见的有get和post方式,默认是get提交

通过<input type="submit"> 按钮或者<input type="button"> 按钮来提交表单

实例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我有答案www.woyoudaan.cn</title>
</head>
<body>
<form name="login_form" action="/server_url" method="post">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="submit" value="提交">
</form>
</body>
</html>

填写的数据会直接提交到/server_url文件进行处理

javascript方式表单提交

这个按钮点击会触发一段js,在这个js中可以做数据校验,如果验证通过,则通过js提交表单,form表单增加id的作用就是为了js获取表单元素变的方便。

实例代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>我有答案(www.woyoudaan.cn)form表单提交方式</title></head>
    <body>
    <form id="Form" action="" method="post" >
    <!--直接提交-->
    <input type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
    First name:<br>
    <input type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname"><br><br>
    <input id="tj" type="button" value="提交" onclick="checkForm();">
    </form>
    <script src="jquery.js"></script><script>
    /*这里是提交表单前的非空校验*/
    function checkForm () {        var first = $("input[name='firstname']").val();        var last = $("input[name='lastname']").val();        if (first == "" || first == null || first == undefined) {
            alert("first");            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");            return false;
        } else {
            alert("提交")
            $("#Form").submit();
        }

    }</script>
    </body>
    </html>

小提示:

from表单中的onsubmit属性一定要有return,否则是没有效果的。onsubmit属性是可选的,如果需要js对表单做一些简单的验证,那么可以使用这种方式来做,js如果验证不通过则返回false,那么表单是不会提交的。

FormData方式表单提交

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

这种方式提交方式最大的特点就是:异步。

实例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交示例 - 我有答案www.woyoudaan.cn</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" src="/res/lib/jquery-1.11.3.js"></script>
<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.通过jquery发送出去
        $.ajax({
            url: "/server_url.php",
            type: "POST",
            data: formData,
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false   // 告诉jQuery不要去设置Content-Type请求头
        }).done(function(resp) {
            alert('success!');
        }).fail(function(err) {
            alert('fail!')
        });
        
    }
</script>
</body>
</html>

上面提到的jquery是一种常用的js框架

以上就是三种常用的html表单提交方式,不过表单提交后的处理程序大多会用到服务器程序来处理,比如:php ,java等,如果你有兴趣也可以了解一下。