form对象







<form name=“form1” action=“login.php” method=“post”></form>

form对象的属性

	name：表单名称

	method：提交方式，有get和post

	action：处理程序

	enctype：表单数据的加密方式

	……

Form对象的方法：

	submit()：表单提交方式

	reset()：重置表单

form对象的事件

	onsubmit：当点击“提交按钮”时发生，onsubmit事件发生的时机，是在单击“提交按钮”之后和数据发往服务前

	onreset：重置事件

表单提交的三种方法

（1）submit按钮结合onsubmit事件，实现表单提交(最常用)

<script type="text/javascript">

function checkForm()

{

	var theForm = document.form1;

	if(theForm.username.value=="")

	{

		window.alert("用户名不能为空");

		return false;

	}else if(theForm.userpwd.value.length==0)

	{

		window.alert("密码不能为空");

		return false;

	}else

	{

		window.alert("验证通过");

		return true;

	}

}

</script>

</head>

<body>

<form name="form1" method="get" action="login.php" onsubmit="return checkForm()">

用户名：<input type="text" name="username" />

密码：<input type="password" name="userpwd" />

<input type="submit" value="提交表单" />

</form>

（2）submit按钮结合onclick事件，实现表单提交

函数定义跟上面一样……

<form name="form1" method="get" action="login.php">

用户名：<input type="text" name="username" />

密码：<input type="password" name="userpwd" />

<input type="submit" value="提交表单" onclick="return checkForm()" />

</form>

（3）button按钮结合submit()方法，实现表单提交

<script type="text/javascript">

function checkForm()

{

	var theForm = document.form1;

	if(theForm.username.value=="")

	{

		window.alert("用户名不能为空");

	}else if(theForm.userpwd.value.length==0)

	{

		window.alert("密码不能为空");

	}else

	{

		window.alert("验证通过");

		theForm.submit(); //提交表单的方法

	}

}

</script>

</head>

<body>

<form name="form1" method="get" action="login.php">

用户名：<input type="text" name="username" />

密码：<input type="password" name="userpwd" />

<input type="button" value="提交表单" onclick="checkForm()" />

</form>

提交信息

onsubmit和onclick事件：它们的返回值，会影响默认动作的执行。

submit按钮的默认动作就是提交表单；

<a>超级链接的默认动作，就是打开一个外部链接；

当事件返回false时，表单才会阻止提交，其它的返回值，表单都会提交。





　　
												


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

    
								
  1. JS之Form表单相关操作
		
    获取ID组件的值 var userid=document.getElementById('userid').value;var cdkey=document.getElementById('cdkey ...
    
		
    2. 
						
  2. fsLayuiPlugin数据表格弹出form表单说明
		
    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
    
		
    3. 
						
  3. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
		
    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
    
		
    4. 
						
  4. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作
		
    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...
    
		
    5. 
						
  5. 基于JQuery的前端form表单操作
		
    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...
    
		
    6. 
						
  6. 第83天：jQuery中操作form表单
		
    操作form表单 1. 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr(“title”, “传智播客”); 获 ...
    
		
    7. 
						
  7. Form表单之复选框checkbox操作
		
    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...
    
		
    8. 
						
  8. jQuery操作Form表单元素
		
    Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
    
		
    9. 
						
  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>  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python 暴力破解密码脚本
			
    python 暴力破解密码脚本 以下,仅为个人测试代码,环境也是测试环境,暴力破解原理都是一样的, 假设要暴力破解登陆网站www.a.com 用户 testUser的密码, 首先,该网站登陆的验证要支 ...
    
			
    2. 
						
  2. CSDN中的Bug
			
    简述 在用CSDN的过程中,发现了许许多多的Bug.之前没有做记录,直接反馈给客服了,有时没图说得不太清楚,现在不都追求有图有真相么O(∩_∩)O~,所以在此记录一下. 作为程序员的一份子,Bug对我 ...
    
			
    3. 
						
  3. 联系     管理  Hibernate4+Spring JPA+SpringMVC+Volecity搭建web应用(三)
			
    hibernate注解实体类示例 package cn.bdqn.smvc.entity; import java.io.Serializable; import javax.persistence. ...
    
			
    4. 
						
  4. Java之线程———GUI线程（包含打字游戏和计时器俩个GUI实列）
			
    当java程序包含图形用户界面(GUI)时,Java虚拟机在运行应用程序时会自动启动更多的线程,其中有两个重要的线程:AWT-EventQuecue 和 AWT-Windows. AWT-EventQ ...
    
			
    5. 
						
  5. 使用Node.js实现数据推送
			
    业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...
    
			
    6. 
						
  6. 《JavaScript权威指南》读书笔记（一）
			
    日期 2015-11-28 把之前的读书笔记在我弄丢它之前搬过来~~ 时间过去好久,回头一看理解都不一样了. 重点浏览了一下和Java的不同之处: js是一种宽松类型语言:js不区别整形数值与浮点型数 ...
    
			
    7. 
						
  7. MATLAB时间序列预测Prediction of time series with NAR neural network
			
    具体请参考:http://lab.fs.uni-lj.si/lasin/wp/IMIT_files/neural/nn05_narnet/ 神经网络预测时间序列数据,有三种模型, 这里是给出的是第二种 ...
    
			
    8. 
						
  8. 继承多态绕点 Java篇
			
    上一篇把C#语言的继承,多态里的特殊的情况做了一下总结,其实那一部分代码都是从Java翻译过去的,今天来总结一下Java在这种情况下是怎么调用的. 上一篇我们说的是:1.多态,只在多态系里方法调用,很 ...
    
			
    9. 
						
  9. Objective-C(一简介)
			
    Objective-C简介 通常写作ObjC和较少用的Objective C或Obj-C,是扩充C的面向对象编程语言.它主要使用于Mac OS X和GNUstep这两个使用OpenStep标准的系统, ...
    
			
    10. 
						
  10. mac iterm2快捷键
			
    快捷揵 这大概是item吸引用户的魅力所在了. 1.⌘ +数字在各 tab标签直接来回切换 2.选择即复制 + 鼠标中键粘贴,这个很实用 3.⌘ + f所查找的内容会被自动复制 4.⌘ + d 横着分 ...
    
			
    11.