1. form对象
  1.  


  2. <form name=“form1” action=“login.php” method=“post”></form>
  3. form对象的属性
  4. 	name：表单名称
  5. 	method：提交方式，有get和post
  6. 	action：处理程序
  7. 	enctype：表单数据的加密方式
  8. 	……
  9. Form对象的方法：
  10. 	submit()：表单提交方式
  11. 	reset()：重置表单
  12. form对象的事件
  13. 	onsubmit：当点击“提交按钮”时发生，onsubmit事件发生的时机，是在单击“提交按钮”之后和数据发往服务前
  14. 	onreset：重置事件
  15. 表单提交的三种方法
  16. （1）submit按钮结合onsubmit事件，实现表单提交(最常用)
  17. <script type="text/javascript">
  18. function checkForm()
  19. {
  20. 	var theForm = document.form1;
  21. 	if(theForm.username.value=="")
  22. 	{
  23. 		window.alert("用户名不能为空");
  24. 		return false;
  25. 	}else if(theForm.userpwd.value.length==0)
  26. 	{
  27. 		window.alert("密码不能为空");
  28. 		return false;
  29. 	}else
  30. 	{
  31. 		window.alert("验证通过");
  32. 		return true;
  33. 	}
  34. }
  35. </script>
  36. </head>
  37. <body>
  38. <form name="form1" method="get" action="login.php" onsubmit="return checkForm()">
  39. 用户名：<input type="text" name="username" />
  40. 密码：<input type="password" name="userpwd" />
  41. <input type="submit" value="提交表单" />
  42. </form>
  43. （2）submit按钮结合onclick事件，实现表单提交
  44. 函数定义跟上面一样……
  45. <form name="form1" method="get" action="login.php">
  46. 用户名：<input type="text" name="username" />
  47. 密码：<input type="password" name="userpwd" />
  48. <input type="submit" value="提交表单" onclick="return checkForm()" />
  49. </form>
  50. （3）button按钮结合submit()方法，实现表单提交
  51. <script type="text/javascript">
  52. function checkForm()
  53. {
  54. 	var theForm = document.form1;
  55. 	if(theForm.username.value=="")
  56. 	{
  57. 		window.alert("用户名不能为空");
  58. 	}else if(theForm.userpwd.value.length==0)
  59. 	{
  60. 		window.alert("密码不能为空");
  61. 	}else
  62. 	{
  63. 		window.alert("验证通过");
  64. 		theForm.submit(); //提交表单的方法
  65. 	}
  66. }
  67. </script>
  68. </head>
  69. <body>
  70. <form name="form1" method="get" action="login.php">
  71. 用户名：<input type="text" name="username" />
  72. 密码：<input type="password" name="userpwd" />
  73. <input type="button" value="提交表单" onclick="checkForm()" />
  74. </form>
  75.  
  76. 提交信息
  77. onsubmit和onclick事件：它们的返回值，会影响默认动作的执行。
  78. submit按钮的默认动作就是提交表单；
  79. <a>超级链接的默认动作，就是打开一个外部链接；
  80. 当事件返回false时，表单才会阻止提交，其它的返回值，表单都会提交。

　　

Form表单的操作的更多相关文章

  1. JS之Form表单相关操作

    获取ID组件的值 var userid=document.getElementById('userid').value;var cdkey=document.getElementById('cdkey ...

  2. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  3. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  4. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  5. 基于JQuery的前端form表单操作

    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...

  6. 第83天：jQuery中操作form表单

    操作form表单 1. 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr(“title”, “传智播客”); 获 ...

  7. Form表单之复选框checkbox操作

    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...

  8. jQuery操作Form表单元素

    Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...

  9. java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

随机推荐

  1. semantic-ui使用gulp执行build-css报错

    1.执行gulp build-css报错 [09:40:49] Starting 'build-css'... Building CSS Potentially unhandled rejection ...

  2. 让页面滑动流畅得飞起的新特性：Passive Event Listeners

    版权声明:本文由陈志兴原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/153 来源:腾云阁 https://www.qclo ...

  3. ios开发中的toll-free bridged

    所谓的Toll-free bridging是说您可以在某个框架的方法或函数 同时使用Core Foundatio和Foundation 框架中的某些类型. 很多数据类型支持这一特性,其中包括群体和字符 ...

  4. Datatable的Select()方法简介

    DataTable是我们在进行开发时经常用到的一个类,并且经常需要对DataTable中的数据进行筛选等操作,下面就介绍一下Datatable中经常用到的一个方法——Select,微软提供了四个函数的 ...

  5. 张艾迪（创始人）：拥抱单身与自由的Eidyzhang

    拥抱单身与自由(Single+Freedom) 拥抱伟大的梦想与理想.年轻一代的张扬与自信 拥抱AOOOiA.Global.224C的一切是我对这个世界的态度 +AOOOiA.Global.224C创 ...

  6. 使用Node.js实现数据推送

    业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...

  7. 133. Clone Graph 138. Copy List with Random Pointer 拷贝图和链表

    133. Clone Graph Clone an undirected graph. Each node in the graph contains a label and a list of it ...

  8. 淘宝三角做法防CSS2D转换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Front End中Javascript兼容问题收集（转）

    1 select标签,就有诸多不兼容: A. cloneNode方法,对于非IE浏览器没有问题,对于IE浏览器, 遇到的问题包括:     1)option selected的会clone不过去,然后 ...

  10. ES mlockall作用——preventing that memory from being paged to the swap area

    elasticsearch还有一个重要的参数bootstrap.mlockall,这个参数的目的是当你无法关闭系统的swap的时候,建议把这个参数设为true.防止在内存不够用的时候,elastics ...