首頁 >web前端 >js教程 >javascript對象

javascript對象

高洛峰
高洛峰原創
2016-10-29 13:35:581210瀏覽

1、什麼是表單物件  

表單(

)是Web頁面中的基本元素。表單物件最主要的功能就是能夠直接存取頁面中的表單。利用表單對象,可以實現與使用者的互動;不需要伺服器的介入,就可以實現動態改變Web頁面的行為。對於Web頁面表單,通常使用document物件的forms陣列可以輕鬆存取不同的表單。例如,某HTML檔案片段如下:  

  

  

  

   

  

  

document物件的forms陣列有兩個元素:forms[0 ]可以存取第一個表單,其中共有三個基本元素:而forms[1]對應表單form2,其中只有兩個元素。  

除了以forms陣列方式存取表單物件外,也可以直接以表單的名字來存取。例如,對於上例,也可以用document.form1和document.form2分別存取兩個表單。  

2、表單物件的方法  

表單物件的submit()方法用於實現表單資訊的提交。例如,要提交頁面中的一個名為form1的表單,可以使用下列語句:  

document.form1.submit();  

3、表單物件的屬性  

Name屬性描述🎠

提交表單後執行的程序  

target  

指定資料顯示在哪個視窗(_blank,_parent,_self,_top) 或哪個框架(框名稱)中 

encodingGmethodtext/html Post”  

elements  

數組  

只讀,而表單中所有物件的索引,0,1,…  

由document.表單中有多少個物件.elements.length屬性數組,其中的元素對應於頁面上表單內的各個控制項。除了elements外,表單的其他幾個屬性均對應於HTML語法中

標記的屬性。

4、表單對象使用範例  

下面範例若使用表單對象,效果及程式碼如下:  

