再次深入探討互動表單(FORM)語法

第二篇
再次深入探討互動表單(FORM)語法

壹、甚麼是互動表單(ACTIVE FORM)：
何謂互動 (ACTIVE)：簡單的說就是能與訪客彼此間產生回應的動作。
何謂表單 (FORM)：簡單的說就是可以讓訪客於網頁上輸入資料的欄位。
何謂互動表單：也就是藉由網頁提供您與訪客彼此間，相互傳達訊息的 HTML 語法。
表單只是純粹的靜態 HTML 語法，但想讓它互動起來，就必需借助網頁各種程式。
何謂網頁程式：如 ASP、CGI、PHP、JS...等，都是屬於互動網頁專用程式。
何謂互動程式：如購物車、留言版、討論區、投票程式...等，都是屬於互動程式。
網站藉由互動表單，讓人與人之間，搭起一座可以相互溝通的橋樑。

貳、如何徹底學會互動表單及網頁程式：
首先，您應該瞭解以上所說的基本概念及運作方式。
再來就是學習表單的 HTML 基本語法(也就是本次報導的主要內容)。
如果您是初學者或想進一步瞭解，歡迎回顧本報過去相關報導(詳下玖、說明)。
如果您對程式語言有興趣，當然就應該學習至少一種網頁使用程式。
如果您沒時間或學不來程式語言，網路上也有很多現成的資源可套用。
不論是自己想學或是想使用網路免費資源，本報導以後也會陸續告訴您。

參、表單HTML基本語法(架構)：
<body>
<Form ...> 
<6 個主要控制標籤> 
</Form> 
</body>

肆、表單 <Form ...> 內的相關屬性設定：
01.METHOD="GET | POST"
METHOD 屬性主要是用來指出 Form 的傳輸方式，其值有以下兩個：
GET：使用 GET 時，會先解碼附於 URL 後再傳至指定伺服器處理，資料有長度( 256 字元)限制。
備註：METHOD 預設值為 GET，一般用於搜索引擎，安全性較高。
POST：採用POST時，可將資料本身成對的可變名稱值，傳入伺服器處理，資料無長度限制。
備註：因為方便，大部份會使用此方法。
02.ACTION="URL"
URL 為設定 CGI、ASP、PHP..等程式存放的所在目錄位置及檔名(可使用相對或絕對路徑)。
備註：在沒有以上程式可用下，您也可以使用免後端程式 Mailto 控制標籤暫代(測試)。
03.enctype="data type"
data type 為資料處理格式，用於送出資料的格式是否需要經過編碼等功能處理，一般可不用加此標籤。
屬性預設值為 enctype="application/x-www-form-urlencoded" (大多被省略掉)。
用於寄信 (ACTION="Mailto:") 時，屬性值應設為 enctype="text/plain"。
用於上傳檔案 (Type="file") 時，屬性值應設為 enctype="multipart/form-data"。

伍、表單 <Form> ... </Form> 內五個主要控制標籤：
01.輸入型表單：<INPUT .... >(裡面共有 10 個屬性，詳下陸、說明)
02.選擇型表單：SELECT (詳下捌、說明)
03.文區塊型表單：TEXTAREA (詳下捌、說明)
04.圖片按鈕表單：BUTTON (詳下捌、說明)
05.MailTo 表單：MAILTO (詳下捌、說明)

陸、INPUT 標籤內有 10 個屬性(值)：
type="值" 此屬性值共有 10 種型式(詳下柒、說明)，為必須要欄位。
name="值" 此屬性的值為資料欄位名稱(可變數名稱值)，為必須要欄位。
value="值" 此屬性的值為預設字串，如不為空白時，值會在欄位中顯示。
size="值" 此屬性的值為欄位寬度，單位字元，內定值為 20 個字元寬度。
maxlength="值" 此屬性的值為欄位資料輸入最大長度，單位字元。
checked 加入此屬性時，表示預設某個選項為預定選項。
readonly 加入此屬性時，表示該欄位只能讀取資料，不能輸入資料(限 IE 使用)。
disabled 加入此屬性時，表示該欄位不能被選取或輸入(限 IE 使用)。
selected 表示"指定為預設選項"用於 Select 被指定後會變成預設選項。
multiple 表示"多重選擇"用於 Select 標籤，選項可共多重選擇。
備註：
type 及 name 為 INPUT 必須要屬性(值)，如果 type="Text" 時(預設值)，type 可以省略，但 name 還是需要。
INPUT 不需結束標籤。
name 在特殊情況下(如使用 MAILTO 功能時)或程式配合下設定，也可使用中文。
value 雖然不是每個 INPUT 內必要屬性及值，但在使用如 Raido、buttom 的 Type 型式時，卻不可省略喔。

