form表单的多种提交方式

最新推荐文章于 2024-05-05 05:31:57 发布

S_liuxin_S

最新推荐文章于 2024-05-05 05:31:57 发布

阅读量1.1w

点赞数 4

分类专栏：项目开发经验总结文章标签：表单提交方式示例总结

本文链接：https://blog.csdn.net/S_liuxin_S/article/details/51011821

版权

项目开发经验总结专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在项目开发中自己总结的form表单的集中提交方式：

1，<input type="submit"> 提交按钮提交表单。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="submit" value="提交">
</form>
<script>
    function checkForm(){
        var name=document.getElementById("name").value;
        if(name==""||name==null){
            return false;
        }
        var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){
            return false;
        }
        return true;
    }
</script>
</body>
</html>

2，<input type="button"> 按钮提交表单，button也可以触发表单的提交。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="button" value="提交">
</form>
<script>
    function checkForm(){
        var name=document.getElementById("name").value;
        if(name==""||name==null){
            return false;
        }
        var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){
            return false;
        }
        return true;
    }
</script>
</body>
</html>

3，<input type="image" src=""> 图片提交表单，将input的属性设置为image时，点击图片也可触发form表单的提交。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="image" src="img/1a72xa0atv.jpg">
</form>
<script>
    function checkForm(){
        var name=document.getElementById("name").value;
        if(name==""||name==null){
            return false;
        }
        var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){
            return false;
        }
        return true;
    }
</script>
</body>
</html>

4，利用js提交表单，将form表单中进行标记，将表单中的某一元素设置点击事件，点击时调用js函数，再用js如$("#id").submit();等方法提交表单。

例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()" id="subForm">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <a οnclick="subForm()">提交</a>
</form>
<script>
    function checkForm(){
        var name=document.getElementById("name").value;
        if(name==""||name==null){
            return false;
        }
        var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){
            return false;
        }
       return true;

    }

    function subForm(){
        document.getElementById("subForm").submit();
    }
</script>
</body>
</html>

5，提交表单之前验证表单内容：用onSubmit="return checkForm()"即可在form表单提交之前先执行checkForm函数，在函数里判断表单内容是否符合条件，并返回相应的值。若函数返回true，则提交表单，否则不提交表单。

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post" οnsubmit="return checkForm()">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="password">
    <input type="submit" value="提交">
</form>
<script>
    function checkForm(){
        var name=document.getElementById("name").value;
        if(name==""||name==null){
            return false;
        }
        var pwd=document.getElementById("password").value;
        if(pwd==""||pwd==null){
            return false;
        }
        return true;
    }
</script>
</body>
</html>

以上是我本人在项目开发中关于form表单提交的一些总结，后期如果有新的经验总结会及时更新。

S_liuxin_S

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
form表单的多种提交方式

在项目开发中自己总结的form表单的集中提交方式：1，提交按钮提交表单。例：html>lang="en"> charset="UTF-8"> action="" method="post" onsubmit="return checkForm()"> type="text" name="username" id="name"> type=
复制链接

扫一扫