JavaScript-互動基本方法--窗體

阿新 • • 發佈：2020-10-26

JavaScript-互動基本方法--窗體

在JavaScript-指令碼中主要使用窗體中及其中的基本元素實現web頁面資訊互動的方法。要實現動態互動，必須掌握有關窗體兌現（Form）和框架物件（Frames)更為負責的知識

1.窗體基本概念

　　設計人員在頁面設計的時候使用窗體物件及窗體中他不同的元素與客戶機使用者相互動，使用Form表示窗體物件，它構成了Web頁面的基本元素。

2.窗體物件的訪問：

　　通常一個Web頁面有一個或幾個窗體，使用Forms[]陣列來實現不同窗體的訪問。其訪問方法如下：

<from Name=form1><INPUT type=text...></form>
<from Name=form2><INPUT type=text...></form>

通過陣列訪問：

document.form[0]
document.form[1]...

3.窗體物件中的基本元素

　　在JavaScript中要訪問這些基本元素，必須通過對應特定的窗體元素的陣列下標或窗體元素名來實現。每一個元素主要時通過該元素的屬性或方法來引用。其引用的基本格式如下：

formName.elements[].methadName(窗體名.元素名或陣列.方法)
formName.element[].propertyName(窗體名.元素名或陣列.屬性)

　　窗體物件中的基本元素有：

按鈕，單選按鈕，複選按鈕，提交按鈕，重置按鈕，文字框等，

1.Text元素

　　在JavaScript中使用Text元素可以對Text中的元素進行控制

常用屬性，方法及事件

屬性：
    Name：設定提交資訊時的資訊名稱。對應與HTML中的Name。
    Value：用以設定出現在視窗中對應HTML中Value的資訊。
    defaultvalue：包括Text元素的預設值。
方法：
    blur（）：將當前焦點移到後臺。
    select()：加量文字。
事件：
    onFocus:當Text獲得焦點時，產生該事件。
    OnBlur：當元素失去焦點時，產生該事件。
    Onselect：當文字被加亮顯示後，產生該事件。
    onchange：當Text元素值改變時，產生該事件。

2.Textarea 元素

在Javascript中使用 Textarea 元素可以對Texarea 中的元素進行控制

常用屬性，方法及事件

屬性：
    name：　　設定提交資訊是的資訊名稱，對應HTML文件Textarea的
    Value：　　用以設定出現在視窗中對應的HTML中Value的資訊。
    Default value:　　元素的預設值。
方法：
    blur（）：　　將輸入焦點失去。
    select（）：　　將文字加亮。
事件：
    onBlur：　　當失去焦點後產生該事件。
    onFocus：　　當輸入獲得焦點後，產生該事件。
    Onchange：當文字值改變時，產生該事件；
    Onselect：　　當文字加亮後，產生該事件

3.Select 元素

作用：

　　在JavaScript中使用Select元素，可以對滾動選擇元素進行控制。

常用屬性，方法，及事件：

屬性：

　　name:設定提交資訊時的資訊名稱，對應HTML中select的name。

　　Length:對應HTML中selet的lenght。

　　options:組成多個選項的陣列。

　　selectIndex:該下標指明一個選項。

　　Select:當中每一選項都含有以下屬性

　　Text:選項對應的文字

　　selected:指明當前選項是否被選中。

　　Index:選項對應的文字。

　　defaultselected:預設選項

方法：

事件：

　　OnBlur:　　當 select 選項失去焦點時，產生該事件。

　　onFocas:　　當 select 獲得焦點時，產生該事件。

　　Onchange:　　當選項狀態改變後，產生該事件。

4.Button 元素

作用：

　　使用 Button 元素可以對 Button 按鈕進行控制。

常用屬性，方法，及事件：

屬性：

　　Name:　　設定提交資訊時的資訊名稱。對應 HTMl 中 button 的Name
　　Value:　　用以設定出現在視窗中對應 HTML 中 Value 的資訊。
方法：

　　click():　　該方法類似於一個按下的按鈕。
事件：

　　Onclick:　　當單機 button 按鈕時，產生該事件。

5.Checkbox 元素

作用：

　　使用 Checkbox 元素可以對複選框元素進行控制。

常用屬性，方法，及事件：

屬性：

　　name：設定提交資訊時的資訊名稱。

　　Value：　　用以設定出現在視窗中對應HTMl中Value的資訊。
　　Checked：　　該屬性指明框的狀態 true/false。
　　defauitchecked:　　預設狀態。
方法：

　　click():　　該方法使得狂的某一個項被選中。
事件：

　　onclick：　　當框被選中時，產生該事件。

6.Radio 元素

作用：

　　使用Radio元素可以對單選按鈕中元素進行控制。

常用屬性，方法，及事件：

屬性：

　　name：　　設定提交資訊時的資訊名稱
　　value：　　用以設定出現在視窗中對應HTML中的value資訊
　　length：　　單選按鈕中的按鈕數目。
　　checked：　　指明選中還是沒有選中。
　　index：選中的按鈕的位置

方法：

　　click():　　選定一個按鈕
事件：

　　onclick：　　單機按鈕時產生該事件。

舉例：

通過點選一個按鈕（red）來改變視窗顏色及對Text元素，進行控制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/JavaScript">
        // 原來的顏色
        document.bgColor = "blue";//設定窗體顏色
        // 動態改變顏色
        function changecolor() {
            if (document.forms[0].mytest.value=="red")
            {
                document.bgColor="red";//設定窗體顏色

                document.forms[0].mytest.value = "blue";//設定窗體的button元素的值
                document.forms[0].mytest1.value = "my JavaScript";//設定窗體的text元素的值
                document.forms[0].mytest1.select(); //設定窗體的text元素文字加亮
                document.forms[0].mytest1.blur(); //設定窗體的text元素失去焦點
            } else {
            document.bgColor = "blue";
            document.forms[0].mytest.value = "red";
            document.forms[0].mytest1.value = "your JavaSript";
            }
        }
    </script>
</head>

<body bgcolor="Whilte">
    <a href="http://www.china.com">中華網連結</a>
    <form action="" name="form1">
        <input type="button" name="mytest" value="red" onclick="changecolor()">
        <input type="text" name="mytest1" value="this is a JavaScript">

    </form>

</body>

</html>