|
1. 文字輸入列：每個表單之所以會有不同的類型，原因就在於TYPE="表單類型"設定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的形態就是TYPE="TEXT，其使用方法如下：
| 原始碼 |
<FORM>
姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
2. 單選核取表單：利用TYPE="RADIO" 就會產生單選核取表單，單選核取表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選核取表單。
| 原始碼 |
<FORM>
姓名：
男<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">
女<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位為預設選取值。
3. 複選核取表單：利用TYPE=" CHECKBOX
"就會產生複選核取表單，複選核取表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為複選核取表單。
| 原始碼 |
<FORM>
喜好：
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- VALUE="內容"，是設定此一欄位的內容、值或是意義。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- CHECKED，是設定此一欄位為預設選取值。
4. 密碼表單：利用TYPE="
PASSWORD "就會產生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在於密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。
| 原始碼 |
<FORM>
請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
- SIZE="數值"，是設定此一欄位顯現的寬度。
- VALUE="預設內容"，是設定此一欄位的預設內容。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
- MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
5. 送出按鈕：通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE="
SUBMIT "及TYPE=" RESET "來產生，相當的簡單易用。
| 原始碼 |
<FORM>
<INPUT TYPE="SUBMIT" VALUE="送出資料">
<INPUT TYPE="RESET" VALUE="重新填寫">
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上「送出查詢」、「重設」等字樣。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
6. 按鈕元件：表單中或是JAVA
SCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE=" BUTTON "來產生一個按鈕，相當簡單。
| 原始碼 |
<FORM>
請按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- NAME="名稱"，是設定此一按鈕的名稱。
- VALUE="文字"，是設定此一按鈕上要呈現的文字。
- ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
7. 大量文字輸入元件： 有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用<TEXTAREA></TEXTAREA>
來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可作為預設文字。
| 原始碼 |
<FORM>
請輸入您的意見：<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- NAME="名稱"，是設定此一欄位的名稱。
- WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視為換行效果送出）。
- COLS="數值"，是設定此一欄位的行數（橫向字數）。
- ROWS="數值"，是設定此一欄位的列數（垂直字數）。
8. 下拉式選單： 令整個網頁看起來有很專業的感覺，我們只要利用<SELECT
NAME="名稱">便可以產生一個下拉式選單，另外，還需要配合<OPTION>標籤來產生選項，這樣才算完整喔！
| 原始碼 |
<FORM>
您喜歡看書嗎？：
<SELECT NAME="LIKE">
<OPTION VALUE="非常喜歡">非常喜歡
<OPTION VALUE="還算喜歡">還算喜歡
<OPTION VALUE="不太喜歡">不太喜歡
<OPTION VALUE="非常討厭">非常討厭
</SELECT>
</FORM> |
| 呈現結果
|
|
其有下列可設定之屬性：
- SIZE="數值"，是設定此一欄位的大小，預設值為1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。
- MULTIPLE，是設定此一欄位為複選，可以一次選好幾個選項。
|
【 各種輸入類型 】