單標(biāo)簽

網(wǎng)頁（程序）如果要和用戶產(chǎn)生互動(dòng)，則必須借助一定的中介，這個(gè)中介一般是：文本輸入框、按鈕、多選框、單選框。而表單則是這些中介和放置這些中介的空間（<form action=”” methon=””></form>）。

在網(wǎng)頁中，這些文本輸入框、按鈕等等必須放置在由<form></form>這個(gè)標(biāo)簽所定義的空間中，否則沒有實(shí)際意義。所以，由<form></form>標(biāo)簽所定義的空間就是表單存在的空間。

【各種輸入類型】

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

呈現(xiàn)結(jié)果

姓名：

原始碼

<form action=http://www.baidu.com/nameproject.aspmethon=”post”>

姓名：<input type="text" name="name" size="20">

</form>

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

• name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
• size="數(shù)值"，是設(shè)定此一欄位顯現(xiàn)的寬度。
• 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è)定輸入的最大長度。

1. 單選框：利用type="radio"就會(huì)產(chǎn)生單選核取表單，單選核取表單通常是好幾個(gè)選項(xiàng)一起擺出來供使用者點(diǎn)選，一次只能從中選一個(gè)，故為單選核取表單。

呈現(xiàn)結(jié)果

性別：男 女

原始碼

<form>

性別：

男 <input type="radio" name="sex" value="boy">

女 <input type="radio" name="sex" value="girl">

</form>

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

• name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
• value="內(nèi)容"，是設(shè)定此一欄位的內(nèi)容、值或是意義。
• align="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：top（向上對齊）、middle（向中對齊）、bottom（向下對齊）、right（向右對齊）、left（向左對齊）、texttop（向文字頂部對齊）、baseline（向文字底部對齊）、absmiddle（絕對置中）、absbottom（絕對置下）等。
• checked，是設(shè)定此一欄位為預(yù)設(shè)選取值。

1. 復(fù)選框：利用type=" checkbox "就會(huì)產(chǎn)生復(fù)選核取表單，復(fù)選核取表單通常是好幾個(gè)選項(xiàng)一起擺出來供使用者點(diǎn)選，一次可以同時(shí)選好幾個(gè)，故為復(fù)選核取表單。

呈現(xiàn)結(jié)果

喜好： 電影 看書

原始碼

<form>

喜好：

<input type="checkbox" name="sex" value="movie">電影

<input type="checkbox" name="sex" value="book">看書

</form>

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

• name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
• value="內(nèi)容"，是設(shè)定此一欄位的內(nèi)容、值或是意義。
• align="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：top（向上對齊）、middle（向中對齊）、bottom（向下對齊）、right（向右對齊）、left（向左對齊）、texttop（向文字頂部對齊）、baseline（向文字底部對齊）、absmiddle（絕對置中）、absbottom（絕對置下）等。
• checked，是設(shè)定此一欄位為預(yù)設(shè)選取值。

1. 密碼表單：利用type=" password "就會(huì)產(chǎn)生一個(gè)密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在于密碼表單在輸入時(shí)全部會(huì)以星號(hào)來取代輸入的文字，以防他人偷窺。

呈現(xiàn)結(jié)果

請輸入密碼：

原始碼

<form>

請輸入密碼：<input type="password" name="input">

</form>

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

• name="名稱"，是設(shè)定此一欄位的名稱，程式中常會(huì)用到。
• size="數(shù)值"，是設(shè)定此一欄位顯現(xiàn)的寬度。
• value="預(yù)設(shè)內(nèi)容"，是設(shè)定此一欄位的預(yù)設(shè)內(nèi)容，不過呈現(xiàn)出來仍是星號(hào)。
• align="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：top（向上對齊）、middle（向中對齊）、bottom（向下對齊）、right（向右對齊）、left（向左對齊）、texttop（向文字頂部對齊）、baseline（向文字底部對齊）、absmiddle（絕對置中）、absbottom（絕對置下）等。
• maxlength="數(shù)值"，是設(shè)定此一欄位可設(shè)定輸入的最大長度。

1. 送出按鈕：通常我們表單填完之后，都會(huì)有一個(gè)送出按鈕以及清除重寫的按鈕，分別是利用type=" submit "及type=" reset "來產(chǎn)生，相當(dāng)?shù)暮唵我子谩?/li>

