1、第12章 神奇的表單 之前的所有網頁瀏覽者只能看到、或者使用超鏈接去瀏覽另外一個頁面和頁面內的錨點，但是這些可不能算是動態頁面。現在，大多數網站都具備收集用戶信息的功能，如發表留言、輸入賬號等，而通過使用表單能夠令瀏覽者和頁面互動起來。 在了解表單之前，我們先來簡單了解一下什么是JavaScript程序。而事實上，要分清楚兩個概念：什么是JavaScript的程序部分，該如何去觸發JavaScript程序。12.1 表單的工作原理 表單的最重要的表現就是在客戶端接收用戶的信息，然后將數據遞交給后臺的程序來操控這些數據。從技術的概念上，表單就是一個操作form對象的使用，對象是一種基本的數據類型

2、。12.1.1 標記 JavaScript程序的調用類似于CSS樣式表，可以像嵌入式樣式表一樣放入在標簽中，也可以像外聯式樣式表一樣通過鏈接來引用。當放入到標簽中使用時，需要通過標記命令行。瀏覽器通過標簽獲得分析程序的信息，來告訴瀏覽器使用的是哪種語言的腳本，如實例12-1中第8句： 如果是通過引用外部JavaScript程序，就像鏈接外聯樣式表那樣，那么代碼應該寫成： 12.1.2 創建表單 創建一個表單看上去就像創建一個表格，表格的單元格、行、列都放在標簽中，而創建表單的方式就像是創建一個表格，使用標簽來創建。其中放置表單的對象，有表單域、按鈕和其他事物 標簽中可擴展幾個屬性，分別是act

3、ion、method、enctype和target屬性。action屬性表示將數據傳送到指點的URL地址，method屬性的值告訴瀏覽器通過怎樣的方式來提交數據。還有enctype屬性和target屬性，前者用來表示編碼方式和后者用來表示目標的顯示方式。1ACTION屬性 1action屬性 通過標簽定義的表單，它里面必須有action屬性才能將表單中的數據提交出去。如這句代碼所示： 它的作用是用來提交some.php這個頁面中的數據。2METHOD屬性 2method屬性 method屬性的作用是告訴瀏覽器，數據是以何種方式提交出去的。method屬性下可以有2個選擇：post或者get。

4、這兩種方式的區別在于，get在安全性上較差，所有的表單域的值直接呈現。而post除了只有可見的處理腳本程序以外，別的東西都可以隱藏。所以在實際的運用時，通常都選擇post這種處理方式。3NAME屬性 添加name屬性是為了令遞交出去的表單數據能夠被處理這些數據的程序識別。在大部分頁面中，很可能放入的表單不止一個。那么就要給不同的表單起不同的名字，便于程序來識別。如實例12-1例子中的第27句。 這里將表單命名為loandata，而在代碼的第15句： var length = document.loandata.length.value; 表示通過表單loandata中獲取輸入的length項數

5、值。如果代碼中有很多不同的表單，那么通過name就可以區分它們。4編碼方式 enctype代表HTML表單數據的編碼方式，分別有application/x-www-form-urlencoded、multipart/form-data和text/plain共3種方式。application/x-www-form-urlencoded是標準的編碼方式，提交的數據被編碼為名稱/值對。multipart/form-data屬性表示數據編碼為一條信息，為表單定義了MIME編碼方式，創建了一個與傳統不同的POST緩沖區，頁面上每個控件對應消息中的一個部分。text/plain表示數據以純文本的形式進行編

6、碼，這樣在信息中，將不包含控件或者格式字符。5目標顯示方式 target屬性表示在何處打開目標URL，可以設置4種方式，_blank表示在新的頁面中打開鏈接，_self表示在相同的窗口中打開頁面，_parent表示在父級窗口中打開頁面，_top表示將頁面載入到包含該鏈接的窗口，取代任何當前在窗口中的頁面。所以，一個完整的標記，看上去是這樣的。 12.1.3 表單域 表單域是用戶輸入數據的地方。說得形象一些，就相當于是用戶給程序下命令。當然，這種下命令的方式有許多，如最常見的文本域、下拉列表等。表單域可分為3個對象：input、textarea和select。其中大部分類型的表單形式都通過inp

7、ut屬性來實現，textarea和select創建一種控制類型。12.2 通過表單展示不一樣的頁面 表單中包含多種不同樣式不同功能的提交數據的方式。在許多頁面中，瀏覽者不經意間已經不斷地在使用表單的功能，如留言、設置自己的密碼，或者是復選框、下拉列表等等。12.2.1 INPUT對象下的多種表單表現形式 通常，在頁面中見到的大部分表單的形式都是通過輸入標記input來實現的，一個簡單的樣式看上去可以是這樣的， 12.2.1 INPUT對象下的多種表單表現形式 “name”表示這個輸入數據的名字，它的作用也是為了讓程序明白所提交的數據，如實例12-1中第32句。 這個輸入的數據被命名為lengt

