您的位置：首页 > 其它

form表单的多种提交方式

2016-03-30 10:20 393 查看

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

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

例：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post" onsubmit="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" onsubmit="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" onsubmit="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" onsubmit="return checkForm()" id="subForm">
<input type="text" name="username" id="name">
<input type="text" name="password" id="password">
<a onclick="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" onsubmit="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表单提交的一些总结，后期如果有新的经验总结会及时更新。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 表单提交方式示例总结

相关文章推荐

新的分享

章节导航