HTML5 新增的表單元件&屬性

HTML5 新增了不少好用的 input 用法,來看看有哪些

● 新增的 input type

  1. 搜尋(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 新屬性

  1. 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 新屬性的支援度不一,但假如合乎目前開發需求的版本,還是可以使用上述這些好用的功能