JS第13章-表单对象和表单元素.ppt

1、第13课：西餐对象和西餐元素，讲师：阳兴e-mail:课程内容阵列，西餐对象概述西餐对象的应用西餐元素文本框按钮，表单对象概述，表单对象介绍表单之间的部分。表单通常由三个茄子基本组件组成：西餐标签、西餐字段和西餐按钮。字段、按钮、文本、图像和其他元素容器。西餐对象表示HTML文档中的表单。HTML中的表单由许多西餐元素元素组成，因此form对象还包含许多子对象。JavaScript为每个标签创建一个form对象，并将其存储在forms数组中。因此，您可以使用以下代码从文档中导入form对象：document.formsi、西餐对象概述、大小写入转换大小写入转换也是相对通用的技术，如果输入授权码

2、时不需要大小写入，则可以统一转换为大写或小写。将小写字母转换为大写(toUpperCase)，将大写()转换为小写的方法使用toLowerCase方法。01function setCase (caseSpec)/自定义处理大小写入转换函数02 03if (caseSpec=upper)/大写04 05 document.my form。确定是否转换为06 document . my form . last name . value=document . my form . last name . value . toupper case()；07 08else/小写09 document .

3、my form . first name . value=document . my form . first name . value . to转换为lower card 10 document . my form . last name其中reset等于重置按钮，sumit等于提交按钮。04 05function Submit()/自定义函数06 07 form 1 . Submit()；/西餐提交方法08alert(提交成功)；/消息显示09 10function Reset()/重置自定义函数实现11 12 form 1 . Reset()；/在西餐重置方法13 14、西餐对象概述、提

4、交和重置响应西餐之前，讨论了西餐提交和重置。现在请考虑当表单单击提交或重置时如何响应提交和重置。只需使用Form对象的两个事件onreset(重置时触发事件)和onsubmit(提交时触发事件)。示例：01 02 function allow reset ()/自定义函数设置数据03 04return window.confirm(重置检查)？)；OnReset event 05 06 function allowSend()/自定义函数响应数据07 08return window.confirm(传输确认？)；响应OnSubmit事件09 10、西餐对象概览、11 12名称3360 13地址

5、： 14城市3360 15男16女17女18 19 20、西餐对象应用程序节目、西餐验证JavaScript的一个常用功能是西餐验证和西餐验证，通常提交表单所做的工作相对简单，执行效率最高。这是JavaScript最好的性能之一。举个例子。西餐对象的应用节目，循环验证表单通过元素名称确定每个文本框是否输入了文本。牙齿方法易于使用，源代码看起来也很直观。但是，Form对象的elements属性可以返回任何表单的元素值，因此可以使用循环来检查elements数组中对象的value属性值是否为零并检查表单。设置西餐提交方法通常，用户完成表单后，可以在指定的地方提交和处理表单。牙齿指定地点通常有两个，

6、一个是动态网页提交，另一个是提交给邮件。这两种方法的目的都相同。也就是说，保存当前提交的信息以备将来使用。前者可以存储在数据库中，后者可以存储在邮箱中，但都可以达到目的。，应用西餐对象，重置西餐提示默认情况下，如果用户单击了重置西餐按钮，浏览器窗口会立即将表单中所有元素的值设置为初始状态。如果用户意外单击了按钮，则所有填充的数据都将被清除。为了防止这种意外情况，当单击重置按钮时，确认框将弹出，允许用户确认是否重置表单。03 04function Reset()/自定义函数05 06var result=confirm(是否重置？)；/询问用户是否重置西餐07return result。/返回结

7、果08 09，西餐对象应用程序节目，不使用提交按钮提交表单通常是使用表单上的单击提交按钮提交表单。但是，form对象具有submit()方法，该方法使您无需提交按钮即可提交表单。03 04 function send()05 06 var result=confirm(是否提交？)；07 if(result)08 09 form 1 . submit()；10 11else 12 13return false14 15 16、西餐元素、西餐元素概述HTML中定义的西餐元素数很多。这些西餐元素用户可以输入文本框、密码框等文本。或者，允许用户选择下拉列表框、复选框等选项。用户还可以提交信息或重置表

8、单，如提交按钮、重置按钮等。也可以提供程序员开发方便，如隐藏的箱子。因此，西餐元素、01 02 03 04 0506、西餐元素、西餐元素命名标记和标记之间可能会有很多西餐元素。您可以在Form物件中使用elements阵列来汇入子物件，而不是汇入这些西餐元素。Elements数组包含各种类型的Form对象的子对象。elements数组的大小由标签和标签之间的西餐元素元素组成，因此，可以使用以下代码表示HTML文档中第一个form对象中的第二个元素对象：下一页包含相关实例。form1.elements1，西餐元素，function show()var str 1=form 1 . element

9、s 0 . value；/元素命名访问方法1 var str 2=form 1 . text 3 . value；/元素命名访问方法2 var str 3=document . for ms1 . elements 0 . value；/元素命名访问方法3 alert(name=str 1 nrage=str 2 NR password=str 3)；/显示信息名称：年龄：密码：查看信息/，文本框，文本框生成方法使用文本框，首先要学习如何生成文本框。有多种创建文本框的方法。在HTML代码中，用于生成单行文本框和密码框的元素都是input元素、相同元素，但根据文本框类型的不同而不同。文本框生成语

10、法格式如下：要创建单行文本，请使用以下格式：要创建密码框类型的文本，请使用如下所示的语句。概括地说，创建文本框主要是使用input元素。文本框和查看文本框属性值文本框对象称为text对象，多行文本框对象称为textarea对象，表示密码框的对象称为password对象。无论Text对象、textarea对象或Password对象如何，大多数属性都是相同的。因此，您可以使用一致的方法访问该属性。下一页包含相关实例。01 02 03示例13-10 04/自定义函数06 07 var str 1=form 1 . elements 0 . value；/文本值08 var str 2=form 1

11、. elements 0 . name；/文本名称09 var str 3=form 1 . elements 0 . type；/文本类型10 var str 4=form 1 . elements 0 . size；/文字宽度11 var str 5=form 1 . elements 0 . max length；/最大字符数、文本框、自动选择文本框中的字符自动选择文本框中的字符、浏览某些网页时打开网页时选择文本、鼠标文本框时选择文本。下一页包含相关实例。，文本框，01 02自动选择文本框文本03/javascrpt代码开始04function Select()/自定义函数05 06 f

12、orm 1 . text . focus()；/文本框焦点07 form 1 . text . select()；/文本框字符为08 09 10 11 12 13 14 15 16 17，按钮，按钮介绍按钮常用的属性为form、名称、类型、值等。Name是指定按钮名称的字符串。Type是所有button物件的type属性 Button 。牙齿属性指定西餐元素的类型。Value是与按钮的value属性相对应的字符串。同时还支持许多方法和事件。可以将按钮创建为HTML创建的两个茄子元素：分别为input元素和button元素。可以使用两种茄子方法创建Button元素：“创建”按钮和“创建input元素”按钮。在网页设计过程中，通常使用Input元素、按钮和网页调色板来设计网页前景色和背景色。只有前景色与背景色协调，网页的形状才会漂亮。但是在网页上调试前景色和背景色不是很方便，所以可以创建一个简单的网页调色板程序来测试前景色和背景色的协调性。下一页包含相关实例。按钮01 02示例13-14 03/Java