HTML 表單 (form) 是用來讓使用者輸入資料，這些資料可以用來和使用者互動，例如表單內容填完後可以傳回遠端伺服器 (web server)，像常見的連絡表單。
<form> 標籤是用來建立一個 HTML 表單，<form> 做為表單的容器，裡面還會有不同用途的其他標籤來建構出完整的表單內容。
再來介紹 <form> 標籤上面重要的屬性 (attribute)：
- : 用來指定一個位址 (URL)，這個位址是告訴瀏覽器 (browser) 當 user 按送出表單後，要將表格的內容送去哪邊。
- : 用來指定資料傳輸時用的 HTTP 協議，最常用的是 或 ：
- : 會將表單資料放在 form action 請求的位址 URL 網址參數列 (URL GET parameters) 上面送出。get 通常用在資料量較小或非敏感的資料，因為資料會被放在網址中直接傳出，容易被直接看到資料。
- : 會將表單資料放在 HTTP 傳輸封包 body 中送出。post 通常用在表單資料量比較大、有夾帶檔案上傳 (file upload) 或隱私性考量的資料。
- : 用來指定瀏覽器要在何處顯示表單送出後伺服器回應的結果。值有這些選項：
- : 顯示在表單所在的當前視窗
- : 顯示在新頁籤/視窗
- : 顯示在上一層的視窗 (用在例如如果表單是放在 <iframe> 中)
- : 顯示在最頂層的視窗
- : 指示這個表單中的欄位是否啟用瀏覽器自動完成機制。值有這些選項：
- : 否
- : 是，預設值
HTML <form> 表單使用範例：
上面例子中，我們建立了一個表單，且宣告這個表單的資料會被用 http post 的方法送到 "/formprocess.php" 這隻遠端程式。
常見的表單元素有像是 <input>, <textarea>, <select> 等。
<input> 可以說是表單裡面最重要的標籤了，<input> 有非常多不同的用途，主要是用 <input> 上的 屬性來指明不同的用法功能。
例如：
- 建立一個文字輸入欄位
- 建立一個密碼文字輸入欄位，和 text 的差別是，使用者輸入的內容不會被明碼顯示在螢幕畫面中
- 建立一個核取方塊
- 建立一個選項按鈕
- 建立一個送出表單的按鈕
<input> 的大部分 type 都可以再搭配上 屬性，指定一個預設值。像是 type="text" 搭配 value= 指定輸入框中的預填文字；type="submit" 搭配 value= 指定按鈕文字。
更詳細的 <input> 介紹可以看這邊。
<textarea> 是用來宣告一個可以輸入多行文字的輸入框 (multi-line textbox)。
語法：
更詳細的 <textarea> 介紹可以看這邊。
<select> 是用來宣告一個下拉式選單 (drop-down select boxes)，而 <select> 標籤裡面還會有 <option> 標籤用來宣告有哪些選項。
語法：
<option> 裡面的文字就是使用者會看到的選項內容，而 <option> 上的 屬性是用來指定表單送出去時遠端伺服器會收到的值，沒有設定 value 的話，預設值會是 <option> 裡面的內容。
更詳細的 <select> 介紹可以看這邊。
所有的 HTML 表單元素都有下面這些常見的共通屬性。
表單元素都有一個 屬性，用來指定送出去的該筆資料要用什麼名稱，目的是讓遠端伺服器才能透過明確定義好的名稱去取出對應的欄位值。
用法：
可以想像當表單送出時，這個欄位會以類似 "foo=輸入內容" 的形式傳給遠端伺服器。
autofocus 是一個布林 (boolean) 屬性，用來設定當頁面載入後，將游標直接聚焦 (focus) 在該表單元素處。
用法：
disabled 是一個布林 (boolean) 屬性，用來禁用該表單元素。
用法：
效果如下：
value 用來指定表單元素的初始值 (default value)。
用法：
效果如下：
顯示結果：
- <input>
- <textarea>
- <button>
- <select>
- <option>
- <optgroup>
- <fieldset>
- <label>
- <output>
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/8426.html