第10章表单与表单域第10表单与表单域第10章表单与表单域第10章表单与表单域.ppt

Web编程基础 Chapter10：表单与表单域 内容 表 单 10.1 访问表单和表单域 第一种方法:为表单设置一个标识符，然后使用document对象的getElementById方法访问它: 假如某表单的ID为form1 oForm = document.getElementById(form1); 第二种方法：使用document对象的forms属性。 假如某表单是网页中的第一个表单，且其名称（name属性）为form1： oForm = document.forms[0]; oForm = document.forms[form1]; oForm = document.form1; 10.1.1 访问表单 表单对象的常用属性 acceptCharset：设置或获取一个逗号分隔的列表，内容是服务器可接受的字符集。 action：设置或获取表单内容要发送到并进行处理的URL。 enctype：设置或检索表单的MIME编码方式。默认设置为application/x-www-form- urlencoded，若要上传文件，则应设置为multipart/form-data。 id：设置或检索表单的id。 length：检索表单中的表单域的数目。 method：设置或检索如何将表单数据发送到服务器。若设置为GET，则把表单数据附加到action属性指定的URL上发送；若设置为POST，则通过HTTP发布事务发送数据。 name：设置或检索表单的名称。 target：设置或检索表单提交结果的框架或窗口名称。 10.1.1 访问表单 表单的集合 elements：包含表单中除input type=image外的所有表单域。elements集合的length属性与表单的length属性值相等。 表单的方法 reset()：把表单中的表单域重置为它们的默认值，但不会触发表单的onreset事件。 submit()：提交表单，但不会触发表单的onsubmit事件。 表单对象的常用事件 onreset：当重置表单时触发。 onsubmit：当提交表单时触发 10.1.2 访问表单域 表单域都包含表单的elements集合中 通过ID访问表单域 var oTextBox = document.getElementById(txtUsername); 通过索引访问表单域 var oTextBox = document.form1.elements[0]; 通过name访问表单域 var oTextBox = document.form1.elements[txtUsername]; 直接通过name属性来访问表单域： var oTextBox = document.form1.txtUsername; 表单域的名称中包含空格，需要使用方括号标记： var oTextBox = document.form1.elements[User name]; 10.1.2 访问表单域 表单域的属性、方法和事件 disabled属性：获取或设置表单域是否被禁用。 form属性：获取包含表单域所在的表单。 blur()方法：表单域失去焦点，并将焦点移到别处。 focus()方法：使表单域获得焦点。 onblur事件：当表单域失去焦点时执行onblur事件处理程序。 onfocus事件：当表单域获得焦点时发生，将执行onfocus事件处理程序 10.1.3 提交表单 单击提交按钮提交表单： input type=submit value=提交 / 单击图像按钮提交表单： input type=image src=submit.jpg / 调用表单的submit()方法提交表单： input type=button value=提交 onclick=this.form.submit(); / 10.1.3 提交表单 表单提交目的地 提交给服务器端处理程序： form name=form1 id=form1 method=post action=process.asp 提交给JavaScript函数： form name=“form1” id=“form1” method=“post” action=javascript:alter(表单已提交！) 通过电子邮件形式提交表单数据： form name=form1 id=form1 method=post action=mailto:tina@163.com?subject=表单数据 10.1.4 重置表单 使用重置按钮重置表单： input type=reset value=重置 / 通过调用表单的reset()方法重置表单： input type=button valu