html之表單

表單可以用來在網頁中傳送資料，特別是經常被用在聯絡表單——使用者輸入資訊然後傳送到Email中，就像HTMLDog的這個連線頁面。

表單本身是沒有什麼用的。這需要編一個程式來處理輸入表單中的資料。這也超出了本站指南的範圍。如果使用網路伺服器來放置HTML，你能夠自助地找到一些簡單的教程，開發一個伺服器端的程式使一個傳送到Email的表單工作。

實際用在HTML中的標籤有form、 input、 textarea、 select和option。

表單標籤form定義的表單裡頭，必須有行為屬性action，它告訴表單當提交的時候將內容發往何處。

可選的方法屬性method告訴表單資料將怎樣傳送，有get（預設的）和post兩個值。常用到的是設定post值，它可以隱藏資訊（get的資訊會暴露在URL中）。

所以一個表單元素看起來是這樣子的：

<form action="processingscript.php" method="post"> </form> 

input標籤是表單世界中的“老大”。有10種形式，概括如下：

• <input type="text" />是標準的文字框。它可以有一個值屬性value，用來設定文字框裡的預設文字。
• <input type="password" /> 像文字框一樣，但是會以星號代替使用者所輸入的實際字元。
• <input type="checkbox" />是核取方塊，使用者可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked，像這樣的格式<input type="checkbox" checked="checked" />.
• <input type="radio" /> 與核取方塊相似，但是使用者只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked，使用方法跟核取方塊一樣。
• <input type="file" /> 是展示你電腦上的檔案的一個區域，就像你在一個軟體中開啟或者儲存一個文件一樣。
• <input type="submit" /> 是一個被點選後提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文字（下面的button和reset型別也可以這樣，稍後介紹），如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
• <input type="image" />以影象代替按鈕文字，src屬性是必須的，像img標籤一樣。
• <input type="button" />是一個如果沒有其他程式碼的話什麼都不做的按鈕。
• <input type="reset" /> 是一個點選後會重置表單內容的按鈕。
• <input type="hidden" /> 不會顯示任何東西，它用來傳輸諸如使用者正在用的頁面的名字或者Email地址等表單必須傳輸的東西。

注意輸入標籤input也是用“/>”自關閉的。

多行文字輸入框標籤textarea基本上就是一個比較大的文字框。它必須有行屬性rows和列屬性cols，用法像這樣：

<textarea rows="5" cols="20">A big load of text here</textarea>

選定標籤select與選項標籤option一起可以製作一個下拉選框。是這樣工作的：

<select> <option value="first option">Option 1</option> <option value="second option">Option 2</option> <option value="third option">Option 3</option> </select> 

當表單被提交時，被選中選項的值將被髮送。

與核取方塊和單選按鈕的預選屬性checked一樣，選項標籤option也有一個預選屬性selected，它可以用在這樣的格式中：<option value="mouse" selected="selected">Rodent</option>。

上述的標籤中在網頁中看起來都不錯，但是，如果你有一個程式來處理這個表單，這些標籤都不起作用。這是因為，表單欄位需要名稱。所以所有的欄位中都需要增加名稱屬性name，比如 <input type="text" name="talkingsponge" />。

一個表單看起來應該像下面這樣（注意：這個表單不會工作，除非有一個用來提交資料的“contactus.php”的檔案，它位於表單標籤form的行為屬性action中。）

<form action="contactus.php" method="post"> <p>Name:</p> <p><input type="text" name="name" value="Your name" /></p> <p>Comments: </p> <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p> <p>Are you:</p> <p><input type="radio" name="areyou" value="male" /> Male</p> <p><input type="radio" name="areyou" value="female" /> Female</p> <p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p> <p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p> <p><input type="submit" /></p> <p><input type="reset" /></p> </form>