一、窗體基礎知識
窗體對象可以使設計人員能用窗體中不同的元素與客戶(hù)機用戶(hù)相交互，而用不著(zhù)在之前首先進(jìn)行數據輸入，就可以實(shí)現動(dòng)態(tài)改變Web文檔的行為。
１、什么是窗體對象
窗體（Form）:它構成了Web頁(yè)面的基本元素。通常一個(gè)Web頁(yè)面有一個(gè)窗體或幾個(gè)窗體，使用Forms[]數組來(lái)實(shí)現不同窗體的訪(fǎng)問(wèn)。
<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]中共有三個(gè)基本元素，而Forms[1]中只有兩個(gè)元素。
窗體對象最主要的功能就是能夠直接訪(fǎng)問(wèn)HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：
<Form
Name ="表的名稱(chēng)"
Target ="指定信息的提交窗口"
action ="接收窗體程序對應的URL"
Method =信息數據傳送方式(get/post)
enctype ="窗體編碼方式"
[onsubmit ="JavaScript代碼"]>
</Form>
２、窗體對象的方法
窗體對象的方法只有一個(gè)--submit()方法，該方法主要功用就是實(shí)現窗體信息的提交。如提交Mytest窗體,則使用下列格式：
document.mytest.submit()
３、窗體對象的屬性
窗體對象中的屬性主要包括以下：elements name action target encoding method.
除Elements外，其它幾個(gè)均反映了窗體中標識中相應屬性的狀態(tài)，這通常是單個(gè)窗體標識；而elements常常是多個(gè)窗體元素值的數組，例：
elements[0].Mytable.elements[1]
４、訪(fǎng)問(wèn)窗體對象
在JavaScript中訪(fǎng)問(wèn)窗體對象可由兩種方法實(shí)現：
（１）通過(guò)訪(fǎng)問(wèn)窗體
在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過(guò)下列標識訪(fǎng)問(wèn)窗體如：document.Mytable()。
（２）通過(guò)數組來(lái)訪(fǎng)問(wèn)窗體
除了使用窗體名來(lái)訪(fǎng)問(wèn)窗體外，還可以使用窗體對象數組來(lái)訪(fǎng)問(wèn)窗體對象。但需要注意一點(diǎn)，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數組下標是由0到n。所以可通過(guò)下列格式實(shí)現窗體對象的訪(fǎng)問(wèn)：
document.forms[0]
document.forms[1]
document.forms[2]...
５、引用窗體的先決條件
在JavaScript中要對窗體引用的條件是：必須先在頁(yè)面中用標識創(chuàng )建窗體，并將定義窗體部分放在引用之前。
二、窗體中的基本元素
窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。
在JavaScript中要訪(fǎng)問(wèn)這些基本元素，必須通過(guò)對應特定的窗體元素的數組下標或窗體元素名來(lái)實(shí)現。每一個(gè)元素主要是通過(guò)該元素的屬性或方法來(lái)引用。其引用的基本格式見(jiàn)下:
formName.elements[].methadName (窗體名.元素名或數組.方法)
formName.elemaent[].propertyName(窗體名.元素名或數組.屬性)
下面分別介紹：
１、Text單行單列輸入元素
功能：對Text標識中的元素實(shí)施有效的控制。
基本屬性：
Name：設定提交信息時(shí)的信息名稱(chēng)。對應于HTML文檔中的Name。
Value：用以設定出現在窗口中對應HTML文檔中Value的信息。
defaultvalue：包括Text元素的默認值
基本方法：
blur()：將當前焦點(diǎn)移到后臺。
select()：加亮文字。
主要事件：
onFocus：當Text獲得焦點(diǎn)時(shí)，產(chǎn)生該事件。
OnBlur：從元素失去焦點(diǎn)時(shí)，產(chǎn)生該事件。
Onselect：當文字被加亮顯示后，產(chǎn)生該文件。
onchange：當Text元素值改變時(shí)，產(chǎn)生該文件。
例：...
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>
２、textarea多行多列輸入元素
功能：實(shí)施對Textarea中的元素進(jìn)行控制。
基本屬性
name：設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔Textarea的Name。
Value：用以設定出現在窗口中對應HTML文檔中Value的信息。
Default value：元素的默認值。
方法：
blur()：將輸入焦點(diǎn)失去
select()：將文字加亮后
事件：
onBlur:當失去輸入焦點(diǎn)后產(chǎn)生該事件
onFocus:當輸入獲得焦點(diǎn)后，產(chǎn)生該文件
Onchange:當文字值改變時(shí)，產(chǎn)生該事件
Onselect:當文字加亮后，產(chǎn)生該文件
３、Select選擇元素
功能：實(shí)施對滾動(dòng)選擇元素的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應文檔select中的name。
Length:對應文檔select中的length
options:組成多個(gè)選項的數組
selectIndex;該下標指明一個(gè)選項
select在中每一選項都含有以下屬性：
Text:選項對應的文字
selected:指明當前選項是否被選中
Index:指明當前選項的位置
defaultselected:默認選項
事件：
OnBlur：當select選項失去焦點(diǎn)時(shí)，產(chǎn)生該文件。
onFocas:當select獲得焦點(diǎn)時(shí)，產(chǎn)生該文件。
Onchange:選項狀態(tài)改變后，產(chǎn)生該事件。
４、Button按鈕
功能：實(shí)施對Button按鈕的控制。
屬性：
Name:設定提交信息時(shí)的信息名稱(chēng)，對應文檔中button的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。
方法：
click()該方法類(lèi)似于一個(gè)按下的按鈕。
事件：
onclick當單擊button按鈕時(shí)，產(chǎn)生該事件。
例 ：
<Form name="test">
<input type="button" name="testcall" onclick=tmyest()>
</form>
...
<script language="javascirpt">
document.elements[0].value="mytest"; //通過(guò)元素訪(fǎng)問(wèn)
或
document.testcallvalue="mytest"; // 通過(guò)名字訪(fǎng)問(wèn)
</script>
.....
５、checkbox檢查框
功能：實(shí)施對一個(gè)具有復選框中元素的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息。
Checked:該屬性指明框的狀態(tài)true/false.
defauitchecked:默認狀態(tài)
方法：
click()該方法使得框的某一個(gè)項被選中。
事件：
onclick:當框的選被選中時(shí)，產(chǎn)生該事件。
６、radio無(wú)線(xiàn)按鈕
功能：實(shí)施對一個(gè)具單選功能的無(wú)線(xiàn)按鈕控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔中的radio的name相同
value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。
length:單選按鈕中的按鈕數目。
defalechecked:默認按鈕。
checked:指明選中還是沒(méi)有選中。
index:選中的按鈕的位置。
方法：
chick():選定一個(gè)按鈕。
事件：
onclick:單擊按鈕時(shí)，產(chǎn)生該事件。
７、hidden:隱藏
功能：實(shí)施對一個(gè)具有不顯示文字并能輸入字符的區域元素的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔的hidden中的Name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。
defaleitvalue:默認值
８、Password口令
功能：實(shí)施對具有口令輸入的元素的控制。
屬性：
Name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔中password中的name。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。
defaultvalu:默認值
方法
select():加亮輸入口令域。
blur():使這丟失passward輸入焦點(diǎn)。
focus():獲得password輸入焦點(diǎn)。
９、submit提交元素
功能：實(shí)施對一個(gè)具有提交功能按鈕的控制。
屬性：
name:設定提交信息時(shí)的信息名稱(chēng)，對應HTML文檔中submit。
Value:用以設定出現在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。
方法
click()相當于按下submit按鈕。
事件：
onclick()當按下該按鈕時(shí)，產(chǎn)生該事件。
三、范例
下面我們演示通過(guò)點(diǎn)擊一個(gè)按鈕（red）來(lái)改變窗口顏色，點(diǎn)擊“調用動(dòng)態(tài)按鈕文檔”調用一個(gè)動(dòng)態(tài)按鈕文檔。
test8_1.htm
<html>
<head>
<Script Language="JavaScript">
//原來(lái)的顏色
document.bgColor="blue";
document.vlinkColor="white";
document.linkColor="yellow";
document.alinkcolor="red";
//動(dòng)態(tài)改變顏色
function changecolor(){
document.bgColor="red";
document.vlinkColor="blue";
document.linkColor="green";
document.alinkcolor="blue";
}
</script>
</HEAD>
<body bgColor="White" >
<A href="test8_2.htm"> 調用動(dòng)態(tài)按鈕文檔</a>
<form >
<Input type="button" Value="red" onClick="changecolor()">
</form>
</BODY>
</HTML>
輸出結果見(jiàn)圖1所示。
動(dòng)態(tài)按鈕程序。
test8_2.htm
<HTML>
<HEAD>
</HEAD>
<p align="center"> </p>
<div align="center"><center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="form2" onSubmit="null">
<p><input type="submit" name="banner" VALUE="Submit"
onClick="alert(‘You have to put an \‘a(chǎn)ction=[url]\‘ on the form
tag!!‘)"> <br>
<script language="JavaScript">
var id,pause=0,position=0;
function banner() {
// variables declaration
var i,k,msg=" 這里輸入你要的內容";// increase msg
k=(30/msg.length)+1;
for(i=0;i<=k;i++) msg+=" "+msg;
// show it to the window
document.form2.banner.value=msg.substring(position,position-30);
// set new position
if(position++==msg.length) position=0;
// repeat at entered speed
id=setTimeout("banner()",60); }
// end -->
banner();
</script></p>
</form>
</td>
</tr>
</table>
</center></div>
<p> </p>
<BODY>
<A href="test8_1.htm"> 返回</a>
</BODY>
</HTML>
輸出結果見(jiàn)圖2所示。
聯(lián)系客服
