第八章 表单和表单元素.ppt

1、JavaScript程序设计,贾素玲 王强 主编 张剑 曹爽 董亮 编著,第八章 表单和表单元素,本章结构,form对象 form元素中的按钮对象 form元素中的文本对象 select与option对象 form元素中的选择按钮对象 form元素中的其它对象,form对象,form对象概述 form对象代表HTML文档中的表单，一个HTML文档可以包含多个表单，它们按照在文档中的出现顺序存储在document对象的froms属性数组中。form对象由HTML中的标签所创建，其语法如下：, /表单中的其他元素 ,form对象,form对象概述 访问文档中某一个表单的方法主要分为两大类，一类是通

2、过document对象的forms属性，一类是直接通过表单名称，例如： document.formsindex document.forms“formName” document.forms.formName document.formName 访问表单上其他元素的方法也分为两类，可以使用elements数组访问表单元素，也可以通过表单名称加元素名称的方式： formName.elementsindex formName.elements“name” formN,form对象,form对象的属性 action：表示要提交的表单的URL。 elements：其元素是出现在表单中的

3、输入元素。 elements.length：表示elements中的元素个数。 encoding：指定了表单中数据的编码方式。 length：等同于elements.length属性。 method：指定了提交表单的方法，它的值为“get”或者“post”。 target：指定了显示提交表单结果的窗口或者框架的名字。 form对象的方法 reset()：将表单中所有输入元素都重新设定为它们的默认值。 submit()：用于提交表单。,form对象,form元素的组成,form元素中的按钮对象,button对象 button对象是表单元素之一，代表HTML文档上某个表单内的按钮，它由标准的HTM

4、L标签创建，语法如下：,form元素中的按钮对象,button对象的属性 type：表示表单元素的类型，对于button对象而言，其type属性的值必将是“button”。 name：表示button对象的名称，用于唯一标识特定的按钮。 value：该属性指定了显示在按钮上的文本。 button对象的方法 blur()：使特定的按钮失去焦点。 focus()：使特定的按钮获得焦点。,form元素中的按钮对象,submit对象 submit对象在HTML文档中也代表一个按钮，不过与button对象不同，submit对象是一种特殊的按钮，专门用于提交表单。 点击submit按钮，会把含有该按钮的表

5、单中的数据提交给由form对象的action属性指定的服务器上的程序处理。 submit对象还会把服务器发送回来的HTML页面装载进来。 submit对象也是由标准的HTML标签创建，语法规则与创建button对象类似，唯一不同的是标签中的type属性必须为“submit”。 submit对象的属性与button对象类似 submit对象的方法与button对象类似,form元素中的按钮对象,reset对象 reset对象代表HTML文档中一个特殊按钮，专门用于重置表单。 点击reset按钮，将会使含有该按钮的表单中的所有表单元素重置为它们的默认值。 如果表单元素没有设定默认值，那么点击res

6、et按钮的效果就是清空用户在这些元素中设定的值。 reset对象也是由标准的HTML标签创建，语法规则与创建button对象类似，唯一不同的是标签中的type属性必须为“reset”。 reset对象的属性与button对象类似 reset对象的方法与button对象类似,form元素中的文本对象,text对象 text对象是最基本的表单对象之一，代表HTML表单内的单行文本输入框，它由标准的HTML标签创建，语法如下：,form元素中的文本对象,text对象的属性 defaultValue：表示单行文本框中的默认值。 name：表示text对象的名称，用于唯一标识特定的单行文本框。 type

7、：对于text对象而言，其type属性的值必将是“text”。 value：表示单行文本框中的当前值。 size：表示单行文本框的宽度，缺省状况的宽度可容纳20个字符。 maxlength：表示单行文本框中可输入的最大字符数。 text对象的方法 blur()：该方法使特定的text对象失去焦点。 focus()：该方法使特定的text对象获得焦点。 select()：该方法可以选中某text对象中的所有内容。,form元素中的文本对象,textarea对象 textarea对象也是代表HTML表单中的文本输入框，但是与text对象不同，textarea创建的是一个多行的、可滚动的编辑文本框。

8、注意，它由标准的HTML标签创建，而不是由标签创建，语法如下：, . . . /显示在textarea中的初始文本 ,form元素中的文本对象,textarea对象的属性 defaultValue：表示textarea中的默认值，但它不是由标签的value属性指定，而是由和标签之间的文本指定。 name：表示textarea对象的名称，用于标识特定的textarea元素。 type：对于textarea对象而言，其type属性的值必将是“textarea”。 value：表示textarea元素中的当前值。 cols：表示textarea元素的宽度，单位以字符数计算。 rows：表示texta

9、rea元素的高度，单位以文本的行数计算。 wrap：指定了要处理的一行有多长，off表示实际文本有多长，一行就有多长；virtual表示显示一行文本时应该有换行符，但是传递一行时没有换行符；physical表示无论显示一样文本还是传递一行文本，都应该有换行符。 textarea对象的方法与text对象类似,form元素中的文本对象,password对象 password对象代表专门用于输入敏感信息（例如用户密码）的文本框，在该元素中输入的字符都将以“”或者“”的其他特殊符号统一代替。password对象由标准的HTML标签创建，语法如下：,form元素中的文本对象,password对象的属性

10、defaultValue：表示password中的默认值。 name：表示password对象名称，用于标识特定的password元素。 type：对password对象而言，其type属性值必须是“password”。 value：表示password元素中的当前值。 size：表示password的宽度。 maxlength：表示password中可输入的最大字符数。 password对象的方法 blur()：该方法使特定的password对象失去焦点。 focus()：该方法使特定的password对象获得焦点。 select()：该方法可以选中某password对象中的所有内容。,se

