表單一

§ 表單

「表單」是使用者和網站之間的溝通橋樑，透過「表單」可以讓使用者和網站之間產生互動。
表單的用途：收集使用者輸入的資料。
應用實例：線上購物、線上訂票、問卷調查、網路票選、留言板、討論區、會員申請....等。

＊ Tips：

事實上，「表單」只是負責收集使用者輸入的資料。而真正要能讓這些辛苦匯集而來資料變成有用的資訊，還得靠 CGI(Common Gateway Interface 共同閘道介面) 或 ASP 程式(Active Server Pages動態伺服器網頁)在背後負責處理這些資料的接收、處理、傳遞等工作。而這些都牽涉到伺服器主機的運作，因此，有些伺服器主機會限制它們的使用，以免增加伺服器的負擔，這是網友們在申請免費網頁空間時應注意的。

「表單」往往需要以上的配合才得以發揮的功用，所以，以前一般初學者是很難得有機會去接觸它的。但是，自從 JavaScript興起一股熱潮後，我想大家應該改觀了。JavaScript 的興起，最大的緣由莫過於要和使用者達到互動，JavaScipt 和 CGI 及ASP最大的不同就是它是一種「直譯式」語言，只要透過使用者有支援Java語法的瀏覽器就能直接執行(這點和上述的CGI、ASP是大大的不同的)，因此，JavaScipt與「表單」便緊緊的契合在一起，讓「表單」不會再「英雄無用武之地」了，因此，「表單」的應用實例，勢必更加如火如涂的開展！

§ <form>....</form> 標籤

這一組標籤所定的就是一個表單。
所有的表單元件，必需放在這組標籤中間。

§ action 屬性

設定表單的資料要送到伺服器中的哪一個程式作處理。
能處理表單資料的程式當然就是上面所講的CGI、ASP之類的。
要送給這些程式處理，前題是要有它們的「使用權」才行。
語法：

<form action="*.asp">

我們可以將上述的 *.asp 簡單的改成傳送到某個電子郵件信箱。透過e_mail 的方式，將它傳送到特定的信箱中。
語法：

<form action="mailto:電子郵件信箱">

§ method 屬性

設定資料的傳送方法。
有兩種方法可以選擇：get、post。

get：直接送出 ASCII CODE 字元，供程式處理。有 ASCII CODE 的限制，所送出的資料不能超過512Bytes。
post：先打包 (Package) 再送出，沒有以上512Bytes的限制。

語法：

<form action="*.asp" method="post">

get 是預設值，但是，現在我們幾乎都是用 post 。

§ enctype 屬性

指定資料送出時的編碼方式。
在 method 為 post 時，才會有作用。
預設的傳送編碼方式是：application/x-www-form-urlencoded

1.用來傳送ASCII字元為主。
2.空白字元會以"+"(加號)取代。
3.非字元符號會以%HH取代。
4.斷行符號會變成"CR LF"部分(例如："%0D%0A")。
5.所有控制名稱及值會被獨立出來，每個名稱以"="(等號)分開，其下的值則依出現在文件中的順序以"&"作分隔。
6.預設的編碼方式是無法傳送大量的Binary資料，也無法傳送文件中含有非ASCII字元的資料。

採用 multipart/form-data 的編碼方式則可以傳送binary資料、檔案、非ASCII字元。
這方面w3協會舉了很多例子，站長這方面資料還在翻譯整理中，等整理好後再放上來。
(資料來源：W3協會)想更深入的瞭解的話，請到連到網址(英文)： http://www.w3.org/

§ name 屬性

指定這個表單的名稱，讓JavaScript程式可以配合呼叫使用表單的內容。
變數名稱大小寫是有區別的。(注意：呼叫它時，大小寫要一樣)
語法：

<form name="thisform">
經此設定， thisform 就成了這個表單的名稱了

§ input 標籤

這個標籤不用結束標籤。必需放在<form>....</form>中間。
以上的<form>...</form>是一個整體屬性的定義，而這個<input>標籤所要定義的就是真正出現在<form>中的元件。
而這些元件，就是在提供一個輸入介面或按鈕，讓使用者可以輸入資料或送出資料用的。包括：text、password、radio、checkbox、submit、reset、hidden。

§ name 屬性

和上面的 <form> 相同，也是指定每個元件的名稱，讓 JavaScript 等程式可以很方便地呼叫使用。
命名時最好指定和欄位相關的名稱，方便識別。如：CName 代表中文名字、ENName 代表英文名字。
語法：

<form name="thisform">
<input name="CName" type="text">
</form>

經由上面的命名後，就可以在JavaScript中以 thisform.CName 的名稱來呼叫這個欄位了。

§ type 屬性

type 屬性是 <input> 標籤內不可或缺的一個屬性，它就是用來定義元件的格式。
以下就以type屬性所定義出來的元件格式，遂一說明其它的屬性(因這些屬性在不同的元件中稍有不同)。

§ type="text"

type="text" 可以定義出一個單行的文字輸入欄位。
語法：

<input type="text">

＊範例 (定義出一個單行輸入欄位)

從剛才的範例您可以發現，畫面出現的是一個可以輸入資料的欄位，可是使用者一定不知道要輸入什麼東西。因此，您必需在<input>標籤的前面加上一些輸入的提示說明才可以。

＊範例 (輸入欄位的說明)

以下的作法，使用者就可以很清楚的知道要輸入什麼東西了。

<form name="thisform">
<p>姓名：<input type="text"></p>
<p>電話：<input type="text"></p>
</form>

以上，您或許發現：欄位都是一樣長。可以不可以更改欄位長度？當然....可以！
利用 size 屬性您就可以輕易地把欄位變長或變短了。
語法：

<input type="text" size="10">

＊範例 (輸入欄位的長度)

利用value屬性您可以設定預設出現的值或提示文字。
語法：

<input type="text" size="10" value="請輸入電話">

＊範例

利用 maxlenght 屬性，可以設定最大的資料輸入長度。
語法：

<input type="text" maxlenght="20">