學(xué)習(xí)網(wǎng)頁制作基礎(chǔ)入門教程(10)表單標(biāo)簽

05fxs獵人 2011-05-08

展開全文

　　1. 文字輸入列：每個表單之所以會有不同的類型，原因就在于TYPE="表單類型"設(shè)定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的類型就是TYPE="TEXT"，其使用方法如下：

原始代碼	<FORM> 姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"> </FORM>
顯示結(jié)果	姓名：

　　其有下列可設(shè)定之屬性：

NAME="名稱"，是設(shè)定此文字輸入列的名稱，程序中常會用到。
SIZE="數(shù)值"，是設(shè)定此文字輸入列顯示的寬度。
VALUE="預(yù)設(shè)內(nèi)容"，是設(shè)定此文字輸入列的預(yù)設(shè)內(nèi)容。
ALIGN="對齊方式"，是設(shè)定此文字輸入列的對齊方式，其值有：TOP（向上對齊）、MIDDLE（中間對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數(shù)值"，是設(shè)定此文字輸入列可設(shè)定輸入的最大長度。

　　2. 單選表單：利用TYPE="RADIO" 就會產(chǎn)生單選表單，單選表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選表單。

原始代碼	<FORM> 姓名：男<INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"> 女<INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL"> </FORM>
顯示結(jié)果	性別：男女

　　其有下列可設(shè)定之屬性：

NAME="名稱"，是設(shè)定此一欄的名稱，程序中常會用到。
VALUE="內(nèi)容"，是設(shè)定此一欄的內(nèi)容、值或是意義。
ALIGN="對齊方式"，是設(shè)定此一欄的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設(shè)定此一欄為預(yù)設(shè)選取值。

　　3. 復(fù)選表單：利用TYPE=" CHECKBOX "就會產(chǎn)生復(fù)選表單，復(fù)選表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為復(fù)選表單。

原始代碼	<FORM> 喜好： <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影 <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書 </FORM>
顯示結(jié)果	喜好：電影看書

　　其有下列可設(shè)定之屬性：

NAME="名稱"，是設(shè)定此一欄的名稱，程序中常會用到。
VALUE="內(nèi)容"，是設(shè)定此一欄的內(nèi)容、值或是意義。
ALIGN="對齊方式"，是設(shè)定此一欄的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設(shè)定此一欄為預(yù)設(shè)選取值。

　　4. 密碼表單：利用TYPE=" PASSWORD "就會產(chǎn)生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在于密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。

原始代碼	<FORM> 請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT"> </FORM>
顯示結(jié)果	請輸入入密碼：

　　其有下列可設(shè)定之屬性：

NAME="名稱"，是設(shè)定此一欄的名稱，程序中常會用到。
SIZE="數(shù)值"，是設(shè)定此一欄顯示的寬度。
VALUE="預(yù)設(shè)內(nèi)容"，是設(shè)定此一欄的預(yù)設(shè)內(nèi)容。
ALIGN="對齊方式"，是設(shè)定此一欄的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數(shù)值"，是設(shè)定此一欄可設(shè)定輸入的最大長度。

　　5. 送出按鈕：通常我們表單填完之后，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產(chǎn)生，相當(dāng)?shù)暮唵我子谩?

原始代碼	<FORM> <INPUT TYPE="SUBMIT" VALUE="送出資料"> <INPUT TYPE="RESET" VALUE="重新填寫"> </FORM>
顯示結(jié)果

　　其有下列可設(shè)定之屬性：

NAME="名稱"，是設(shè)定此一按鈕的名稱。
VALUE="文字"，是設(shè)定此一按鈕上要顯示的文字，若是沒有設(shè)定，瀏覽器也會自動替您加上“提交”、“重置”等字樣。
ALIGN="對齊方式"，是設(shè)定此一欄的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。

　　6. 按鈕元件：表單中或是JAVA SCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE=" BUTTON "來產(chǎn)生一個按鈕，相當(dāng)簡單。

原始代碼	<FORM> 請按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意"> </FORM>
顯示結(jié)果	請按下按鈕：

　　其有下列可設(shè)定之屬性：

NAME="名稱"，是設(shè)定此一按鈕的名稱。
VALUE="文字"，是設(shè)定此一按鈕上要顯示的文字。
ALIGN="對齊方式"，是設(shè)定此一欄的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對居中）、ABSBOTTOM（絕對置下）等。

　　7. 大量文字輸入元件：有時候我們會希望讓使用者輸入比較多的文字，此時，文字輸入列就顯得不能使用，因此我們就可以利用<TEXTAREA></TEXTAREA> 來產(chǎn)生一個可以輸入大量文字的元件，在兩個標(biāo)簽中的文字會出現(xiàn)在框框中，可作為預(yù)設(shè)文字。

原始代碼	<FORM> 請輸入你的意見：<BR> <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA> </FORM>
顯示結(jié)果	請輸入你的意見：

　　其有下列可設(shè)定之屬性：

NAME="名稱"，是設(shè)定此一欄的名稱。
WRAP="設(shè)定值"，是設(shè)定此一欄的換行模式。設(shè)定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在屏幕上自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將屏幕上的內(nèi)容自動換行，視為換行效果送出）。
COLS="數(shù)值"，是設(shè)定此一欄的行數(shù)（橫向字?jǐn)?shù)）。
ROWS="數(shù)值"，是設(shè)定此一欄的列數(shù)（垂直字?jǐn)?shù)）。

　　8. 下拉式選單：令整個網(wǎng)頁看起來有很專業(yè)的感覺，我們只要利用<SELECT NAME="名稱">便可以產(chǎn)生一個下拉式選單，另外，還需要配合<OPTION>標(biāo)簽來產(chǎn)生選項，這樣才算完整！

原始代碼	<FORM> 你喜歡看書嗎？： <SELECT NAME="LIKE"> <OPTION VALUE="非常喜歡">非常喜歡 <OPTION VALUE="還算喜歡">還算喜歡 <OPTION VALUE="不太喜歡">不太喜歡 <OPTION VALUE="非常討厭">非常討厭 </SELECT> </FORM>
顯示結(jié)果	你喜歡看書嗎？：