8、h，在第15句中： var length = document.loandata.length.value;12.2.1 INPUT對象下的多種表單表現形式 type屬性表示所定義的是哪種類型的表單形式，這個屬性有9個可選值，每個類型都有自己的功能，如下表所示。text 單行的文本框 password 將文本替換為“*”的文本框 checkbox 只能做二選一的是或否選擇 radio 從多個選項中確定的一個文本框 submit 確定命令文本框 hidden 設定不可被瀏覽用戶修改的數據 image 用圖片表示的確定符號 file 設置文件上傳 button 用來配合客戶端腳本 12.2.2 T

9、EXT文本框的樣式表單 text樣式下的文本框是一個單行的文本框，比較常見于“登錄”這樣的使用。12.2.3 PASSWORD輸入密碼的樣式表單 這是一個可以將文本使用保密形式展示出來的一個功能，最常見的莫過于使用在密碼的設置。根據不同的瀏覽器，會使用點狀形態或者星號符來表示，如果在實例12-2中表單部分代碼寫為： 輸入用戶名： 輸入郵箱地址： 輸入密碼： 12.2.4 CHECKBOX復選框的樣式表單 checkbox是一個復選框的創建方式，類似于一個開關的on和off選擇，瀏覽器會在選擇欄前面提供一個方形小框。如果選擇符合的選項，小框中會添加小勾符號表示被選中，。12.2.5 RADIO單

10、選框的樣式表單 radio樣式有點類似于選擇題，在一組選擇中，選出唯一的一項選擇，發送這列數據。使用的方法是給同一組選項定義為同一名字，但是通過value屬性來辨識它們之間的不同。12.2.6 SUBMIT提交數據的樣式表單 submit屬性創建一個按鈕，這個按鈕的作用就是提交數據。當然準確點說，submit屬性負責“提交”這樣的一個動作。當單擊提交按鈕時，數據會發送到表單指定的地方。12.2.6 SUBMIT提交數據的樣式表單 此外，和submit屬性類似的還有一個reset屬性，這是一個復位按鈕。當被單擊時，表單的內容會被重新設置，回到頁面的初始狀態。它的代碼寫起來和submit樣式類似，

11、代碼如下： 12.2.7 HIDDEN隱藏域的樣式表單 hidden屬性可以創建一個隱藏域，數據會被隱藏起來，因此用戶是無法被操作的。 通常這種方式運用于動態頁面制作，當填寫好第一張表單時，處理表單的腳本程序可以動態地生成第二張表單。同時，其中包含了第一張表單的一些數據，比如，它們可能看上去是這樣的： 12.2.8 IMAGE樣式的表單 看上去，image樣式的表單就像是在頁面中放入圖像，或者又有些類似于圖像替換文本的技術，那不妨將其看作是用圖像替換按鈕的技術。當圖像被點擊時，數據一并被提交至服務器，代碼如下： 12.2.8 IMAGE樣式的表單 當單擊圖像時，其作用就相當于submit按鈕。

12、不過，當表單數據被提交的同時，用戶所單擊的圖像的位置坐標也會被發送，就像這樣： image.x=23 image.y=59 不僅僅可以使用圖像作為按鈕，表單中還有一種觸發事件的button表單。button樣式顧名思義，它只是一個按鈕，單個button按鈕并不會提交任何數據，它的作用是用來調用前端頁面，即客戶端的腳本程序，如實例12-1的第43句用來調用一個簡單計算的JavaScript腳本。 12.2.9 FILE上傳文件的樣式表單 file樣式的表單允許用戶上傳自己的文件，這在論壇、社區類型的網站中經常遇到。比如用戶上傳自己的圖像給服務器，用來改變用戶在不同網站上的形象圖片。12.3 TE

13、XTAREA對象的表單 textarea對象就像是input對象中text樣式的表單，只不過是擴展過的text樣式表單。它可以通過行（rows）屬性和列（cols）屬性來編輯文本域的大小，最常見于留言板、論壇中回帖時的文本框等。12.4 SELECT對象的表單 select對象的表單將創建出一個列表樣式的表單，顯示為一個下拉框，令用戶可以方便地選擇其中一個目錄。通常在一些要求填寫戶口地區、生日等信息中，設計者可以給使用者準備好選項，令使用者填寫信息時更方便。在代碼的寫法中，這里需要使用標簽來定義可供選擇的每一項。12.4 SELECT對象的表單 【深入學習】用戶可以通過下拉目錄框選擇一個“地址

14、”，而這個數據則會被表單發送到服務器。此外，還可以使用value屬性為每一個option指定不同的值。如果是這樣，value設置的值將取代option的文本內容。12.4 SELECT對象的表單 【深入學習】此外，如果設計者不希望select對象以下拉框的形式展示出來，有一種方式可以將目錄項以滾動條的框體樣式表現出來。只需要在select標簽中加入size屬性，如size=6，則表示是一個能容納6行文字的文本框。當目錄項超出設置的行數，將出現滾動條。12.5 表單域集合 表單域的代碼是由標簽和標簽組合而成。默認情況下，標簽勾畫出表單域的框形，標簽的對象像標題一樣出現在框形的左上角。代碼看上去是這樣的： 注冊信息： 輸入用戶名： 12.6 案例：制作一則精美的由表單構成的頁面 在前面的例子中，讀者應該反復感受到了表單也是可以通過CSS樣式表來修飾的這樣一個信