JavaScript教程--从入门到精通(8)

　　要实现动态交互，必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。

一、窗体基础知识
　　窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

１、什么是窗体对象
窗体（Form）:它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。
<form Name=Form1>
<INPUT type=text...>
<Input type=text...>
<Inpup byne=text...>
</form>
<form Name=Form2>
<INPUT type=text...>
<Input type=text...>
</form>

　　在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。
　　窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：
<Form
Name ="表的名称"
Target ="指定信息的提交窗口"
action ="接收窗体程序对应的URL"
Method =信息数据传送方式(get/post)
enctype ="窗体编码方式"
[onsubmit ="JavaScript代码"]>
</Form>
　

２、窗体对象的方法
　　窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式：
document.mytest.submit()
　
３、窗体对象的属性
　　窗体对象中的属性主要包括以下：elements name action target encoding method.
　　除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：
elements[0].Mytable.elements[1]
　
４、访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现：
（１）通过访问窗体
　　在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。
（２）通过数组来访问窗体
　　除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、引用窗体的先决条件
　　在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

２、textarea多行多列输入元素
　功能：实施对Textarea中的元素进行控制。
　基本属性
name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。
Value：用以设定出现在窗口中对应HTML文档中Value的信息。
Default value：元素的默认值。
　方法：
blur()：将输入焦点失去
select()：将文字加亮后
　事件：
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
　
３、Select选择元素
　功能：实施对滚动选择元素的控制。
　属性：
name:设定提交信息时的信息名称，对应文档select中的name。
Length:对应文档select中的length
options:组成多个选项的数组
selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性：
Text:选项对应的文字
selected:指明当前选项是否被选中
Index:指明当前选项的位置
defaultselected:默认选项
　
　事件：
OnBlur：当select选项失去焦点时，产生该文件。
onFocas:当select获得焦点时，产生该文件。
Onchange:选项状态改变后，产生该事件。
　
４、Button按钮
　功能：实施对Button按钮的控制。
　属性：
Name:设定提交信息时的信息名称，对应文档中button的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。
　方法：
click()该方法类似于一个按下的按钮。
　事件：
onclick当单击button按钮时，产生该事件。
例 ：
<Form name="test">
<input type="button" name="testcall" onclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通过元素访问
或
document.testcallvalue="mytest"; // 通过名字访问
</script>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有