| 【表單介紹】 |
| 程式說明 |
|
本單元純粹以介紹各式表單為主， 至於一些互動程式CGI、ASP、PHP...等等，便不在此敘述了。 |
| 存放位置 |
| 將下列程式存放至 <body> 標籤後 </body> 標籤前。 |
| 表單 | 目前還無法顯示範例 |
| 原始碼 | <FORM></FORM> |
| 效果解釋 |
透過該標籤可以在網頁中建立表單，以及與表單整體相關的設定， 例如表單的傳送、性質等等。必需與附屬程式一同使用才會有效果。 |
| 傳送方法 | 目前還無法顯示範例 |
| 原始碼 | <FORM ACTION="表單數據接收" METHOD="數據傳送方法"></FORM> |
| 效果解釋 |
透過該參數可以設定將表單以何種傳送方法， 傳送到指定的程式或電子郵件地址中。 表單數據接收方法如下:
1. 程式路徑 : 例如CGI、ASP、PHP...等等，處理表單。 數據傳送方法方法如下:
1. GET : 將表單的內容傳送出去，並可以完全被包含在URL內， |
| 傳送形式 | 目前還無法顯示範例 |
| 原始碼 | <FORM ENCTYPE="傳送形式"></FORM> |
| 效果解釋 |
指定傳送該表單資料至伺服器時，所使用的內容型態。
1. TEXT/PLAIN : 一般純文字型態 |
| 輸入欄位 | 目前還無法顯示範例 |
| 原始碼 | <INPUT></INPUT> |
| 效果解釋 |
此標籤與其參數，都必須包含在表單(<FORM>)的標籤之中才會有作用， 透過各種參數的使用，可以建立各種不同屬性或是功能表欄位， 以供建立表單的內容。 |
| 姓名欄位 | |
| 原始碼 | <INPUT TYPE="TEXT" SIZE="20"></INPUT> |
| 效果解釋 |
1. TEXT : 透過該參數可以在表單內插入一個單行的文字欄位， 此程式多用來設定成輸入姓名欄位 2. SIZE : 只要自行輸入數值便可自由設定欄位寬度。 3. VALUE : 可以用來設定欄位內容。 4. 加入MAXLENGTH="數值"，可以設定此一欄位可設定輸入的最大長度。 |
| 密碼表單 | |
| 原始碼 | <INPUT TYPE="PASSWORD" SIZE="20"></INPUT> |
| 效果解釋 |
1. PASSWORD : 透過該參數可以在表單內插入一個密碼欄位， 輸入的內容不會直接顯示在螢幕上，而是用『*』替代顯示。 2. SIZE : 只要自行輸入數值便可自由設定欄位寬度。 3. VALUE : 可以用來設定欄位內容。 4. 加入MAXLENGTH="數值"，可以設定此一欄位可設定輸入的最大長度。 |
| 檔案欄位 | |
| 原始碼 | <INPUT TYPE="FILE" SIZE="20"></INPUT> |
| 效果解釋 |
1. FILE : 透過該參數可以在表單內插入一個欄位以及『瀏覽』按鈕， 透過『瀏覽』按鈕可以指定電腦內的檔案，在欄位中則會顯示檔案的路徑。 2. SIZE : 只要自行輸入數值便可自由設定欄位寬度。 3. 加入MAXLENGTH="數值"，可以設定此一欄位可設定輸入的最大長度。 |
| 設定按鈕 | |
| 原始碼 | <INPUT TYPE="BUTTON" VALUE="按鈕"></INPUT> |
| 效果解釋 |
1. BUTTON : 此語法可以建立一個按鈕，並且供使用者自行設定按鈕上的名稱。 2. VALUE是用來設定按鈕的名稱，可以自由設定。 |
| 發送按鈕 | |
| 原始碼 | <INPUT TYPE="SUBMIT" VALUE="發送"></INPUT> |
| 效果解釋 |
1. SUBMIT : 透過該參數可以在表單插入一個發送按鈕，當單擊該按鈕時， 將會把表單的內容發送給指定的程式來處理， 或將表單的數據以郵件的形式發送到指定的信箱。 2. VALUE是用來設定按鈕的名稱，可以自由設定。 |
| 重設按鈕 | |
| 原始碼 | <INPUT TYPE="RESET" VALUE="清除"></INPUT> |
| 效果解釋 |
1. RESET : 透過該參數可以在表單內插入一個重設按鈕， 當單擊此按鈕可將表單的內容清空恢復。 2. VALUE是用來設定按鈕的名稱，可以自由設定。 |
| 單選選項 | BOY GIRL |
| 原始碼 |
BOY<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"></INPUT> GIRL<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL"></INPUT> |
| 效果解釋 |
1. 如果想要設定該選項時，就在最後加上『CHECKED』， 一個表單中只能設定一個，如果重複的話，會以先設定的項目為主。 2. NAME在這裡是當做(主題名稱)而VALUE變為(對應名稱) |
| 複選選項 | 喜好 : 電影 看書 |
| 原始碼 |
喜好 : <INPUT TYPE="CHECKBOX" NAME="喜好" VALUE="電影">電影</INPUT> <INPUT TYPE="CHECKBOX" NAME="喜好" VALUE="看書">看書</INPUT> |
| 效果解釋 |
1. 在表單中插入複選的選單，一個表單標籤的項目， 可多重勾選核取項，通常用在複選題的表單。 2. NAME在這裡是當做(主題名稱)而VALUE變為(對應名稱) |
| 隱藏欄位 | |
| 原始碼 | <INPUT TYPE="HIDDEN" NAME="選項名稱" VALUE="欄位內容"></INPUT> |
| 效果解釋 |
隱藏欄位是用來傳給Web伺服器的，使用者是無法看到這個設定的欄位。 主要利用此欄位傳送輸入表單時的環境，或用來在HTML文件間的傳遞資料。 |
| 下拉式選單 | |
| 原始碼 | <SELECT></SELECT> |
| 效果解釋 |
此標籤所建立的表單內容，會出現欄位以及下拉按鈕， 透過按鈕可以展開選項進行選擇。 必需與<OPTION>一同使用才會有效果。 |
| 選單選項 | |
| 原始碼 |
<SELECT> <OPTION VALUE="">名稱 <OPTION VALUE="">名稱 <OPTION VALUE="">名稱 </SELECT> |
| 效果解釋 |
<SELECT>需要<OPTION>項目的配合才能顯示下拉選單中的選項名稱， 連續設定<OPTION>標籤項目，既可產生多個下拉選單中的選項。 |
| 選單樣式 | |
| 原始碼 |
<SELECT NAME="" SIZE="1" MULTIPLE> <OPTION>名稱 <OPTION>名稱 <OPTION>名稱 </SELECT> |
| 效果解釋 |
1. 下拉選單可以設定單選或是複選，複選的下拉選單也就是清單方塊， 並不會藉由下拉選單進行選擇; 這兩個樣式的差異性在於SIZE與MULTIPLE參數的應用。 2. SIZE : 設定欄位多少選項，當值大於1時，下拉選單就會轉變成複選選單。 3. MULTIPLE : 設定可以多數選取，必須使用大寫字母， 小寫的話此參數會被忽略。 |
| 多行文字欄位 | |
| 原始碼 |
<TEXTAREA> </TEXTAREA> |
| 效果解釋 |
透過該參數可以設定多行聞字欄位，並精確控制文字欄位的行數， 每一行可容納的英文字元數，文字的色採及其字型的大小。 |
| 設定欄位 | |
| 原始碼 |
<TEXTAREA ROWS="列數" COLS="行數" WRAP="換行參數"> </TEXTAREA> |
| 效果解釋 |
設定文字欄位的行數及每一行可以容納的英文字元個數。換行參數: 1. OFF : 不換行。 2. VIRTUAL : 在欄位中自動換行，輸出表單時不換行。 3. PHYSIVAL : 在欄位中自動換行，輸出表單時也換換行。 |
| 注意事項 |
| 內容刊登錯誤或無法理解的地方請至談心留言板告知或詢問站長-謝謝大家。 |
| │課程編撰：不二家│單元編號：H15 篇│版權所有：神羅集團│ |