如何使用HTML5中的新增幾種input設定type型別

2019-12-11 09:39:35

在HTML5中，input輸入框中的type屬性，除了可以是text、radio、checkbox、button之外，還可以使用color、date、email等。下面利用幾個範例說明新增的input的type屬性，操作如下：

第一步，開啟HBuilder編輯工具，新建靜態頁面input.html；在<body></body>插入一個input，type值為color，如下圖所示：

第二步，在<style></style>標籤內，利用ID選擇器設定input的樣式，如下圖所示：

第三步，儲存程式碼並在瀏覽器預覽介面效果，點選輸入框，可以彈出一個顏色選擇器，如下圖所示：

第四步，將input中的type屬性值由color改為date，這裡使用date日期，如下圖所示：

第五步，再次儲存並預覽介面，點選input輸入框，可以發現出現了日期，如下圖所示：

第六步，最後將type屬性值date改為datetime，儲存程式碼並預覽效果，如下圖所示：