<script> <p>function display(){ <p>var str; <p>// 使用表单名称访问表单对象的属性 <p>str="name="+document.form1.name+"\r"; <p>str=str+"action="+document.form1.action+"\r"; <p>str=str+"method="+document.form1.method+"\r"; <p>//访问表单对象的elements数组 <p>str=str+"elements:"+"\r"; <p>for(var i=0;i<document.form1.elements.length;i++){ <p>str=str+ " "+document.form1.elements[i].type <p>+"\t"+document.form1.elements[i].name <p>+"\t"+document.form1.elements[i].value+"\r"; <p>} <p>window.alert(str); <p>return false; <p>} <p>function submitform(){ <p>//使用表单数组+下标访问表单对象 <p>document.forms[0].submit(); <p>} <p></script>  

display()">  

  

  

  

注意:點擊「提交」按鈕會觸發表單的onsubmit事件。如果onsubmit的事件處理過程傳回false,則不進行表單資料的提交。但如果直接使用表單物件的submit()方法,則直接將資料提交出去。  

* 表單中的基本元素  

表單中的基本控制項由按鈕、單選按鈕、複選按鈕、提交按鈕、重設按鈕和文字方塊等組成。在JavaScript中要存取這些控制項,可以使用以下兩種方法實作:  

表單.元素名稱 例如:document.form1.check  

表單.elements[下標] 例如:document.form1.elements[2] 以下分別介紹表單中的各個基本控制項。  

1、text物件  

text物件對應於頁面中的text輸入框控制項。  

  

屬性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对象使用示例如下:  

  

  

  

<script> </script>

document.form1.text1.value="this is a javascirpt";  

document.form1.text1.select();  

alert(document.form1.text1.value);  

document.text1.blur();  

  

2、textarea对象  

textarea对象对应于页面中的textarea输入控件。  

  

属性name textarea输入框控件名称  

value textarea输入框控件中当前的文本  

defaultvalue textarea输入框控件的默认文本  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字  

主要事件onfocus,onblur,onselect,onchange  

3、select对象  

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对象对应于网页中的按钮控件。  

  

属性accessKey 设置或返回访问按钮的快捷键。  

alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。  

disabled 设置或返回是否禁用按钮。  

id 设置或返回按钮的 id。  

name 设置或返回按钮的名称。  

tabIndex 设置或返回按钮的 tab 键控制次序。  

value 设置或返回在按钮上显示的文本。  

方法blur() 把焦点从元素上移开。  

click() 在该按钮上模拟一次鼠标单击。  

focus() 为该按钮赋予焦点。  

主要事件onclick  

5、checkbox对象  

checkbox对象对应于网页中的复选框。  

选项说明  

属性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物件。  

選項說明  

選項說明  

…  

屬性accessKey 設定或傳回存取單選按鈕的快速鍵。  

alt 設定或返回不支援單選按鈕時顯示的替代文字。  

checked 設定或回到單選按鈕的狀態。  

defaultChecked 傳回單選按鈕的預設狀態。  

disabled 設定或回傳是否停用單選按鈕。  

id 設定或返回單選按鈕的 id。  

name 設定或傳回單選按鈕的名稱。  

tabIndex 設定或傳回單選按鈕的 tab 鍵控制順序。  

value 設定或傳回單選按鈕的 value 屬性的值。  

方法blur() 從單選按鈕移開焦點。  

click() 在單選按鈕上模擬一次滑鼠點擊。  

focus() 賦予單選按鈕焦點。  

主要事件onclick  

7、hidden物件  

hidden物件對應於網頁中隱藏的網域。  

  

屬性alt 設定或傳回當不支援隱藏輸入域時所顯示的替代文字。  

id 設定或傳回隱藏域的 id。  

name 設定或傳回隱藏域的名稱。  

value 設定或傳回隱藏域的 value 屬性的值。  

8、submit物件  

submit物件對應於網頁中的submit按鈕。  

  

屬性accessKey 設定或傳回存取提交按鈕的快速鍵。  

alt 設定或傳回瀏覽器不支援提交按鈕時供顯示的替代文字。  

disabled 設定或返回提交按鈕是否應已停用。  

id 設定或返回提交按鈕的 id。  

name 設定或傳回提交按鈕的名稱。  

tabIndex 設定或傳回提交按鈕的 tab 鍵控制次序。  

value 設定或傳回在提交按鈕上顯示的文字。  

方法blur() 從提交按鈕上移開焦點。  

click() 在提交按鈕上模擬一次滑鼠點擊。  

focus() 為提交按鈕賦予焦點。  

主要事件onclick  

9、password物件  

password物件對應於網頁中的密碼輸入框。  

  

屬性accessKey 設定或傳回存取密碼欄位的快速鍵。  

alt 設定或傳回不支援密碼欄位時所顯示的替代文字。  

defaultValue 設定或傳回密碼欄位的預設值。  

disabled 設定或傳回是否應停用密碼欄位。  

id 設定或傳回密碼欄位的 id。  

maxLength 設定或傳回密碼欄位中字元的最大數目。  

name 設定或傳回密碼欄位的名稱。  

readOnly 設定或回傳密碼欄位是否應是唯讀的。  

size 設定或傳回密碼欄位的長度。  

tabIndex 設定或傳回密碼欄位的 tab 鍵控制次序。  

value 設定或傳回密碼欄位的 value 屬性的值。  

方法blur() 從密碼欄位移開焦點。  

click() 賦予密碼欄位焦點。  

focus() 選取密碼欄位中的文字。  

主要事件onfocus,onblur,onselect,onchange  

 

*History物件  

History 並且  

History 物件是 window 物件的一部分,可透過 window.history 屬性進行存取。  

History 物件屬性  

屬性描述  

length 返回瀏覽器歷史清單中的 URL 數量。  

History 物件方法  

方法說明  

back() 載入 history 清單中的前一個 URL。  

forward() 載入 history 清單中的下一個 URL。  

go(number|URL) 載入 history 清單中的某個特定頁。  

-1表示前一頁  


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn