HTML 表單 (form)

HTML 表單 (form) 是用來讓使用者輸入資料，這些資料可以用來和使用者互動，例如表單內容填完後可以傳回遠端伺服器 (web server)，像常見的連絡表單。

<form> 標籤 (tag)

<form> 標籤是用來建立一個 HTML 表單，<form> 做為表單的容器，裡面還會有不同用途的其他標籤來建構出完整的表單內容。

再來介紹 <form> 標籤上面重要的屬性 (attribute)：

action: 用來指定一個位址 (URL)，這個位址是告訴瀏覽器 (browser) 當 user 按送出表單後，要將表格的內容送去哪邊。
method: 用來指定資料傳輸時用的 HTTP 協議，最常用的是 get 或 post：
- get: 會將表單資料放在 form action 請求的位址 URL 網址參數列 (URL GET parameters) 上面送出。get 通常用在資料量較小或非敏感的資料，因為資料會被放在網址中直接傳出，容易被直接看到資料。
- post: 會將表單資料放在 HTTP 傳輸封包 body 中送出。post 通常用在表單資料量比較大、有夾帶檔案上傳 (file upload) 或隱私性考量的資料。
target: 用來指定瀏覽器要在何處顯示表單送出後伺服器回應的結果。值有這些選項：
- _self: 顯示在表單所在的當前視窗
- _blank: 顯示在新頁籤/視窗
- _parent: 顯示在上一層的視窗 (用在例如如果表單是放在 <iframe> 中)
- _top: 顯示在最頂層的視窗
autocomplete: 指示這個表單中的欄位是否啟用瀏覽器自動完成機制。值有這些選項：
- off: 否
- on: 是，預設值

HTML <form> 表單使用範例：

<form action="/formprocess.php" method="post">
  
  <!-- ....表單 HTMLs .... -->
  
</form>

上面例子中，我們建立了一個表單，且宣告這個表單的資料會被用 http post 的方法送到 "/formprocess.php" 這隻遠端程式。

常見的 HTML 表單元素

常見的表單元素有像是 <input>, <textarea>, <select> 等。

<input> 輸入欄位

<input> 可以說是表單裡面最重要的標籤了，<input> 有非常多不同的用途，主要是用 <input> 上的 type 屬性來指明不同的用法功能。

例如：

<input type="text"> 建立一個文字輸入欄位
<input type="password"> 建立一個密碼文字輸入欄位，和 text 的差別是，使用者輸入的內容不會被明碼顯示在螢幕畫面中
<input type="checkbox"> 建立一個核取方塊
<input type="radio"> 建立一個選項按鈕
<input type="submit"> 建立一個送出表單的按鈕

<input> 的大部分 type 都可以再搭配上 value 屬性，指定一個預設值。像是 type="text" 搭配 value= 指定輸入框中的預填文字；type="submit" 搭配 value= 指定按鈕文字。

<input> 是個空元素不需要 closing tag。

更詳細的 <input> 介紹可以看這邊。

<textarea> 多行段落文字輸入欄位

<textarea> 是用來宣告一個可以輸入多行文字的輸入框 (multi-line textbox)。

語法：

<textarea rows="指定輸入框的高度/列數，一個整數"
          cols="指定輸入框的寬度/行數，一個整數">
  
  輸入欄位中的預設文字內容
  
</textarea>

更詳細的 <textarea> 介紹可以看這邊。

<select>, <option> 下拉式選單

<select> 是用來宣告一個下拉式選單 (drop-down select boxes)，而 <select> 標籤裡面還會有 <option> 標籤用來宣告有哪些選項。

語法：

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

<option> 裡面的文字就是使用者會看到的選項內容，而 <option> 上的 value 屬性是用來指定表單送出去時遠端伺服器會收到的值，沒有設定 value 的話，預設值會是 <option> 裡面的內容。

更詳細的 <select> 介紹可以看這邊。

常見的 HTML 表單元素屬性 (attributes)

所有的 HTML 表單元素都有下面這些常見的共通屬性。

聲明欄位名稱 - `name` 屬性

表單元素都有一個 name 屬性，用來指定送出去的該筆資料要用什麼名稱，目的是讓遠端伺服器才能透過明確定義好的名稱去取出對應的欄位值。

用法：

<input type="text" name="foo">

可以想像當表單送出時，這個欄位會以類似 "foo=輸入內容" 的形式傳給遠端伺服器。

設定當頁面載入後，將游標直接聚焦在該元素 - `autofocus` 屬性

autofocus 是一個布林 (boolean) 屬性，用來設定當頁面載入後，將游標直接聚焦 (focus) 在該表單元素處。

用法：

<input type="text" autofocus>

禁用該元素 - `disabled` 屬性

disabled 是一個布林 (boolean) 屬性，用來禁用該表單元素。

用法：

<input type="button" value="按鈕" disabled>

效果如下：

設定表單元素的初始值 - `value` 屬性

value 用來指定表單元素的初始值 (default value)。

用法：

<input type="text" value="我的預設值">

效果如下：

一個完整的 HTML 表單範例

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

    <p>Name:</p>
    <p><input type="text" name="name" value="你的名字"></p>

    <p>Email:</p>
    <p><input name="species" type="text"></p>

    <p>Comments: </p>
    <p><textarea name="comments" rows="5" cols="20">你的留言</textarea></p>

    <p>請問你最有興趣學習的技術:</p>
    <p><input type="radio" name="interest" value="html"> HTML</p>
    <p><input type="radio" name="interest" value="css"> CSS</p>
    <p><input type="radio" name="interest" value="js"> JavaScript</p>

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

</form>

顯示結果：