type 屬性規定input 元素的型別。
註釋：該屬性不是必需的，但是我們認為您應該始終使用它。
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>color拾取器</title></head><body> <input type=color id=color></body><script> document.querySelector(#color).onchange = function () { document.getElementById('color').click(); // 必須新增觸發click事件否則不能透過點擊來確定按鈕觸發更改顏色document.body.style.background = this.value; }</script></html>下面看下HTML 5 <input> type 屬性屬性值
| 值 | 描述 |
|---|---|
| button | 定義可點擊的按鈕（大多與JavaScript 使用來啟動腳本） |
| checkbox | 定義複選框。 |
| color | 定義拾色器。 |
| date | 定義日期欄位（帶有calendar 控制項） |
| datetime | 定義日期欄位（帶有calendar 和time 控制項） |
| datetime-local | 定義日期欄位（帶有calendar 和time 控制項） |
| month | 定義日期欄位的月（帶有calendar 控制項） |
| week | 定義日期欄位的周（帶有calendar 控制項） |
| time | 定義日期欄位的時、分、秒（帶有time 控制項） |
| 定義用於e-mail 位址的文字字段 | |
| file | 定義輸入欄位和瀏覽... 按鈕，供文件上傳 |
| hidden | 定義隱藏輸入字段 |
| image | 定義圖像作為提交按鈕 |
| number | 定義帶有spinner 控制項的數字字段 |
| password | 定義密碼欄位。字段中的字元會被遮蔽。 |
| radio | 定義單選按鈕。 |
| range | 定義帶有slider 控制項的數字欄位。 |
| reset | 定義重置按鈕。重設按鈕會將所有表單欄位重設為初始值。 |
| search | 定義用於搜尋的文字欄位。 |
| submit | 定義提交按鈕。提交按鈕向伺服器發送資料。 |
| tel | 定義用於電話號碼的文字欄位。 |
| text | 預設.定義單行輸入字段，使用者可在其中輸入文字。預設是20 個字元。 |
| url | 定義用於URL 的文字欄位。 |
以上所述是小編跟大家介紹的HTML5 input新增type屬性color顏色拾取器的實例代碼，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！