柒、TYPE 共有 10 種型式：
Text 此為單行文字填寫型式(預設值)，會產生一行空白欄位，讓訪客可輸入文字等資料。
PassWord 此為密碼填寫型式，當訪客輸入資料時，會以 **** 顯示。
Hidden 此為隱藏欄位型式，提供網頁或程式設計者，配合後端程式使用。
Raido 此為單一的圈選點鈕型式(單選)，其主要功能係供訪客做單一選擇(項)時用。
CheckBox 此為核取選擇方塊型式(複選)，其主要功能係供訪客做多重選擇時用。
Submit 此為同意/確認按鈕型式，其主要功能係供訪客送出表單內各欄位內的資料給後端程式處理。
Reset 此為放棄/清除按鈕型式，其主要功能係供訪客清除(回覆為預設值)表單內各欄位資料。
buttom 此為通用性按鈕型式，提供網頁或程式設計者，加入前端程式(如 JavaScript、VBScript)功能。
Image 此為圖像型式表單，提供訪客送出表單或影像地圖(現已很少使用)資料的功能。
File 此為檔案上傳型式，其主要功能係供訪客上傳檔案給版主使用的。
備註：
Type="Raido" 時，name 內的 value 值一定要一樣，這樣才能產生單一選項功能。
Type="CheckBox"，若未設 value 值時，被勾選者會傳回 [on] 內訂值顯示。
通常為了清楚辨識傳回資料，我們都會將 CheckBox 內的 name 值設為一樣，而以 value 值來區別選項。
Type="Submit" 及 "Reset"，如未設 value 值時，會以內定值顯示，也就是[送出查詢]及[重設]文字。
一般我們都會自己另訂 Submit 及 Reset 的值，如 value="確定訂購"或"清除內容"，以配合該表單實際狀況需要。
Type="Image" 時，因為使用到圖檔語法，所以圖檔所使用的語法(如：Align、Width、height、alt..)都可以套到這上面。
注意：
Type="Submit" 及 "Reset" 時，如前後端程式不需特別指定的話，name 值建議省略，否則會傳回這個值喔。
盡可能避免使用 Reset [重設]按鈕，因未訪客有可能不小心按到，造成辛苦已填好的資料不見喔。
Type="File" 時，<Form ...>內的 enctype 屬性，記得要設定為 multipart/form-data。

捌、另外四個主要控制標籤：
1.選擇表單標籤 (SELECT)：可下拉(或多重)選擇式標籤，用於設定窗型欄位，每個選項以 <OPTION> 來指定他。
<select Name="Value" Size="N" Multiple>
<option 1 Selected>文字1
<option 2>文字2
<option 3>文字3
<option 4>文字4
</select>
說明：
Name="資料欄名稱"，傳送資料到伺服器給 CGI 等程式處理的可變數名稱值。
Size="項目數量"，單位(個/列)，內定為 1 個列位。
Multiple="允許多重選項"，可按 Ctrl 及滑鼠左鍵來選擇一個以上項目。
Selected="預設選定值"。
<option 2>文字 2，2 表示設定值 (value)，可有可無，但後面文字 2，不可省略。
<option>可單獨或設個結束標籤。

