005、ECSHOP 使用 HTML5表單功能_HTML5、CSS3、其他_ECSHOP繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此

目前位置: 首頁 > HTML5、CSS3、其他 > 005、ECSHOP 使用 HTML5表單功能

ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此發表於： 2017-09-26

新增類型： 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 結果會立即在視窗中列出：
使用 HTML5 表單功能

點擊列表中的程式碼便能開啟該檔案進行編輯，要提醒你的是 ECSHOP 約有 60 個表單，除了很花時間外也容易出錯，同時不同的瀏覽器對 HTML5 的支援程度也不同，建議修改前做好備份外還需留意各家瀏覽器的支援狀況：
使用 HTML5 表單功能

本站提供ECSHOP技術支援，是網路開店最佳選擇