11、lect与option对象,select对象 select对象代表HTML表单中的选项列表，从而使得用户可以从列表中选择需要的内容，它由标准的HTML标签创建，语法如下：, 选项一 选项二 . . . /其他选项 ,select与option对象,select对象的属性 length：表示select元素中option对象的个数，即options数组的长度。 multiple：表示是否可以在select元素中选择多项。 name：表示select对象的名称，用于唯一标识特定的select元素。 options：表示select元素中option对象的数组，数组中每一个元素对应于一个option

12、对象。 selectedIndex：表示select元素中被选中选项的下标。 size：表示select元素可见的选项数。 type：该属性表示select元素的类型，如果select元素可以多选，那么其type属性的值为“select-multiple”；如果select元素只能单选，那么其type属性的值为“select-one”。 select对象的常用方法主要包括blur()和focus()两个方法。,select与option对象,option对象 option对象代表select元素中的一个可供选择的选项，它由标准的HTML标签创建，其语法规则如下：, /该选项默认状态下是否被选中

13、 Text /该选项显示的文本内容 /该标签可以省略 ,option元素总是和select元素一起使用的，标记嵌套在标记中，一个标记代表一个选项。选项的默认值由和标记之间的文字设定，选项默认状态下是否被选中由selected属性决定。,select与option对象,option对象的属性 defaultSelected：表示在默认状态下，该选项是否被选中。 index：表示该选项在select元素中的位置。 selected：表示当前状态下，该选项是否被选中。 text：表示该选项的文本文字，即出现在标签后的文字。 value：表示选项在被选中情况下，提交表单时传给服务器的值。 获取sele

14、ct对象中被选中的选项 “select-one”类型 “select-one”类型的select元素只能有一个选项被选中，所以只要通过select对象的selectIndex属性得到被选中选项的下标，然后在option数组中查找该下标对应的数组元素即可： form.select.optionsform.select.selectedIndex,select与option对象的应用,获取select对象中被选中的选项 “select-multiple”类型 “select-multiple”类型的select元素可以同时选中多个选项，使用for循环检查options数组中所有option对象的s

15、elected属性，从而提取选中的选项：,var selectedArray = new Array(); var selectedNumber = 0; for(var i=0; idocument.formExample.selectExample.options.length;i+) if(document.formExample.selectExample.optionsi.selected) selectedArrayselectedNumber= document.formExample.selectExample.optionsi; selectedNumber= selecte

16、dNumber+1; ,select与option对象的应用,在select元素中增加一个选项 构造函数Option()可以动态创建一个新的option对象，从而使得用户可以在程序运行过程中根据需要为select元素添加选项，其语法如下： form.select.optionsindex = new Option(text,value) 在select元素中删除一个选项 如果要在程序运行过程中动态的删除一个option对象，从而减少select元素中的选项，只需要把select对象options数组中相应的元素设为null即可，其语法规则如下： form.select.optionsindex

17、=null,form元素中的选择按钮对象,radio对象 radio对象代表HTML表单中的单选按钮，具有相同name属性的单选按钮形成一个组，同一组中只能有一个单选按钮被选中，radio对象由标准的HTML标签创建，语法如下：,由于同一组radio对象的name属性相同，所以无法依据name属性获取某一组中特定的radio对象，获取某一个特定radio对象的方法是： document.radioForm.radioGroupi,form元素中的选择按钮对象,radio对象的属性 checked：表示单选按钮当前是否被选中。 defaultChecked：表示单选按钮在默认状态下是否被选中。

18、length：表示同一组中单选按钮的数量。 name：表示单选按钮所在组的名称，一个表单上单选按钮组名称是唯一的。 type：对于radio对象而言，其type属性的值必将是“radio”。 value：表示表单被提交时，如果单选按钮被选中所返回的值。 radio对象的方法 blur()：该方法使特定的单选按钮失去焦点。 focus()：该方法使特定的单选按钮获得焦点。,form元素中的选择按钮对象,checkbox对象 checkbox对象代表HTML表单中的复选按钮，与radio对象类似，具有相同name属性的复选按钮形成一个组，但是与radio对象不同的是，同一组中的多个复选按钮可以同时

19、被选中。其创建语法如下：,form元素中的选择按钮对象,访问checkbox对象 单独命名的checkbox对象 对于那些名称不会重复的复选框，可以采取表单名称加元素名称的方式进行访问，语法如下： document.checkboxForm.checkboxName checkbox对象组 如果将多个checkbox对象指定为相同的名称，它们组成一个checkbox对象组，此时应该采取与radio对象相同的方式访问特定的checkbox对象，语法如下： document.checkboxForm.checkboxGroupi,form元素中的选择按钮对象,checkbox对象的属性 check

20、ed：表示复选按钮当前是否被选中。 defaultChecked：表示复选按钮在默认状态下是否被选中。 length：表示同一组中复选按钮的数量。 name：表示复选按钮的名称，如果多个复选按钮拥有相同的名称，将形成一个复选按钮组。 type：对于checkbox对象而言，其type属性值必须是“checkbox”。 value：表示表单被提交时，如果复选按钮被选中所返回的值。 checkbox对象的方法 blur()：该方法使特定的复选按钮失去焦点。 focus()：该方法使特定的复选按钮获得焦点。,form元素中的其他对象,fileUpload对象 fileUpload对象代表HTML表单中用于文件上传的输入元素，包含一个文本框和一个用来浏览目录文件的按钮，其创建语法如下：,fileUpload对象的属性 name：表示fileUpload对象的名称。 type：对于fileUpload对象而言，其type属性的值必须是“file”。 value：指定了用于输入fileUpload元素中的文件路径和名称。,form元素中的其他对象,hidden对象 hidden对象代表HTML表单中不可见的输入对象，它只能通过JavaScript程序控制，通过它可以向服务器或者客户端传递任意类型的