呈現(xiàn)結(jié)果

原始碼

<form>

<input type="submit" value="送出資料">

<input type="reset" value="重新填寫">

</form>

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

• name="名稱"，是設(shè)定此一按鈕的名稱。
• value="文字"，是設(shè)定此一按鈕上要呈現(xiàn)的文字，若是沒有設(shè)定，瀏覽器也會(huì)自動(dòng)替您加上“送出查詢”、“重設(shè)”等字樣。
• align="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：top（向上對齊）、middle（向中對齊）、bottom（向下對齊）、right（向右對齊）、left（向左對齊）、texttop（向文字頂部對齊）、baseline（向文字底部對齊）、absmiddle（絕對置中）、absbottom（絕對置下）等。

1. 按鈕元件：表單中或是java script常會(huì)用到按鈕來作一些效果，因此，我們可以利用type=" button "來產(chǎn)生一個(gè)按鈕，相當(dāng)簡單。

呈現(xiàn)結(jié)果

請按下按鈕：

原始碼

<form>

請按下按鈕：<input type="button" name="ok" value="我同意">

</form>

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

• name="名稱"，是設(shè)定此一按鈕的名稱。
• value="文字"，是設(shè)定此一按鈕上要呈現(xiàn)的文字。
• align="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：top（向上對齊）、middle（向中對齊）、bottom（向下對齊）、right（向右對齊）、left（向左對齊）、texttop（向文字頂部對齊）、baseline（向文字底部對齊）、absmiddle（絕對置中）、absbottom（絕對置下）等。

1. 隱藏欄位：表單中有時(shí)有些東西因?yàn)槟承┮蛩?，不想讓使用者看到，但因程式需要卻又不得不存在，此時(shí)，我們就可以利用type=" hidden "來產(chǎn)生一個(gè)隱藏的欄位。

呈現(xiàn)結(jié)果

隱藏欄位：

原始碼

<form>

隱藏欄位：<input type="hidden" name="nosee" value="看不到">

</form>

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

• name="名稱"，是設(shè)定此一欄位的名稱。
• value="文字"，是設(shè)定此一欄位的值、文字或意義。

【大量文字輸入元件】

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

呈現(xiàn)結(jié)果

請輸入您的意見：

原始碼

<form>

請輸入您的意見：<br>

<textarea name="talk" cols="20" rows="3"></textarea>

</form>

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

• name="名稱"，是設(shè)定此一欄位的名稱。
• wrap="設(shè)定值"，是設(shè)定此一欄位的換行模式。設(shè)定值有三種：off（輸入文字不會(huì)自動(dòng)換行）、virtual（輸入文字在螢?zāi)簧蠒?huì)自動(dòng)換行，不過若是使用者沒有自行按下enter換行，送出資料時(shí)，也視為沒有換行）、physical（輸入文字會(huì)自動(dòng)換行，送出資料時(shí)，會(huì)將螢?zāi)簧系淖詣?dòng)換行，視為換行效果送出）。
• cols="數(shù)值"，是設(shè)定此一欄位的行數(shù)（橫向字?jǐn)?shù)）。
• rows="數(shù)值"，是設(shè)定此一欄位的列數(shù)（垂直字?jǐn)?shù)）。

【下拉式選單】

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

呈現(xiàn)結(jié)果

您喜歡看書嗎？：

非常喜歡

還算喜歡

不太喜歡

非常討厭

原始碼

<form>

您喜歡看書嗎？：

<select name="like">

<option value="非常喜歡">非常喜歡

<option value="還算喜歡">還算喜歡

<option value="不太喜歡">不太喜歡

<option value="非常討厭">非常討厭

</select>

</form>

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

1. size="數(shù)值"，是設(shè)定此一欄位的大小，預(yù)設(shè)值為1，若是您的選項(xiàng)有四個(gè)，然后您將size設(shè)成4，那么，下拉式選單便會(huì)變成選項(xiàng)方塊，將四個(gè)選項(xiàng)一起呈現(xiàn)在方塊中。

multiple，是設(shè)定此一欄位為復(fù)選，可以一次選好幾個(gè)選項(xiàng)。

....................................................................

我的微信公眾號(hào)：UI嚴(yán)選 —越努力，越幸運(yùn)