首頁 > HTML5、前台相關文章 > 005、ECSHOP 使用 HTML5表單功能
點擊圖片免費AI生圖

005、ECSHOP 使用 HTML5表單功能

2017-09-26 276

相關文章

HTML5 對網頁的表單功能做了增強,對輸入型控制項增加了許多功能

新增類型: 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 結果會立即在視窗中列出:
點擊圖片可以放大檢視
005、ECSHOP 使用 HTML5表單功能


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


如果你對005、ECSHOP 使用 HTML5表單功能有任何問題請到討論區發帖。