@ type="search"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
serch： <input type="search"><br/>
text： <input type="text">
</body>
</html>
輸出畫面：
@ type="email"、"url"、"tel"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label for="">
email: <input type="email" title="請輸入mail">
</label>
<label for="">
url: <input type="url">
</label>
<label for="">
tel: <input type="tel">
</label>
<button>OK</button>
</form>
</body>
</html>
輸出畫面：
@ type="datetime"、"date"、"time"
※ data 格式 yyyy-mm-dd 例：2018-01-15
time格式：mm:ss 例：20:16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label for="">
datetime: <input type="datetime">
</label>
<label for="">
date: <input type="date" max="2018-03-29" min="2018-03-01">
</label>
<label for="">
time: <input type="time" >
</label>
<button>OK</button>
</form>
</body>
</html>
輸出畫面：
@ type="number"
number輸入類型會將數字限制為有效數字，具體而言是一個浮點數。
可以使用min max屬性來限制輸入數值，step屬性來指定數值遞增量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label for="">
number: <input type="number" max="20" min="10" step="2">
</label>
<button>OK</button>
</form>
</body>
</html>
輸出畫面：
@ type="range"
range 輸入類型很像 number，也會將值限制為有效的淨點數值。此功能應該在不重視精確數值的案列中使用。
可與 max min 及 step 屬性一併使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label for="">
range: <input type="range" max="10" min="1" step="2">
</label>
<button>OK</button>
</form>
</body>
</html>
輸出畫面：
@ type="color"
color 輸入類型會以 16 進位格式將值限制為有效的 RGB 值，包含在六位數前的數字符號 # 號，Chrome 65 、 Firefox 59 點選 input 後皆會彈出選擇顏色視窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label for="">
color: <input type="color">
</label>
<button>OK</button>
</form>
</body>
</html>
輸出畫面：
@ datalist
datalist 元素的用途是定義一串輸入控制項的建議值，本身不是表單或控制項。
如同 select 元素一般，這些建議值是以 option 元素來指定。但除非 datalist 與某項 input 元素結合在一起，否則不會在螢幕上顯示任何東西。
若要將 datalist 與輸入欄位結合，必須在 datalist 指定一個 ID 並讓它成為 input 元素 list 屬性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label for="">
捐款金額: <input type="text" list="money">
</label>
<datalist id="money">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
</datalist>
<button>OK</button>
</form>
</body>
</html>
輸出畫面：
@ 提交前提前驗證 required
required 屬性在表單中可能會被指定到零或多個表單元素
當使用者提交表單時，如果有任何需要填入資料的欄位是空白的話，瀏覽器會停止提交的動作，並顯示錯誤訊息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label for="">
name: <input type="text" required>
</label>
<button>OK</button>
</form>
</body>
</html>
輸出畫面：
@ 自動聚焦欄位 autofocus
在 web上自動聚焦通常讓人又愛又恨。使用者如果想以方向鍵將網頁往下捲動時，網頁卻會很討厭的自動聚焦於某個欄位。在實作autofocus屬性時，請記得只可在每份文件上指定一次，以推持易用性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
serch： <input type="serch" autofocus><br/>
<button type="submit">送出</button>
</body>
</html>
@ 佔位文字 placeholder
placeholder 屬性 可讓表單更能協助使用者，它的目的是提供使者額外的提示。請勿漏掉 label 元素，它是表單控制項的標題。
表單會根據目前聚焦的網頁元素，及表單欄位中是否存在資料來顯示或隱藏佔位文字：但使用者聚焦該欄位時，佔位文字就會消失。當使用者離開此欄位且欄位維持空白時，佔位文字就會出 現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label>
帳號: <input type="email" placeholder="請輸入Email">
</label><br/>
<label>
手機：<input type="text" placeholder="0900-123-456">
</label>
<button>送出</button>
</form>
</body>
</html>
輸出畫面：
@ 自動完成 autocomplete
autocomplete 屬性於1999年由 IE 引入，隨後其它瀏覽器亦加以採用，即使它不屬於任何舊版的 HTML 或 XHTML 規格。
在預設情況下，所有表單欄位的 autocomplete 都是啟用的狀態 ( ON )，你可以讓瀏覽器記憶密碼，並自動登入許多拜訪過的網站，若你將這種屬性的值指定為 off 的話，將停用這項功能
除了可以在各輸入欄位停用 autocomplete 外，也可以停用整個表單。如果以表單級別停用 autocomplete ，也可以透過設定 autocomplete ="on" 在各別欄位重新敋用它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label>
帳號: <input type="text">
</label><br/>
<label>
密碼：<input type="text" autocomplete="off">
</label>
<button>送出</button>
</form>
</body>
</html>
@ 限制輸入值 pattern
pattern 屬性可在輸入欄位中指定正則表達式 (正規表達式)，在輸入欄位失焦或提交表單時，以 pattern 屬性驗證使用者輸入的資料，如果結果不正確，瀏覽器會顯示錯誤訊息且不會提交。
pattern 的正則表達式語法需與 JavaScript 一樣，pattern 屬性必須匹配所有的值，否則使用者會看到錯誤訊息
使用 pattern 屬性後，也該指定 title 屬性來描述這個 pattern， title值為提交不匹配之 pattern之錯誤訊息。 Firefox 於失焦時即會判斷是否匹配 pattern 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<form action="">
<label>
商品編號: <input type="text" pattern="[a-zA-Z0-9]{4}-[0-9]{4}" placeholder="a123-4567" title="英數四碼-數字四碼">
</label>
<button>送出</button>
</form>
</body>
</html>
輸出畫面：
留言列表
Bootstrap (2)