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

005、ECSHOP 使用 HTML5表單功能 超大 稍大 微大

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

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


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


只有本站虛擬主機會員才能對文章發表問題
如果你是本站虛擬主機會員請先至會員中心首頁綁定主機帳號
其他會員請至留言板提問!