2.文字填寫區域標籤 (TEXTAREA)：
<textarea name="Value" cols="長度" rows="高" Wrap="如下說明"></textarea>
說明：
cols="區域的長(寬)度度"，單位字元、rows="區域的高度"，單位列。
Wrap 標籤是指輸入文字是否強迫折返。
Wrap="Off" 輸入文字超過長度時，會出現水平捲軸(關閉強迫折返功能)，"ON" 為預設值。
Wrap="hard" 輸入文字超過長度時，不會出現水平捲軸，等於 Wrap="ON"。
Wrap="Virtual" 輸入文字超過長度時，會自動換行；送出之資料，只有在按 Enter 鍵處換行。
Wrap="Physical" 輸入文字超過長度時，會自動換行；將依照螢幕所見到的樣式，送出資料。
備註：
無需於區域顯示預定文字，可於<textarea> .. </textarea>中間輸寫文字，就會顯示出來。
注意：
<textarea ...>標籤內，不可以使用 value 屬性。
</textarea>結束標籤不可省略。

3.圖片按鈕標籤 (BUTTON)：
<form ACTION="URL/*.cgi" METHOD="POST">
<button type="submit" name="傳送"><img src="accept.gif"></button>
<button type="reset" name="重寫"><img src="cancel.gif"></button>
<button type="button" name="放棄" value="不寄了，離開" onClick="window.close()"><img src="naccept.gif"></button>
</form>
說明：
每個按鈕標籤都要用，<button ...>標籤開始....</button> 標籤結束來管制。
因為使用到圖檔語法 (img src="")，所以圖檔所有的語法(如：Align、Width、height、alt..)都可以套到這上面。
備註：限 IE 使用。
注意：這組按鈕標籤與 Type="buttom"、Type="Image" 的 INPUT 標籤，有幾分相似，請仔細查看。

4.使用 MAILTO 標籤：
<FORM METHOD=POST ACTION="mailto:yourname@yourmail.idv.tw" ENCTYPE="text/plain">
郵件信箱：<input type=text NAME="郵件信箱" size=30 maxlength=50>
您的建議：<textarea cols=60 rows=5 name="您的建議">
</textarea>
</FORM>
說明：
使用 MAILTO 標籤，會呼叫 Outlook 或電腦內預設的郵件軟體，如果訪客未曾設定此軟體，將無法運作。
以上所有標籤都可套用到這裡面(<FORM ..> ... 使用或測試。
此處 name 的值，也可使用中文。
注意：
記得要將 mailto:yourname@yourmail.idv.tw，改為您自己的信箱喔。
如果未設 METHOD=POST 值，其結果將會打開 Outlook 或電腦內預設的郵件軟體，來傳送空白的郵件喔。
如果 enctype 值未設為 text/plain ，其結果將以未加編碼的附加檔案 (POSTDATA.ATT) 方式傳送。
備註：限IE使用。

玖、注意事項及過去相關報導：
注意事項：
如果一個網頁需要兩個以上表單，請務必使用的巢狀包覆表單。
就常用的上 IE (微軟)與 NC (網景)這兩個瀏覽器 (Browser) 而言，部份標籤及屬性，會造成呈現的外觀有些不同喔。
為了讓您易於編排整份表單內容，建議使用 <Table>或<Pre> 語法來包裹表單標籤。
如果您想讓表單更加好看，當然所有 HTML 語法，都可以派上用場。
如果您想讓表單更加好用，當然還有很多網路相關前端程式(如 JavaScript)，可以幫助您。
表單只是純粹的靜態 HTML 標籤，要讓它互動起來，就必需藉助後端程式的配合。
整體而言：表單的製作重點在於簡單易懂、管理及使用方便。
第一期電子報： Go
網際網路基礎【04】 Go
實用 CGI 程式 Go
第二期電子報： Go
運用 MailTo 製作一個互動回信表單 Go
徹底研究各種 Mailto HyperLink 用法 Go
製作一個可以輸入名稱及密碼的網頁 Go
用 JavaScript 來檢查各類表單欄位 Go
如何使用便宜又好用的線上購物車 Go
網頁研習室教學教材：
第三篇《HTML教學》第九節：網頁表單 Go
避免錯誤(不合法)的巢狀包覆表單 Go
第四篇《強化內容》第六節：瞭解 CGI 語言、第七節：瞭解ASP語言 Go
如果您想完整取得電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、第四期電子報、網頁圖窟。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此引用來源，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。