1、什麼是表單對象 表單（<form>）是Web頁面中的基本元素。表單對象最主要的功能就是能夠直接訪問頁面中的表單。利用表單對象，可以實現與用戶的交互；不需要伺服器的介入，就可以實現動態改變Web頁面的行為。對於Web頁面表單，通常使用document對象的forms數組可以很方便地訪問不同的表單。 ...
1、什麼是表單對象
表單（<form>）是Web頁面中的基本元素。表單對象最主要的功能就是能夠直接訪問頁面中的表單。利用表單對象，可以實現與用戶的交互；不需要伺服器的介入，就可以實現動態改變Web頁面的行為。對於Web頁面表單，通常使用document對象的forms數組可以很方便地訪問不同的表單。例如，某HTML文件片段如下：
<form name="form1">
<input type="text">
<input type="text">
<input type="text">
</form>
<form name="form2">
<input type="text">
<input type="text">
</form>
document對象的forms數組有兩個元素：forms[0]可以訪問第一個表單，其中共有三個基本元素：而forms[1]對應表單form2，其中只有兩個元素。
除了用forms數組方式訪問表單對象外，也可以直接用表單的名字進行訪問。例如，對於上例，也可以用document.form1和document.form2分別訪問兩個表單。
2、表單對象的方法
表單對象的submit（）方法用於實現表單信息的提交。例如，要提交頁面中的一個名為form1的表單，可以使用下列語句：
document.form1.submit();
3、表單對象的屬性
屬性描述
Name 表單的名稱
action 提交表單後執行的程式
target
指定數據顯示在哪個視窗(_blank,_parent,_self,_top) 或哪個框架(框架名稱)中
encoding 預設為text/html
method “Get”或“Post”
elements
數組
只讀，表單中所有對象的索引,0,1,…
由document.表單名.elements.length可知該表單共有多少個對象
這裡elements屬性是一個數組，其中的元素對應於頁面上表單內的各個控制項。除了elements外，表單的其他幾個屬性均對應於HTML語法中<form>標記的屬性。
4、表單對象使用示例
下麵示例如果使用表單對象，效果及代碼如下：
<script type="text/javascript">
function display(){
var str;
// 使用表單名稱訪問表單對象的屬性
str="name="+document.form1.name+"\r";
str=str+"action="+document.form1.action+"\r";
str=str+"method="+document.form1.method+"\r";
//訪問表單對象的elements數組
str=str+"elements:"+"\r";
for(var i=0;i<document.form1.elements.length;i++){
str=str+ " "+document.form1.elements[i].type
+"\t"+document.form1.elements[i].name
+"\t"+document.form1.elements[i].value+"\r";
}
window.alert(str);
return false;
}
function submitform(){
//使用表單數組+下標訪問表單對象
document.forms[0].submit();
}
</script>
<form name="form1" action="/web/user" method="post" onsubmit="return
display()">
<input type="text" name="text1" value="AAA"/>
<input type="text" name="text2" value="BBB"/>
<input type="checkbox" name="check1" value="aaa"/>
<input type="submit" name="submit" value="提交"/>
<input type="button" name="button" onclick="submitform();" value="js提交"/>
</form>
註意：單擊“提交”按鈕會觸發表單的onsubmit事件。如果onsubmit的事件處理過程返回false，則不進行表單數據的提交。但如果直接使用表單對象的submit（）方法，則直接將數據提交出去。
* 表單中的基本元素
表單中的基本控制項由按鈕、單選按鈕、覆選按鈕、提交按鈕、重置按鈕和文本框等組成。在JavaScript中要訪問這些控制項，可以使用以下兩種方法實現：
表單.元素名稱 例如：document.form1.check
表單.elements[下標] 例如：document.form1.elements[2]
下麵分別介紹表單中的各個基本控制項。
1、text對象
text對象對應於頁面中的text輸入框控制項。
<input type="text" name="控制項名稱" value="預設文本" />
屬性accessKey 設置或返回訪問文本域的快捷鍵。
使用 Alt + accessKey 為擁有指定快捷鍵的元素賦予焦點
alt 設置或返回當瀏覽器不支持文本域時供顯示的替代文本。
defaultValue 設置或返迴文本域的預設值。
disabled 設置或返迴文本域是否應被禁用。
id 設置或返迴文本域的 id。
maxLength 設置或返迴文本域中的最大字元數。
name 設置或返迴文本域的名稱。
readOnly 設置或返迴文本域是否應是只讀的。
size 設置或返迴文本域的尺寸。
tabIndex 設置或返迴文本域的 tab 鍵控制次序。
type 返迴文本域的表單元素類型。
value 設置或返迴文本域的 value 屬性的值。
方法blur( ) 將當前焦點移到後臺
select( ) 加亮文字，選取文本域中的內容。
focus() 在文本域上設置焦點。
主要事件onfocus，onblur，onselect，onchange
text對象使用示例如下：
<form name="form1">
<input type="text" name="text1" value="Welcome"/>
</form>
<script type="text/javascript">
document.form1.text1.value="this is a javascirpt";
document.form1.text1.select();
alert(document.form1.text1.value);
document.text1.blur();
</script>
2、textarea對象
textarea對象對應於頁面中的textarea輸入控制項。
<textarea name="控制項名稱">預設文本</textarea>
屬性name textarea輸入框控制項名稱
value textarea輸入框控制項中當前的文本
defaultvalue textarea輸入框控制項的預設文本
方法blur( ) 將當前焦點移到後臺
select( ) 加亮文字
主要事件onfocus，onblur，onselect，onchange
3、select對象
select對象對應於網頁中的下拉列表框。
<select name="下拉列表框的名稱" size="下拉列表框顯示的條數">
<option value="選擇值">選項描述</option>
<option value="選擇值" selected>選項描述</option>
…………
</select>
屬性disabled 設置或返回是否應禁用下拉列表
id 設置或返回下拉列表的 id。
length 返回下拉列表中的選項數目。
multiple 設置或返回是否選擇多個項目。
name 設置或返回下拉列表的名稱。
options
數組
返回包含下拉列表中的所有選項(option對象)的一個數組。
其中option對象包括如下屬性：
text 該選項顯示的文字
value 該選項的value值
selected 指明該選項是否別選中
selectedIndex 當前選中項的下標
size 設置或返回下拉列表中的可見行數。
方法options.add() 向下拉列表添加一個選項。
blur() 從下拉列表移開焦點。
focus() 在下拉列表上設置焦點。
remove() 從下拉列表中刪除一個選項。
主要事件onfocus，onblur，onchange
4、button對象
button對象對應於網頁中的按鈕控制項。
<input type="button" value="按鈕上顯示的值" name="控制項名稱">
屬性accessKey 設置或返回訪問按鈕的快捷鍵。
alt 設置或返回當瀏覽器無法顯示按鈕時供顯示的替代文本。
disabled 設置或返回是否禁用按鈕。
id 設置或返回按鈕的 id。
name 設置或返回按鈕的名稱。
tabIndex 設置或返回按鈕的 tab 鍵控制次序。
value 設置或返回在按鈕上顯示的文本。
方法blur() 把焦點從元素上移開。
click() 在該按鈕上模擬一次滑鼠單擊。
focus() 為該按鈕賦予焦點。
主要事件onclick
5、checkbox對象
checkbox對象對應於網頁中的覆選框。
<input type="checkbox" value="值" name="控制項名稱" checked>選項說明
屬性accessKey 設置或返回訪問 checkbox 的快捷鍵。
alt 設置或返回不支持 checkbox 時顯示的替代文本。
checked 設置或返回 checkbox 是否應被選中。
defaultChecked 返回 checked 屬性的預設值。
disabled 設置或返回 checkbox 是否應被禁用。
id 設置或返回 checkbox 的 id。
name 設置或返回 checkbox 的名稱。
tabIndex 設置或返回 checkbox 的 tab 鍵控制次序。
value 設置或返回 checkbox 的 value 屬性的值
方法blur() 從 checkbox 上移開焦點
click() 模擬在 checkbox 中的一次滑鼠點擊。
focus() 為 checkbox 賦予焦點。
主要事件onclick
6、radio對象
radio對象對應於網頁中的單選控制項。當網頁中具有多個相同名稱的單選控制項後，就形成了一個
radio對象數組，其中每個單選控制項即為一個radio對象。
<input type="radio" value="選項值" name="單選項名稱" checked>選項說明
<input type="radio" value="選項值" name="單選項名稱" >選項說明
…………
屬性accessKey 設置或返回訪問單選按鈕的快捷鍵。
alt 設置或返回在不支持單選按鈕時顯示的替代文本。
checked 設置或返回單選按鈕的狀態。
defaultChecked 返回單選按鈕的預設狀態。
disabled 設置或返回是否禁用單選按鈕。
id 設置或返回單選按鈕的 id。
name 設置或返回單選按鈕的名稱。
tabIndex 設置或返回單選按鈕的 tab 鍵控制次序。
value 設置或返回單選按鈕的 value 屬性的值。
方法blur() 從單選按鈕移開焦點。
click() 在單選按鈕上模擬一次滑鼠點擊。
focus() 為單選按鈕賦予焦點。
主要事件onclick
7、hidden對象
hidden對象對應於網頁中的隱藏域。
<input type="hidden" value="值" name="名稱" >
屬性alt 設置或返回當不支持隱藏輸入域時顯示的替代文本。
id 設置或返回隱藏域的 id。
name 設置或返回隱藏域的名稱。
value 設置或返回隱藏域的 value 屬性的值。
8、submit對象
submit對象對應於網頁中的submit按鈕。
<input type="submit" value="顯示文本" name="名稱" >
屬性accessKey 設置或返回訪問提交按鈕的快捷鍵。
alt 設置或返回當瀏覽器不支持提交按鈕時供顯示的替代文本。
disabled 設置或返回提交按鈕是否應被禁用。
id 設置或返回提交按鈕的 id。
name 設置或返回提交按鈕的名稱。
tabIndex 設置或返回提交按鈕的 tab 鍵控制次序。
value 設置或返回在提交按鈕上顯示的文本。
方法blur() 從提交按鈕上移開焦點。
click() 在提交按鈕上模擬一次滑鼠點擊。
focus() 為提交按鈕賦予焦點。
主要事件onclick
9、password對象
password對象對應於網頁中的密碼輸入框。
<input type="password" value="值" name="名稱" >
屬性accessKey 設置或返回訪問密碼欄位的快捷鍵。
alt 設置或返回當不支持密碼欄位時顯示的替代文字。
defaultValue 設置或返回密碼欄位的預設值。
disabled 設置或返回是否應被禁用密碼欄位。
id 設置或返回密碼欄位的 id。
maxLength 設置或返回密碼欄位中字元的最大數目。
name 設置或返回密碼欄位的名稱。
readOnly 設置或返回密碼欄位是否應當是只讀的。
size 設置或返回密碼欄位的長度。
tabIndex 設置或返回密碼欄位的 tab 鍵控制次序。
value 設置或返回密碼欄位的 value 屬性的值。
方法blur() 從密碼欄位移開焦點。
click() 為密碼欄位賦予焦點。
focus() 選取密碼欄位中的文本。
主要事件onfocus，onblur，onselect，onchange
*History對象
History 對象包含用戶（在瀏覽器視窗中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
History 對象屬性
屬性描述
length 返回瀏覽器歷史列表中的 URL 數量。
History 對象方法
方法描述
back() 載入 history 列表中的前一個 URL。
forward() 載入 history 列表中的下一個 URL。
go(number|URL) 載入 history 列表中的某個具體頁面。
-1表示前一個頁面
