再次深入探討互動表單(FORM)語法─智邦公益電子報─台灣最大公益電子報發行中心

第三階段【網頁製作系列報導】電子報【初學者必修篇】

初學者必修篇

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

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

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

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

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

伍、表單<Form> ... </Form>內六個主要控制標籤：
1.輸入表單：<INPUT .... >(裡面共有 9 個屬性，詳下陸、說明)
2.選擇表單：SELECT (詳下捌、說明)
3.文字填寫區域：TEXTAREA (詳下捌、說明)
4.圖片按鈕：BUTTON (詳下捌、說明)
5.表單加上外框：FIELDSET (詳下捌、說明)
6.使用免後端程式：MAILTO (詳下捌、說明)

陸、INPUT標籤內有 9 個屬性(值)：
⊕.type="值" 此屬性值共有 10 種型式(詳下柒、說明)，為必須要欄位。
⊕.name="值" 此屬性的值為資料欄位名稱(可變數名稱值)，為必須要欄位。
⊕.value="值" 此屬性的值為預設字串，如不為空白時，值會在欄位中顯示。
⊕.size="值" 此屬性的值為欄位寬度，單位字元，內定值為20個字元寬度。
⊕.maxlength="值" 此屬性的值為欄位資料輸入最大長度，單位字元。
⊕.checked 加入此屬性時，表示預設某個選項為預定選項。
⊕.readonly 加入此屬性時，表示該欄位只能讀取資料，不能輸入資料(限IE使用)。
⊕.disabled 加入此屬性時，表示該欄位不能被選取或輸入(限IE使用)。
⊕.accesskey 加入此屬性時，表示設定為加(快)速鍵(限IE使用)。
備註：
⊕type及name為INPUT必須要屬性(值)，如果type="Text"時(預設值)，type可以省略，但name還是需要。
⊕INPUT不需結束標籤，後面 3 個(checked...)為 IE Browser 特殊功能。
⊕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.表單加上外框標籤(FIELDSET)：
<FIELDSET>
<LEGEND>內容文字
</FIELDSET>
說明：
⊕每個表單加上外框都要用，<FIELDSET>標籤開始....</FIELDSET>標籤結束來管制。
⊕這是顯示標題內容文字的位置，<LEGEND>內容文字</LEGEND>，也要用到開始及結束標籤。
備註：限IE使用。

5.使用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

拾、結論與建議：
⊕本報每篇報導都花上8小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會HTML語法網友永久保存。
⊕本電子報第三階段報導資料，將繼續每隔30日發表一次，以嘉惠更多想學會HTML網友，歡迎訂閱！
⊕本報導資料取自網頁研習室教學會員檔案資料，內附更多範例介紹，歡迎進一步研習。
⊕強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。
⊕本報導內容或資料，因限人力，非本報教學會員，不接受任何疑惑解答，敬請見諒。
⊕即日起網頁研習室網站，開始提供所有電子報、網頁製作教材等資料，免費各別下載服務，歡迎蒞臨指教。

⊕凡與網路有關之內容，您想要本報在未來報導那些專題？歡迎提出評價與建議。

第三階段94.06.30.發行第012期前期：AUTORUN-DIY 光碟安裝精靈