網頁的互動式表單

Written by Wanding on 19 August 2020

網頁中常會出現可以讓使用者留言或填選資料的設計，藉此提供雙向互動的機會，這些可以輸入資料的欄位，稱為表單(FORM)。要設計表單其實很簡單，但是光只有html的表單是無法做後續資料的處理，所以無法達成互動的效果。目前而言，大多數表單都會透過 PHP和JavaScript程式來處理。

建立表單<form>

所有的表單內容都會用<form>和</form>這對標籤包圍起來，包括說明文字、輸入欄位。可以設定多個表單，但是不能做巢狀表單。也就是<form>和</form>裡面不能再有一層<form>和</form>。

1. 輸入欄位<input>

一般表單中的輸入欄位幾乎都是用<input>標籤來設定，其用法如下

<input type=輸入欄位的種類 name="欄位名稱" value="初始值">

type的種類：

text：文字
radio：單選鈕
checkbox：多選鈕
button：按鈕
color：顏色
date：日期
datetime：日期時間
number：數字
password：密碼

2. 建立可以輸入文字的欄位

請輸入帳戶名稱：<input type="text" name="usernmae">

請輸入帳戶名稱：

另外可以加上size屬性，或maxlength來限制輸入的資料長度

請輸入帳戶名稱：<input type="text" name="usernmae" size="15" maxlength="10">

請輸入帳戶名稱：無論英文或中文，欄位最多只能輸入10個字母

3. 建立可以輸入密碼的欄位

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

請輸入密碼：

4. 建立傳送資料的按鈕

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

5. 建立清除重填的按鈕

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

表單的各種輸入欄位

6. 單選鈕 <input type="radio">

只能選擇單一選項，會出現一個圓圈，只要滑鼠在這個圓圈上按一下，就會出現一個黑點，表示已選擇此項目。如果要讓多個選單鈕成為同一組的選項，只要將這幾個選單鈕的name屬性設定為相同的名稱即可。

性別
<input name="sex" type="radio" vale="male">男
<input name="sex" type="radio" vale="male">女

性別
男女

7. 多選鈕 <input type="checkbox">

若要提供使用者有複選的功能，可以這個多選鈕。

 為何喜歡騎機車？
<input name="motorbike" type="checkbox" value="cheap">成本經濟
<input name="motorbike" type="checkbox" value="convenient">非常方便
<input name="motorbike" type="checkbox" value="rule">法律規定
<input name="motorbike" type="checkbox" value="treason">突顯叛逆
<input name="motorbike" type="checkbox" value="tool">好用的交通工具

為何喜歡騎機車？
成本經濟非常方便法律規定突顯叛逆好用的交通工具

8. 下拉示的列表欄 <select>和<option>

如果有很多不同的選項，若一次全部顯示出來，會很佔版面。這時候，下拉式的表欄就派上用場。

為何喜歡騎機車？
<select name="motorbike">
<option value="1">成本經濟</option>
<option value="2">非常方便</option>
<option value="3">法律規定</option>
<option value="4">突顯叛逆</option>
<option value="5">好用的交通工具</option>
</select>

為何喜歡騎機車？

9. 區塊式文字輸入欄位 <textarea>

使用<input type="text">時，如果輸入的文字超過欄位大小，則文字會往左推，前面的文字就看不到了。如果要建立像留言板或討論區那樣的文字輸入欄位，就要使用<textarea>標籤。欄位的高度和寬度則分別用rows及cols屬性來設定。

<form>
<textarea name="comments" cols="30" row="10">
</form>

10. 日期選擇下拉式選單

<input type="date" name="setdate">

11. 日期與時間的下拉式選單

<input type="datetime-local" name="setdatetime">

12. 色彩選擇交談窗

<input type="color" name="mycolor" value="#RRGGBB">

13. 其他文字輸入欄

透過input的type屬性，將欄位設定為只接收指定類型的資料，送出表單時，瀏覽器會自行檢查資料格式是否正確，若格式不對，將不會送出表單，且會提醒使用者進行修改。可使用的屬性包含下列：

電子郵件信箱

<input type="email">

電話

<input type="tel">

數字

<input type="number">

網址

<input type="url">

回目錄頁

網頁的互動式表單