>
新增類型: type="email" 新增屬性:placeholder="請輸入電子郵件"、multiple(可以輸入多個,逗號分隔) 必須輸入:required="true" 新增驗證:自動驗證,跟普通的沒什麼區別,當輸入不是電子郵件的時候,驗證不通過並有提示
新增類型: type="tel" 新增屬性:placeholder="請輸入區碼 + 電話號碼或手機" 必須輸入:required="true" 新增驗證:pattern="[0-9]{10}" 自訂正則 錯誤提示:title="請輸入有效電話或手機號碼"
新增類型: type="url" 新增屬性:placeholder="請輸入網址" 新增驗證:自動驗證
新增類型: type="search" 新增屬性:placeholder="請輸入搜尋關鍵字"
新增類型: type="range" 數字選擇器 新增屬性:min(最小值)、max(最大值)、step(每次增加) 預設值:value="50"
新增類型: type="color" 顏色選擇器 預設值:value="#ff0000"
關於日期時間的輸入,也有一些方便的類型可用,但不是所有瀏覽器都適用,例如 : datetime : 顯示完整日期 datetime-local : 顯示完整日期,不含時區 time : 顯示時間,不含時區 date : 顯示日期 week : 顯示周 month : 顯示月
上面的範例是HTML5在表單中的一些應用,ECSHOP 模板用到表單的地方不少,因此你可以用 Braxkets 的 在檔案中尋找 ,在文字框中輸入 <form 結果會立即在視窗中列出:
點擊列表中的程式碼便能開啟該檔案進行編輯,要提醒你的是 ECSHOP 約有 60 個表單,除了很花時間外也容易出錯,同時不同的瀏覽器對 HTML5 的支援程度也不同,建議修改前做好備份外還需留意各家瀏覽器的支援狀況: