HTML form表单提交方法案例详解
更新时间：2021年08月19日 16:38:26 作者：菜鸟一缕清风
这篇文章主要介绍了HTML form表单提交方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
form表单提交方式总结一下：
一、利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
return true;
}
</script>
<form action="login.do?act=login" method="post">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=submit name="submit1" value="登陆" onclick="return check(this.form)">
</form>
二、利用button按钮实现提交，当点击button按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址，由于button按钮不具备自动提交的功能，所以由JavaScript实现提交。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
document.myform.submit();
}
</script>
<form action="login.do?act=login" name="myform" method="post">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=button name="submit1" value="登陆" onclick="check(this.form)">
</form>
三、利用submit按钮实现提交，当点击submit按钮时，先触发onsubmit事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
return true;
}
</script>
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=submit name="submit1" value="登陆">
</form>
以上就是form表单常用的三种提交方式，有不明白的地方，欢迎qq交流：317856821
到此这篇关于HTML form表单提交方法案例详解的文章就介绍到这了,更多相关HTML form表单提交内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了关于前端要知道的 AST知识,在计算机科学中，抽象语法树是源代码语法结构的一种抽象表示,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了JavaScript预解析之变量预解析和函数预解析的相关资料,需要的朋友可以参考下2022-07-07
图解prototype、proto和constructor的三角关系
在javascript中，prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系，楼主就着自己对它们的浅显认识，来粗略地理理以备忘，有不对之处还望斧正。2016-07-07
这个XMLHttpRequest的新版本，提出了很多有用的新功能，将大大推动互联网革新。本文就对这个新版本进行详细介绍2016-08-08
a标签的href与onclick事件，想必大家不陌生吧，至于它们有什么区别，你知道吗？下面就为大家介绍下，感兴趣的朋友可以学习下，希望对大家有所帮助2013-07-07
本文主要介绍JavaScript 函数模式,这里整理了详细的资料及简单示例代码，帮助大家学习参考此部分的知识，有兴趣的小伙伴可以参考下2016-09-09
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
本篇文章是对DHTML,JavaScript,DOM,BOM以及WEB标准进行了详细的描述介绍，需要的朋友参考下2013-06-06
在JS中操作时间之getUTCMilliseconds()方法的使用
这篇文章主要介绍了在JavaScript中操作时间之getUTCMilliseconds()方法的使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下2015-06-06
详解javascript中var与ES6规范中let、const区别与用法
es6刚流行那会，我只知道var即将退出历史舞台，取而代之的是let和const，却不知道var有什么缺陷，为什么会被取代。今天在网上看到一段视频，解答了我的疑惑2020-01-01
这篇文章主要介绍了介绍JavaScript中Math.abs()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
最新评论