表單元素其實要跟 HTML5 其他元素放在同一篇的, 但由於篇幅關係獨立出來, 剛好也反應了表單在網頁系統設計中的獨特性 : 它是網頁人機介面最重要的部分; 其次, 在 HTML5 中新增了許多好用的表單元件, 因此獨立一篇是有必要的.
本系列之前的筆記參考 :
# 申請免費 PHP 虛擬主機 000a.biz 與 000webhost.com
# 網頁技術速學筆記 (一) : HTML 基礎
# 網頁技術速學筆記 (二) : CSS 基礎
# 網頁技術速學筆記 (三) : Javascript 基礎
表單 (form) 是網頁做為人機介面的主角, 使用者透過表單 UI 元件將資料傳遞給後端伺服器的應用程式 (商業邏輯), 處理結果再以網頁形式回應給使用者, 此即互動式網頁. 所有的表單元素都須放在 form 元素中, 架構如下 :
<form method="get/post" action="xxx.php">
表單 UI 元素放在 form 裡面
</form>
form 元素主要屬性如下 :
其中 autocomplete 與 novalidate 為 HTML5 新增屬性, autocomplete 預設為開啟, 亦即瀏覽器會記住已輸入過的內容, 下一次連結此表單時會自動顯示已輸入過的值供選擇. 其實表單運作最重要的屬性是 method 與 action.
表單內的 UI 元件主要包含 input/textarea (輸入), select-option (選單), 以及 button (按鈕) 三大類元件, HTML4 時代已提供功能完整之 UI 元素如下表 :
可見其中 input 元素類型最豐富, 可用 type 屬性設定各種 UI 類型. 事實上, 只需要 input, textarea 與 select-option 這三種元件就能滿足各式各樣的 HTML 表單需求了, button 元素只不過是錦上添花而已, 使用 button 元素的好處是, 它是 container 式元素 (有結尾標籤), 可以製作各種 HTML 格式化的按鈕.
HTML5 大幅擴充了 input 元素的 UI 類型, 如下表所示 :
除了擴充 input 外, 也新增如下好用的 UI 元素 :
另外 HTML5 也替新舊 UI 元素添加如下的新屬性 :
當瀏覽器載入網頁時, 會將網頁剖析為一個由網頁元素構成的樹狀模型, 稱為 DOM (Document Object Model) 樹, 每一個元素都是樹中的節點物件. DOM 模型為這些元素物件提供了相關屬性與方法, 以便 Javascript 能透過存取物件來更改網頁內容, 因此 DOM 是網頁與 Javascript 間的溝通橋梁. 下面為以主要表單元件為中心所繪的 DOM 模型示意圖 :
其中 window 物件為根節點, 代表瀏覽器本身; document 物件代表 HTML 網頁文件, 旗下子元素以 form 表單元素最豐富.
關於 HTML 元素可參考 :
# https://www.htmlquick.com/reference/tags.html
在網頁設計中常用到的 HTML 表單元件依功能分類如下表 :
其中藍色部分為 HTML5 新增之元件.
一. 按鈕元件 :
HTML 的按鈕元件可用 input 或 button 兩個元素來做, 功能完全一樣, 透過type 屬性設定共有如下三種元件 :
而 button-button 元件之特定屬性如下表 (沒有 value) :
其中 type 屬性用來設定按鈕類型, type=memu 為 HTML5 新增的類型. 其中 button 類型為一般按鈕, 無預設動作, 須用 onclick 屬性指定按鈕事件處理程式; submit 與 reset 與類型則與 input-submit 及 input-reset 功能一樣, 具有預設動作, submit 會提交表單, 而 reset 則是重設表單.
範例 1 : input 按鈕元件測試 (1)
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="">
<input type="button" style="color:blue;font-weight:bold;" value="input 按鈕1">
<input type="button" value="input 按鈕2 (disabled)" disabled><br>
<input type="reset">
<input type="submit">
<input type="reset" value="清除">
<input type="submit" value="確定"><br>
<button type="button">button 按鈕1</button>
<button type="button" disabled>button 按鈕2 (disabled)</button><br>
<button type="button"><b>button 按鈕3<b></button>
<button type="button"><span style="color:blue">button 按鈕4<span></button><br>
<button type="reset">重置</button>
<button type="submit">提交</button><br>
</form>
</body>
</html>
可見 input 與 button 按鈕功能基本上是一樣的, 但因為 button 按鈕是容器元素, 元素內容可以方便使用文字效果標籤如 b, u, i 等嵌套來添加文字樣式 已. 不過 input 按鈕也可以用 style 對按鈕上的文字添加樣式達到同樣效果.
按鈕事件處理會用到 Javascript 與 DOM (Document Object Modle) 物件模型操作. 當瀏覽器載入網頁時, 會將網頁剖析為一個由網頁元素構成的樹狀模型, 每一個元素都是樹中的節點物件, DOM 模型為這些元素物件提供了相關屬性與方法, 以便 Javascript 能透過存取物件來更改網頁內容, 因此 DOM 是網頁與 Javascript 間的溝通橋梁.
二. 文字輸入元件 :
單行文字輸入元素包括 input 元素的 text, password, search, email, url, tel 這六種類型, 其格式如下 :
<input type="type" name="name">
它們都只能輸入單行字串 (多行輸入須使用 textarea 元素). 其中 password 輸入時字元會以* 或黑點顯示以避免被窺伺, 而 search, email, url, tel 這四種為 HTML5 的新增類型, 在手機上會顯示適合之鍵盤, 例如 tel 欄位會顯示電話鍵盤.
注意, input 是單一標籤 (single tag), 沒有結束標籤, 可用 value 屬性設定其預設內容 (值). 除全域屬性外, 這些 input 單行文字輸入可用之特定屬性如下 :
其中標示為 boolean 者為布林屬性, 但在 HTML5 直接使用屬性名稱表示 True, 否則為 False. 文字元素都有預設長度 (預設 20 個字元), 但可用 size 屬性或 style 屬性的 width 來設定 (單位 px). 屬性 list 必須搭配 datalist 元素使用, 此 datalist 是作為此文字輸入元素建議項目清單之來源, datalist 必須指定一個 id 屬性讓 list 指向它.
屬性 pattern 可用正規表達式來驗證欄位輸入值是否符合所需之格式, 例如 :
輸入多行文字須使用 texarea 元素, 其基本格式如下 :
<textarea name="name" rows="5" cols="25"></textarea>
注意 textarea 是 container tag (容器標籤), 其內容預設值是放在開始標籤與結束標籤中間 (它並沒有 value 屬性). 除了全域屬性外, 可用之特定屬性如下 :
其中 wrap 屬性為 HTML5 新增, 用來控制表單提交給伺服器時文字輸入框中的內容要如何處理換行 :
範例 1 : 文字輸入元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="">
帳號 :
<input type="text" name="account" required><br>
密碼 :
<input type="password" name="password" size="10"><br>
信箱 :
<input type="email" name="email"><br>
網址 :
<input type="url" name="url" style="width:200px;"><br>
電話 :
<input type="tel" name="tel" placeholder="格式:07-2228888"><br>
搜尋 :
<input type="search" name="search" value="HTML"><br>
備註 :
<textarea name="remark" rows="5" cols="25">預設值</textarea><br>
</form>
</body>
</html>
可見 input 文字輸入元素的 placeholder 具有欄位提示功能 (灰色), 但它不是預設值, 未填資料提交時不會傳出去, 預設值要用 value 屬性設定, 但 textarea 的預設值則是放在開始與結束標籤之間, 它沒有 value 屬性.
注意, search 欄位與其他文字輸入欄位不同之處是當滑鼠移到欄位上時會在最右邊顯示一個 X 小按鈕, 可用來消除已輸入之內容. 當滑鼠移到設定為 required 的欄位上時, 會顯示 "請填寫這個欄位". 另外若填入 email 欄位中的資料沒有 @ 字元會提示 "請在電子郵件位址中包含 @".
三. 選擇元件 :
HTML 元素中的選項元素有如下四種 :
<input type="radio" name="investment" value="基金">基金
<input type="radio" name="investment" value="股票">股票
或者使用 label 元素, 並以其 for 屬性來綁定 radio 的 id :
<input type="radio" name="investment" id="inv1" value="基金">
<label for="inv1">基金</label>
<input type="radio" name="investment" id="inv2" value="股票">股票
<label for="inv2">股票</label>
複選元件 checkbox 也是如此 :
<input type="checkbox" name="investment" value="基金">基金
<input type="checkbox" name="investment" value="股票">股票
由於複選會傳出多個值, 因此其 name 也可以用陣列形式 :
<input type="checkbox" name="investment[]" value="基金">基金
<input type="checkbox" name="investment[]" value="股票">股票
不論 radio 還是 checkbox, 最好要設置 value, 因為表單提交時是向伺服器傳遞此元件被選擇選項的 value 值, 如果沒有設置 value 屬性, 則 radio 傳出 "on" (有選) 或 "off" (沒選); 而 checkbox 傳出 "on"/"off" 陣列.
select-option 元件有兩種, 一稱為下拉式選單 (沒設 size), 其格式為 :
<select name="" multiple>
<option value="" selected>選項1</option>
<option value="">選項2</option>
<option value="">選項3</option>
</select>
另一種是有設 size 屬性且值大於 1 的稱為清單方塊, 其選項會局部或全部展開 :
<select name="" size="2" multiple>
<option value="選項1" selected>選項1</option>
<option value="選項2">選項2</option>
<option value="選項3">選項3</option>
</select>
如果 size 數值等於選項總數就是全部展開, 否則為局部展開, 可點上下鈕瀏覽與選取選項. 有加上 multiple 屬性為複選, 否則為單選. 不論是下拉式選單還是清單方塊, 都可以加上 multiple 屬性改成複選 (預設是單選). select-option 在表單提交時傳出被選擇選項之 value 屬性值 (複選時傳出 value 值以逗號隔開之字串), 因此一定要設置 value 屬性.
最後一種選項元件 datalist 是 text 與 datalist-option 的組合, 兩者是靠 input 元素的 list 屬性來綁定, datalist 須設定 id 屬性來讓 input 的 list 來綁定, 格式為 :
<input type="text" name="" list="datalistID">
<datalist id="datalistID">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
</select>
注意, datalist 裡面的 option 值要嘛使用 value 屬性, 要嘛放在開始與結束標籤之間, 但不要同時使用, 否則每個選項會重複兩次.
範例 2 : 選項元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="">
年收入 :
<input type="radio" name="income">50 萬以下
<input type="radio" name="income" checked>50~100 萬
<input type="radio" name="income">100以上<br>
投資經驗 :
<input type="checkbox" name="experience1" checked>基金
<input type="checkbox" name="experience1" checked>股票
<input type="checkbox" name="experience1">選擇權
<input type="checkbox" name="experience1">期貨<br>
投資屬性 :
<select name="risk">
<option value="positive" selected>積極型</option>
<option value="robust">穩健型</option>
<option value="conservative">保守型</option>
</select><br>
投資商品 :
<select name="commodity" size="3" multiple>
<option value="定存" selected>定存</option>
<option value="債券">債券</option>
<option value="投資型保單">投資型保單</option>
<option value="認購權證">認購權證</option>
<option value="可轉換公司債">可轉換公司債</option>
</select><br>
虧損承受力 :
<input type="text" name="max_loss" list="loss_percentage">
<datalist id="loss_percentage">
<option value="0%"></option>
<option value="-5%"></option>
<option value="-10%"></option>
<option value="-20%"></option>
</datalist>
</form>
</body>
</html>
事實上 datalist 並不好用, 點選選項後選單會只剩下被選擇的那個選項, 除非清除掉 text 欄位才會再度顯示全部選項, 難怪 Safari 不支援.
四. 數值與範圍元件 :
HTML5 新增了數值元件 (type=number) 與範圍元件 (type=range), 可用來讓使用者輸入數值, number 的外型為微調器 (spinner), 而 range 外型則為滑桿.
1. 數值元件 (type=number) :
數值元件 (type=number) 的可用屬性如下 :
2. 範圍元件 (type=range) :
範圍元件 (type=range) 的可用屬性如下 :
這兩個元件都有 max, min, 與 step 這三個重要屬性, 其中 max 與 min 分別規範可輸入之最大與最小值, 沒有指定時預設最大值為 100, 最小值為 0; 而 step 則是每次點向上向下鈕或拉滑桿時數值變化的步階值, 預設為 1. 注意, 如果沒有設 min 之值, 一直往下調整會變負數.
範例 3 : 數值與範圍元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="dosomething.php">
年齡 : <input type="number" name="age" min="0" max="120" value="30"><br>
月入 :<input type="range" name="income" min="0" max="300000" step="1000" onchange="show_value(this)">
<span id="display"></span>
</form>
<script>
function show_value(obj) {
var span=document.getElementById("display");
span.innerHTML=obj.value;
}
</script>
</body>
</html>
此例在 range 元件後面放了一個 span 元素來顯示滑桿目前的數值, 並設定監聽 change 事件, 在偵測到滑桿變化後呼叫 show_value() 函數, 並把 range 元件本身當參數傳過去. 在 show_value() 函數中則利用 document 物件的 getElementById() 方法取得 span 元素物件, 並將 range 元件之數值設定給 span 元素之 innerHTML 屬性, 亦即其 HTML 內容來顯示數值. 結果如下 :
五. 時間日期元件 :
HTML5 新增了 6 個與時間日期有關的 input 元件 : time, date, week, month, datetime, datetime-local, 它們都有如下可用之屬性 :
time 元件預設以三個欄位 "上午 12:30" 格式顯示時間, 亦即預設 step 為 60 秒, 即 1 分鐘, 若有設 step, 則會增加秒欄位. 先以滑鼠點選欄位, 再按右邊的上下鍵即可調整時間, 其 value 值格式為 24 小時制的 "hh:mm" 或 "hh:mm:ss", 若要設定預設時間也是使用 24 小時制.
datetime 在 Chrome 與 Firfox 測試無效果, 但 datetime-local 則有, 其值之格式例如 "2019-11-09T23:10:08".
範例 4 : 時間日期元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form>
time : <input type="time" onchange="show_value(this)"><br>
time : <input type="time" step="1" onchange="show_value(this)"><br>
date : <input type="date" onchange="show_value(this)"><br>
week : <input type="week" onchange="show_value(this)"><br>
month : <input type="month" onchange="show_value(this)"><br>
datetime : <input type="datetime" onchange="show_value(this)"><br>
datetime-local : <input type="datetime-local" onchange="show_value(this)"><br>
value : <span id="display"></span>
</form>
<script>
function show_value(obj) {
var span=document.getElementById("display");
span.innerHTML=obj.value;
}
</script>
</body>
</html>
六. 色彩選擇元件 :
色彩選擇元件外觀類似按鈕, 按下去後會開啟作業系統的色彩選擇視窗, 傳回值格式例如 "#3c4dc4", 其可用屬性如下 :
範例 5 : 色彩元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form>
color : <input type="color" onchange="show_value(this)"><br>
value : <span id="display"></span>
</form>
<script>
function show_value(obj) {
var span=document.getElementById("display");
span.innerHTML=obj.value;
}
</script>
</body>
</html>
# https://www.w3schools.com/cssref/css_colors.asp (色碼表)
<form method="get/post" action="xxx.php">
表單 UI 元素放在 form 裡面
</form>
form 元素主要屬性如下 :
| form 屬性 | 說明 |
| name | 表單名稱 |
| method | 傳送方法 (get/post), 預設 get |
| action | 設定後端伺服器表單處理程式之 URL |
| autocomplete | 是否啟用自動完成功能 (on/off), 預設 on |
| novalidate | 傳送表單前是否要執行資料驗證 (boolean) |
| enctype | MIME 編碼類型, 預設 application/x-www-form-urlencoded |
| target | 表單提交的目標視窗, 與超連結之 target 屬性一樣 |
其中 autocomplete 與 novalidate 為 HTML5 新增屬性, autocomplete 預設為開啟, 亦即瀏覽器會記住已輸入過的內容, 下一次連結此表單時會自動顯示已輸入過的值供選擇. 其實表單運作最重要的屬性是 method 與 action.
表單內的 UI 元件主要包含 input/textarea (輸入), select-option (選單), 以及 button (按鈕) 三大類元件, HTML4 時代已提供功能完整之 UI 元素如下表 :
| HTML4 的表單 UI 元素 | 說明 |
| <input type="text" name="" size=""> | 文字欄位 (單行) |
| <input type="password" name="" size=""> | 密碼欄位 |
| <input type="radio" name="" value="" checked>選項1 | 單選圓鈕 |
| <input type="checkbox" name="" value="" checked>選項1 | 核取方塊 (複選) |
| <select name="" value="" size="" onchange="" multiple> <option value="值1">選項1</option> <option value="值2" selected>選項2</option> </select> | 下拉式選單 清單方塊 |
| <select name="" value="" size="" onchange="" multiple> <optgroup label="群組1"> <option value="值1">選項1</option> <option value="值2" selected>選項2</option> </optgroup> </select> | 群組化下拉式選單 |
| <textarea name="" rows="" cols=""> 預設內容 </textarea> | 文字方塊 (多行) |
| <input type="hidden" name="" value=""> | 隱藏欄位 |
| <input type="file" name=""> | 上傳檔案 |
| <input type="button" name="" onclick=""> | 一般按鈕 |
| <button type="button" name="" onclick="">確定</button> | 一般按鈕 |
| <button type="submit" name="">送出</button> | 提交表單按鈕 |
| <button type="reset" name="">重設</button> | 清除表單內容按鈕 |
| <input type="image" src="" alt="送出"> | 提交表單按鈕 |
| <input type="submit" value="送出"> | 提交表單按鈕 |
| <input type="reset" value="重設"> | 清除表單內容按鈕 |
| <label for="id1">標題</label> | 與 id1 元素綁定之標題 |
| <fieldset> <ledgend>群組標題</ledgend> UI 元素群 </fieldset> | UI 元素群組化 |
可見其中 input 元素類型最豐富, 可用 type 屬性設定各種 UI 類型. 事實上, 只需要 input, textarea 與 select-option 這三種元件就能滿足各式各樣的 HTML 表單需求了, button 元素只不過是錦上添花而已, 使用 button 元素的好處是, 它是 container 式元素 (有結尾標籤), 可以製作各種 HTML 格式化的按鈕.
HTML5 大幅擴充了 input 元素的 UI 類型, 如下表所示 :
| HTML5 表單新增的 input 元素 | 說明 |
| <input type="tel" name=""> | 輸入電話 |
| <input type="email" name="" multiple> | 輸入電子郵件 |
| <input type="url" name="" val="http://"> | 輸入 URL |
| <input type="search" name=""> | 搜尋框 |
| <input type="number" name="" min="" max="" step=""> | 輸入數值 (上下微調器) |
| <input type="range" name="" min="" max="" step=""> | 輸入數值 (滑桿) |
| <input type="time" name="" min="" max="" step=""> | 輸入時間 |
| <input type="date" name="" min="" max="" step=""> | 輸入日期 |
| <input type="month" name="" min="" max="" step=""> | 輸入月份 |
| <input type="week" name="" min="" max="" step=""> | 輸入一年的第幾周 |
| <input type="datetime" name="" min="" max="" step=""> | 輸入 UTC 日期時間 |
| <input type="datetime-local" name="" min="" max="" step=""> | 輸入本地日期時間 |
| <input type="color" name=""> | 輸入顏色 |
除了擴充 input 外, 也新增如下好用的 UI 元素 :
| HTML5 表單新增的其他 UI 元素 | 說明 |
| <progress name="" value="" max=""></progress> | 顯示進度條 |
| <meter name="" value="" min="" max=""></meter> | 顯示計量計 |
| <output name="" for="id1 id2"> | 輸出結果 (配合表單之 oninput) |
| <datalist id=""> <option value="選項1"> <option value="選項2"> </datalist> | 備選清單 (與 input 的 text, search 類型文字欄位搭配) (Safari 瀏覽器不支援) |
| <details name="" open> <summary> 詳細內容 </summary> </details> | 縮合或展開詳細內容 |
另外 HTML5 也替新舊 UI 元素添加如下的新屬性 :
| HTML5 UI 元素新增屬性 | 說明 |
| autocomplete | 是否啟用自動完成功能 (on/off), 預設 on |
| autofocus | 網頁載入後輸入欄位自動取得焦點 (顯示滑鼠) |
| list | 備選清單名稱 |
| min/max/step | 最小值/最大值/步階值 (number/range 元素屬性) |
| placeholder | 文字欄位之預設輸入提示 |
| required | 驗證時的避田欄位 |
| formaction | 覆蓋 form 元素的 action 屬性 |
| formmethod | 覆蓋 form 元素的 method 屬性 |
| formenctype | 覆蓋 form 元素的 enctype 屬性 |
| formnovalidate | 覆蓋 form 元素的 novalidate 屬性 |
| formtarget | 覆蓋 form 元素的 target 屬性 |
當瀏覽器載入網頁時, 會將網頁剖析為一個由網頁元素構成的樹狀模型, 稱為 DOM (Document Object Model) 樹, 每一個元素都是樹中的節點物件. DOM 模型為這些元素物件提供了相關屬性與方法, 以便 Javascript 能透過存取物件來更改網頁內容, 因此 DOM 是網頁與 Javascript 間的溝通橋梁. 下面為以主要表單元件為中心所繪的 DOM 模型示意圖 :
其中 window 物件為根節點, 代表瀏覽器本身; document 物件代表 HTML 網頁文件, 旗下子元素以 form 表單元素最豐富.
關於 HTML 元素可參考 :
# https://www.htmlquick.com/reference/tags.html
在網頁設計中常用到的 HTML 表單元件依功能分類如下表 :
| 元件類型 | HTML 表單元件 |
| 按鈕 | button (button, reset, submit), input (button, reset, submit, image, file) |
| 文字輸入 | input (text, password, tel, url, email, search), textarea |
| 選擇元件 | input(radio, checkbox), select-option |
| 數值範圍 | input (number, range) |
| 時間日期 | input (time, date, month, week, datetime, datetime-local) |
| 色彩選擇 | input(color) |
| 輔助元件 | input (hidden), fieldset-legend, label |
其中藍色部分為 HTML5 新增之元件.
一. 按鈕元件 :
HTML 的按鈕元件可用 input 或 button 兩個元素來做, 功能完全一樣, 透過type 屬性設定共有如下三種元件 :
- type=button : 一般按鈕, 無預設動作
- type=reset : 重設按鈕, 預設動作為清除表單內全部已輸入之內容
- type=submit : 提交按鈕, 預設動作為向伺服器提交表單
| input-button 元素屬性 | 說明 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| disabled | 顯示元素但無法使用 (boolean) |
| form | 綁定之表單 id |
| name | 元素名稱 |
| value | 按鈕上顯示之文字 |
| onclick | 設定按鈕事件處理程式 |
而 button-button 元件之特定屬性如下表 (沒有 value) :
| button 元素屬性 | 說明 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| disabled | 顯示元素但無法使用 (boolean) |
| name | 元素名稱 |
| type | 按鈕類型 submit/reset/button/menu |
| onclick | 設定按鈕事件處理程式 |
其中 type 屬性用來設定按鈕類型, type=memu 為 HTML5 新增的類型. 其中 button 類型為一般按鈕, 無預設動作, 須用 onclick 屬性指定按鈕事件處理程式; submit 與 reset 與類型則與 input-submit 及 input-reset 功能一樣, 具有預設動作, submit 會提交表單, 而 reset 則是重設表單.
範例 1 : input 按鈕元件測試 (1)
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="">
<input type="button" style="color:blue;font-weight:bold;" value="input 按鈕1">
<input type="button" value="input 按鈕2 (disabled)" disabled><br>
<input type="reset">
<input type="submit">
<input type="reset" value="清除">
<input type="submit" value="確定"><br>
<button type="button">button 按鈕1</button>
<button type="button" disabled>button 按鈕2 (disabled)</button><br>
<button type="button"><b>button 按鈕3<b></button>
<button type="button"><span style="color:blue">button 按鈕4<span></button><br>
<button type="reset">重置</button>
<button type="submit">提交</button><br>
</form>
</body>
</html>
可見 input 與 button 按鈕功能基本上是一樣的, 但因為 button 按鈕是容器元素, 元素內容可以方便使用文字效果標籤如 b, u, i 等嵌套來添加文字樣式 已. 不過 input 按鈕也可以用 style 對按鈕上的文字添加樣式達到同樣效果.
按鈕事件處理會用到 Javascript 與 DOM (Document Object Modle) 物件模型操作. 當瀏覽器載入網頁時, 會將網頁剖析為一個由網頁元素構成的樹狀模型, 每一個元素都是樹中的節點物件, DOM 模型為這些元素物件提供了相關屬性與方法, 以便 Javascript 能透過存取物件來更改網頁內容, 因此 DOM 是網頁與 Javascript 間的溝通橋梁.
二. 文字輸入元件 :
單行文字輸入元素包括 input 元素的 text, password, search, email, url, tel 這六種類型, 其格式如下 :
<input type="type" name="name">
它們都只能輸入單行字串 (多行輸入須使用 textarea 元素). 其中 password 輸入時字元會以* 或黑點顯示以避免被窺伺, 而 search, email, url, tel 這四種為 HTML5 的新增類型, 在手機上會顯示適合之鍵盤, 例如 tel 欄位會顯示電話鍵盤.
注意, input 是單一標籤 (single tag), 沒有結束標籤, 可用 value 屬性設定其預設內容 (值). 除全域屬性外, 這些 input 單行文字輸入可用之特定屬性如下 :
| input 文字輸入屬性 | 說明 |
| autocomplete | 自動完成 on/off (預設), 顯示最近輸入內容選單 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| disabled | 顯示元素但無法使用 (boolean) |
| form | 綁定之表單 id |
| list | 建議選項清單 (datalist 元素) 之 id |
| maxlength | 指定最大可輸入之字元數 |
| multiple | email 類型專用 (可輸入多個 email, 逗號隔開) |
| name | 元素名稱 |
| onclick | 設定按鈕事件處理程式 (button 按鈕專用) |
| pattern | 指定驗證輸入資料之正規表達式 |
| placeholder | 顯示提示訊息 |
| readonly | 唯讀 (boolean) |
| required | 指定為必填欄位 (boolean) |
| size | 顯示長度 (字元數, 預設 20) |
| value | 內容值 |
其中標示為 boolean 者為布林屬性, 但在 HTML5 直接使用屬性名稱表示 True, 否則為 False. 文字元素都有預設長度 (預設 20 個字元), 但可用 size 屬性或 style 屬性的 width 來設定 (單位 px). 屬性 list 必須搭配 datalist 元素使用, 此 datalist 是作為此文字輸入元素建議項目清單之來源, datalist 必須指定一個 id 屬性讓 list 指向它.
屬性 pattern 可用正規表達式來驗證欄位輸入值是否符合所需之格式, 例如 :
| 常用 Javascript 正規表達式 | 說明 | 範例 |
| [0-9]+ | 整數 | 1989 |
| [0-9]+.[0-9]+ | 浮點數 | 3.14159 |
| [A-Za-z]+ | 英文字 | Python |
| ^\d{4}-\d{2}-\d{2}$ | 日期 | 2019-08-20 |
| ^[A-Z]\d{9}$ | 身分證號碼 | A123456789 |
| ^09\d{8}$ | 手機號碼 | 0911223344 |
| ^.*@gmail\.com | Gmail 信箱 | blabla@gmail.com |
| ^[0-9a-zA-Z]+[\w-]+@[\w\.-]+\.\w{2,}$ | E-mail 格式 | blabla@yahoo.com.tw |
| ^(http|https)://[0-9a-zA-Z/#&?%\.\-\+_=]+$ | 網址格式 | http://www.google.com.tw |
輸入多行文字須使用 texarea 元素, 其基本格式如下 :
<textarea name="name" rows="5" cols="25"></textarea>
注意 textarea 是 container tag (容器標籤), 其內容預設值是放在開始標籤與結束標籤中間 (它並沒有 value 屬性). 除了全域屬性外, 可用之特定屬性如下 :
| textarea 屬性 | 說明 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| cols | 行數 (寬度) |
| disabled | 顯示元素但無法使用 (boolean) |
| form | 綁定之表單 id |
| maxlength | 指定最大可輸入之字元數 |
| name | 元件名稱 |
| placeholder | 顯示提示訊息 |
| readonly | 唯讀 (boolean) |
| required | 指定為必填欄位 (boolean) |
| rows | 列數 (高度) |
| wrap | 提交表單時處理換行之方式 : soft(預設)/hard |
其中 wrap 屬性為 HTML5 新增, 用來控制表單提交給伺服器時文字輸入框中的內容要如何處理換行 :
- soft (預設) : 除了按 Enter 鍵外不刻意換行 (不另加 '\n').
- hard : 因為寬度限制而跳下一行顯示者一律強制換行後提交 (加 '\n').
範例 1 : 文字輸入元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="">
帳號 :
<input type="text" name="account" required><br>
密碼 :
<input type="password" name="password" size="10"><br>
信箱 :
<input type="email" name="email"><br>
網址 :
<input type="url" name="url" style="width:200px;"><br>
電話 :
<input type="tel" name="tel" placeholder="格式:07-2228888"><br>
搜尋 :
<input type="search" name="search" value="HTML"><br>
備註 :
<textarea name="remark" rows="5" cols="25">預設值</textarea><br>
</form>
</body>
</html>
可見 input 文字輸入元素的 placeholder 具有欄位提示功能 (灰色), 但它不是預設值, 未填資料提交時不會傳出去, 預設值要用 value 屬性設定, 但 textarea 的預設值則是放在開始與結束標籤之間, 它沒有 value 屬性.
注意, search 欄位與其他文字輸入欄位不同之處是當滑鼠移到欄位上時會在最右邊顯示一個 X 小按鈕, 可用來消除已輸入之內容. 當滑鼠移到設定為 required 的欄位上時, 會顯示 "請填寫這個欄位". 另外若填入 email 欄位中的資料沒有 @ 字元會提示 "請在電子郵件位址中包含 @".
三. 選擇元件 :
HTML 元素中的選項元素有如下四種 :
- input-radio (單選, 圓鈕)
- input-chechbox (複選, 核取方塊)
- select-option (可單選可複選, 下拉式選單/清單方塊)
- datalist (單選, Safari 瀏覽器不支援)
<input type="radio" name="investment" value="基金">基金
<input type="radio" name="investment" value="股票">股票
或者使用 label 元素, 並以其 for 屬性來綁定 radio 的 id :
<input type="radio" name="investment" id="inv1" value="基金">
<label for="inv1">基金</label>
<input type="radio" name="investment" id="inv2" value="股票">股票
<label for="inv2">股票</label>
複選元件 checkbox 也是如此 :
<input type="checkbox" name="investment" value="基金">基金
<input type="checkbox" name="investment" value="股票">股票
由於複選會傳出多個值, 因此其 name 也可以用陣列形式 :
<input type="checkbox" name="investment[]" value="基金">基金
<input type="checkbox" name="investment[]" value="股票">股票
不論 radio 還是 checkbox, 最好要設置 value, 因為表單提交時是向伺服器傳遞此元件被選擇選項的 value 值, 如果沒有設置 value 屬性, 則 radio 傳出 "on" (有選) 或 "off" (沒選); 而 checkbox 傳出 "on"/"off" 陣列.
select-option 元件有兩種, 一稱為下拉式選單 (沒設 size), 其格式為 :
<select name="" multiple>
<option value="" selected>選項1</option>
<option value="">選項2</option>
<option value="">選項3</option>
</select>
另一種是有設 size 屬性且值大於 1 的稱為清單方塊, 其選項會局部或全部展開 :
<select name="" size="2" multiple>
<option value="選項1" selected>選項1</option>
<option value="選項2">選項2</option>
<option value="選項3">選項3</option>
</select>
如果 size 數值等於選項總數就是全部展開, 否則為局部展開, 可點上下鈕瀏覽與選取選項. 有加上 multiple 屬性為複選, 否則為單選. 不論是下拉式選單還是清單方塊, 都可以加上 multiple 屬性改成複選 (預設是單選). select-option 在表單提交時傳出被選擇選項之 value 屬性值 (複選時傳出 value 值以逗號隔開之字串), 因此一定要設置 value 屬性.
最後一種選項元件 datalist 是 text 與 datalist-option 的組合, 兩者是靠 input 元素的 list 屬性來綁定, datalist 須設定 id 屬性來讓 input 的 list 來綁定, 格式為 :
<input type="text" name="" list="datalistID">
<datalist id="datalistID">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
</select>
注意, datalist 裡面的 option 值要嘛使用 value 屬性, 要嘛放在開始與結束標籤之間, 但不要同時使用, 否則每個選項會重複兩次.
範例 2 : 選項元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="">
年收入 :
<input type="radio" name="income">50 萬以下
<input type="radio" name="income" checked>50~100 萬
<input type="radio" name="income">100以上<br>
投資經驗 :
<input type="checkbox" name="experience1" checked>基金
<input type="checkbox" name="experience1" checked>股票
<input type="checkbox" name="experience1">選擇權
<input type="checkbox" name="experience1">期貨<br>
投資屬性 :
<select name="risk">
<option value="positive" selected>積極型</option>
<option value="robust">穩健型</option>
<option value="conservative">保守型</option>
</select><br>
投資商品 :
<select name="commodity" size="3" multiple>
<option value="定存" selected>定存</option>
<option value="債券">債券</option>
<option value="投資型保單">投資型保單</option>
<option value="認購權證">認購權證</option>
<option value="可轉換公司債">可轉換公司債</option>
</select><br>
虧損承受力 :
<input type="text" name="max_loss" list="loss_percentage">
<datalist id="loss_percentage">
<option value="0%"></option>
<option value="-5%"></option>
<option value="-10%"></option>
<option value="-20%"></option>
</datalist>
</form>
</body>
</html>
事實上 datalist 並不好用, 點選選項後選單會只剩下被選擇的那個選項, 除非清除掉 text 欄位才會再度顯示全部選項, 難怪 Safari 不支援.
四. 數值與範圍元件 :
HTML5 新增了數值元件 (type=number) 與範圍元件 (type=range), 可用來讓使用者輸入數值, number 的外型為微調器 (spinner), 而 range 外型則為滑桿.
1. 數值元件 (type=number) :
數值元件 (type=number) 的可用屬性如下 :
| input 文字輸入屬性 | 說明 |
| autocomplete | 自動完成 on/off (預設), 顯示最近輸入內容選單 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| disabled | 顯示元素但無法使用 (boolean) |
| form | 綁定之表單 id |
| list | 建議選項清單 (datalist 元素) 之 id |
| name | 元素名稱 |
| placeholder | 顯示提示訊息 |
| readonly | 唯讀 (boolean) |
| required | 指定為必填欄位 (boolean) |
| max | 最大值 |
| min | 最小值 |
| step | 步階值 |
| value | 內容值 |
2. 範圍元件 (type=range) :
範圍元件 (type=range) 的可用屬性如下 :
| input 範圍元件屬性 | 說明 |
| autocomplete | 自動完成 on/off (預設), 顯示最近輸入內容選單 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| disabled | 顯示元素但無法使用 (boolean) |
| form | 綁定之表單 id |
| list | 建議選項清單 (datalist 元素) 之 id |
| name | 元素名稱 |
| max | 最大值 |
| min | 最小值 |
| step | 步階值 |
| value | 內容值 |
這兩個元件都有 max, min, 與 step 這三個重要屬性, 其中 max 與 min 分別規範可輸入之最大與最小值, 沒有指定時預設最大值為 100, 最小值為 0; 而 step 則是每次點向上向下鈕或拉滑桿時數值變化的步階值, 預設為 1. 注意, 如果沒有設 min 之值, 一直往下調整會變負數.
範例 3 : 數值與範圍元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="dosomething.php">
年齡 : <input type="number" name="age" min="0" max="120" value="30"><br>
月入 :<input type="range" name="income" min="0" max="300000" step="1000" onchange="show_value(this)">
<span id="display"></span>
</form>
<script>
function show_value(obj) {
var span=document.getElementById("display");
span.innerHTML=obj.value;
}
</script>
</body>
</html>
此例在 range 元件後面放了一個 span 元素來顯示滑桿目前的數值, 並設定監聽 change 事件, 在偵測到滑桿變化後呼叫 show_value() 函數, 並把 range 元件本身當參數傳過去. 在 show_value() 函數中則利用 document 物件的 getElementById() 方法取得 span 元素物件, 並將 range 元件之數值設定給 span 元素之 innerHTML 屬性, 亦即其 HTML 內容來顯示數值. 結果如下 :
五. 時間日期元件 :
HTML5 新增了 6 個與時間日期有關的 input 元件 : time, date, week, month, datetime, datetime-local, 它們都有如下可用之屬性 :
| input 時間日期元件屬性 | 說明 |
| autocomplete | 自動完成 on/off (預設), 顯示最近輸入內容選單 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| disabled | 顯示元素但無法使用 (boolean) |
| form | 綁定之表單 id |
| list | 建議選項清單 (datalist 元素) 之 id |
| name | 元素名稱 |
| readonly | 唯讀 (boolean) |
| required | 指定為必填欄位 (boolean) |
| max | 最大值 |
| min | 最小值 |
| step | 步階值 |
| value | 內容值 |
time 元件預設以三個欄位 "上午 12:30" 格式顯示時間, 亦即預設 step 為 60 秒, 即 1 分鐘, 若有設 step, 則會增加秒欄位. 先以滑鼠點選欄位, 再按右邊的上下鍵即可調整時間, 其 value 值格式為 24 小時制的 "hh:mm" 或 "hh:mm:ss", 若要設定預設時間也是使用 24 小時制.
datetime 在 Chrome 與 Firfox 測試無效果, 但 datetime-local 則有, 其值之格式例如 "2019-11-09T23:10:08".
範例 4 : 時間日期元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form>
time : <input type="time" onchange="show_value(this)"><br>
time : <input type="time" step="1" onchange="show_value(this)"><br>
date : <input type="date" onchange="show_value(this)"><br>
week : <input type="week" onchange="show_value(this)"><br>
month : <input type="month" onchange="show_value(this)"><br>
datetime : <input type="datetime" onchange="show_value(this)"><br>
datetime-local : <input type="datetime-local" onchange="show_value(this)"><br>
value : <span id="display"></span>
</form>
<script>
function show_value(obj) {
var span=document.getElementById("display");
span.innerHTML=obj.value;
}
</script>
</body>
</html>
結果如下 :
六. 色彩選擇元件 :
色彩選擇元件外觀類似按鈕, 按下去後會開啟作業系統的色彩選擇視窗, 傳回值格式例如 "#3c4dc4", 其可用屬性如下 :
| input 色彩元件屬性 | 說明 |
| autocomplete | 自動完成 on/off (預設), 顯示最近輸入內容選單 |
| autofocus | 網頁載入時自動取得焦點 (boolean) |
| disabled | 顯示元素但無法使用 (boolean) |
| form | 綁定之表單 id |
| list | 建議選項清單 (datalist 元素) 之 id |
| name | 元素名稱 |
| value | 內容值 |
範例 5 : 色彩元件測試
<!DOCTYPE html>
<html>
<head>
<title>表單測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form>
color : <input type="color" onchange="show_value(this)"><br>
value : <span id="display"></span>
</form>
<script>
function show_value(obj) {
var span=document.getElementById("display");
span.innerHTML=obj.value;
}
</script>
</body>
</html>
關於色碼可參考 W3SCHOOLS 網站 :
參考 :
# HTML5新標籤datalist與select的區别
# HTML: HTML5 Form Validation Examples
# [Javascript & Jquery] 好用的正規表示
# HTML5新標籤datalist與select的區别
# HTML: HTML5 Form Validation Examples
沒有留言 :
張貼留言