HTML5 新增了不少好用的 input 用法，來看看有哪些
● 新增的 input type
- 搜尋(search)：用於搜索輸入框，例如站內搜尋或搜尋引擎，外觀與常見的 type=“text” 沒有差別
<input type="search" name="search" value="請輸入關鍵字..." />2. 電子郵件信箱(email)：輸入的值必須要符合 email 信箱的格式，否則無法提交表單，會自動檢查格式
<input type="email" name="email" value="請輸入信箱..." />
3. 網址(URL)：輸入的值必須要符合 URL 的格式，否則無法提交表單，會自動檢查格式
<input type="url" name="url" value="請輸入網址..." />4. 電話號碼(tel)：並沒有限制輸入值的格式(驗證格式要另外自己寫 js )，但在 mobile 端會自動切換為數字輸入的鍵盤
<input type="tel" name="tel" value="請輸入手機..." />5. 數值(number)：只能輸入數字(※輸入中文 Enter 後會自動消失)，在某些瀏覽器上可以用上下鍵來輸入數字
<input type="number" name="num" value="1" />6. 日期(date)：默認輸入的日期格式為 YYYY/MM/DD，在某些瀏覽器上會以月曆的形式顯示
<input type="date" name="birthday" />
※ 雖然 HTML5 有日期選擇器很方便，但考慮到瀏覽器支援度的問題( type date 不支援 Safari 以及 IE 11 以前的版本)，所以可能還是要寫套件，我推薦使用的套件是 FullCalendar ，再依據需求去改寫 js 的用法
7. 時間(time)：默認輸入的時間格式為AM 00:00，在某些瀏覽器上可用上下鍵來輸入時間
<input type="time" name="time" />
※ HTML5 的時間選擇器一樣有瀏覽器支援度的問題(不支援 Safari 以及 IE 11 以前的版本)，推薦使用的套件是 jQuery Timepicker，有相當多用法，再依據需求去改寫 js
8. 一定範圍內的數字(range)：可以用拉動卷軸的方式來輸入大約的數字， IE 9 以前的版本不支援
<input type=”range” name=”points” min=”0" max=”10" />
9. 顏色(color)：可以用RGB色盤來選取色碼(格式#000000)，但 Safari 9.1 以前與 IE 11 以前的版本不支援
<input type=”color” name=”color” value=”#ff0000" />
最後，若想了解所有 input type 的用法，w3schools.com 有完整的介紹與Demo 可以看，這是很常用的標籤必須要熟練用法
● 讓表單變好用的 HTML5 新屬性
- autofocus：開啟網頁時，自動將游標停在指定的表單元件上(輸入框 focus 狀態默認為藍色的外光暈)，每個頁面只能設定一個 autofocus 屬性
<input type=”text” name=”name” autofocus />2. autocomplete：會依據以前輸入的內容自動輸入，預設值為“ on ”，若要關閉自動輸入功能，指定為“ off ”即可。若設定在<form>標籤，則所有表單中的元件都適用此設定
<input type=”search” name=”example” autocomplete=”off” />3. placeholder：設定後在輸入元件會顯示灰色的提示文字，幫助使用者輸入(例如提示-規定輸入的格式等)，開始輸入後就會以輸入的資料(黑色文字)取代原本的提示文字了
<input type=”tel” name=”tel” placeholder=”0988-123456” />4. required：可將表單元件設定為「必填」欄位，若未選填就按下提交按鈕，就會跳出提示文字，要求一定要輸入資料才能送出
※ 若需要做更進一步的表單驗證格式，可使用 jQuery Validation Plugin，有相當多驗證格式可以使用
5. min / max / step：可用在數值(number)、日期(date)、時間(time)的輸入，分別規定最小值(min)、最大值(max)和遞增值(step)，以數值為範例如下列寫法：
<input type=”number” min=”1" max=”10" step=”0.5" />假如說是要限制可以輸入的字數，要用的屬性則是 minlength 與 maxlength， 但仍然要注意瀏覽器的支援度，否則還是寫 js 驗證比較保險
<input type="text" name="username" minlength="3" maxlength="10" />總結：雖然各家瀏覽器對於 HTML5 新屬性的支援度不一，但假如合乎目前開發需求的版本，還是可以使用上述這些好用的功能
