表單二

§ type="password"

和上面的 type="text" 一樣，屬性用法也雷同，也可以產生一個單行的文字輸入欄位。
這種欄位通常用在「密碼」輸入時，使用者所輸入的資料在畫面是以 "*" (星號)來顯示的。
設定「密碼」欄位的目的，就是防止別人從瀏覽器的畫面上偷看到密碼。
不過，我們還是可以從欄位變數中取得這個輸入的值。
語法：

輸入密碼：<input name="pwd" type="password" size="8">

＊範例

§ type="radio"

可以產生供使用者點選的圓形選項鈕(單選鈕)。
同組的radio中只能有一個被選取。
除了在<input>前加上整組選項的說明外，還要在各圓形鈕後加入個別的選項說明。(要不然只有圓鈕，使用者怎麼知道這圓圓的是啥東西？)
需視情況加入多個radio選項。
利用 name 屬性為選項命名。
利用 value 屬性為選項設定變數值。

1.這裏的 value 值是給程式判別時使用的。
2.如果 name 是取同樣的名稱，只要判斷這裏的 value 值是多少，便能知道使用者到底選了哪一個選項。
3.和 type="text" 的 value 值是預設出現文字說明不同。

假如在該選項後加入 checked 屬性，該選項為整組選項鈕的預設選項。
預設選項前的圓形鈕會出現點，表示選取。

＊範例

§ type="checkbox"

可以產生供使用者點選的方形核選鈕(複選鈕)。
一樣可以用 name 指定其名稱。
同組的 checkbox 中可以有多個被選取。(高興的話，就把它全部選起來也可以！)
在核選鈕內按一下是選取，再按一下是取消選取。
可以加上 checked 屬性，表示該選項為預選選項。
預設選項，網頁顯示時，會在核選框中打鉤，可同時設定多個 checked。)
其他的屬性用法均和上面的 radio 相仿。

＊範例

＊ Tips：

radio、checkbox的name可以相同名稱，也可以不同名稱。(視程式需要)
相同名稱	<form name="thisform"> 您喜歡的娛樂是：<br> <input type="checkbox" name="Amuse" value="1">下棋<br> <input type="checkbox" name="Amuse" value="2">電影<br> <input type="checkbox" name="Amuse" value="3">聊天 </form>	1.程式判別value的值可以得知使用者的選項。 2.接收的變數值是同一個(Amuse) 3.如果全選，所接收的值是 Amuse="下棋,電影,聊天"
不同名稱	<form name="thisform"> 您喜歡的娛樂是：<br> <input type="checkbox" name="Amuse1" value="下棋">下棋<br> <input type="checkbox" name="Amuse2" value="電影">電影<br> <input type="checkbox" name="Amuse3" value="聊天">聊天 </form>	1.程式判別name是否存在，可以得知所選的值。 2.接收的是各別變數的值(Amuse1、Amuse2、Amuse3) 3.如全選，所接收的值是 Amuse1="下棋" Amuse2="電影" Amuse3="聊天" 4.如沒選，該項的值是""(空白)

§ type="button"

可以產生一個一般的按鈕。
利用 value 屬性設定按鈕上的文字。
利用 name 屬性指定按鈕名稱。
語法：

<input type="button" name="button" value="確定">

＊範例

§ type="submit"

可以產生一個傳送鈕。
使用者輸入好資料後，按一下這個鈕，資料便隨之送交程式處理(或寄至電子郵件信箱)。
和上者一樣，可用 value 屬性更改按鈕上的文字。
語法：

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

＊範例

§ type="reset"

可以產生一個重設鈕。
使用者發現資料輸入錯誤時，可以按一下這個鈕清除表單內所填寫的資料，重新填寫。
尤其是在密碼欄位時，不小心打錯，因全是"星號"，只有清除再寫過。
和上者一樣，可用 value 屬性更改按鈕上的文字。
如果欄位有預設值，清除後，會回復原來的預設值。
語法：

<input type="reset" value="清除">

＊範例

§ type="hidden"

一個隱藏的欄位，既然是隱藏，當然是在瀏覽器上看不到的。
作用是在送出表單時，把某些變數的值送給程式讀取。
例如：

<input type="hidden" name="myname" value="Lee">

當表單送出時，程式也會同時讀到myname的值是Lee

§ textarea 標籤

表單元件大都是藉由<input type="....">所帶領定義出來的，可是 textarea 及 select 卻是自立門戶，各自獨立用自己的標籤。這是站長覺得很納悶的地方！
也是一個文字輸入欄位。它可以產生一個文字輸入的「區塊」(多列多行的文字輸入欄位)。
用 name 屬性設定文字區塊的名稱。
用 rows 屬性設定文字區塊的列數。
用 cols 屬性設定文字區塊的行數。
語法：

<form name="thisform" action="goto.asp">
留言板：<br>
<textarea name="TalkTo" rows="10" cols="40">
預設出現文字
</textarea>
</form>

＊範例

當輸入的文字太長超出文字區塊時，會出現水平捲軸，閱讀時不是很方便。此時，如果文字能自動折行，就方便多了。
用 wrap 屬性，可以設定是否要自動換行。
設定有三種：virtual、off、physical。
語法：

<textarea wrap="virtual">
表示超過文字區時，自動換行。可是，資料傳送時，只有在按 enter 鍵的地方，才會真正的換行。

<textarea wrap="off">
表示超過文字區時，不會換行。文字區塊會多出水平捲軸。

<textarea wrap="physical">
表示超過文字區時，自動換行。傳送的結果和螢幕中所看到的一樣。

§ select 標籤

這個標籤可以定義出一個下拉式選單。
下拉式選單可以把所有的選項，均放在裏面，可以大大地節省網頁空間。
底下用 option 定義出各選項。
可以利用 selected 設定這個選項的預設值。
value 設定的值是給程式接收的值。
<select....> 之前出現的是整個選項的說明提示文字。
<option.....> 後面出現的文字就是使用者可以在選單內看到的選項文字。
語法：

<form name="thisform">
連結到：<select name="choice">
<option value="第一頁" selected>第一頁
<option value="第二頁">第二頁
<option value="第三頁">第三頁
</select>
</form>

＊範例

size 屬性可以設定下拉式選單所顯示的列數。
如果所設定的 size 值大於選項的數目，就便變成我們所謂的「清單」。
語法：

<form name="thisform" size="3">
連結到：<select name="choice">
<option value="第一頁" selected>第一頁
<option value="第二頁">第二頁
<option value="第三頁">第三頁
<option value="第四頁">第四頁
<option value="第五頁">第五頁
</select>
</form>

＊範例

可以加入 multiple 屬性，讓使用者可以在「清單」內，利用 Ctrl 或 Shift 鍵作複選的動作。