type 屬性規定 input 元素的型別。本文較詳細的為大家介紹了HTML5 input新增type屬性color顏色拾取器的實例代碼，有興趣的朋友跟著腳本之家小編一起看看吧
##定義與用法
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 type 屬性##屬性值
| 值 | 描述 |
|---|---|
| button | #定義可點擊的按鈕（大多與JavaScript 使用來啟動腳本） |
| checkbox | 定義複選框。 |
| color | 定義拾色器。 |
| date | 定義日期欄位（帶有calendar 控制項） |
| datetime | 定義日期字段（帶有calendar 和time 控制項） |
| datetime-local | 定義日期欄位（帶有calendar 和time 控制項） |
| month | 定義日期欄位的月（有calendar 控制項） |
| #week | 定義日期欄位的週（有calendar 控制項） |
| time | 定義日期欄位的時、分、秒（帶有time 控制項） |
| 定義用於e-mail 位址的文字欄位 | |
| file | #定義輸入欄位和"瀏覽..." 按鈕，供檔案上傳 |
| 定義隱藏輸入欄位 | |
| 定義圖片作為提交按鈕 | |
| 定義帶有spinner 控制項的數字欄位 | |
| 定義密碼欄位。字段中的字元會被遮蔽。 | |
| 定義單選按鈕。 | |
| 定義帶有 slider 控制項的數字欄位。 | |
| 定義重設按鈕。重設按鈕會將所有表單欄位重設為初始值。 | |
| 定義用於搜尋的文字欄位。 | |
| 定義提交按鈕。提交按鈕向伺服器發送資料。 | |
| 定義用於電話號碼的文字欄位。 | |
| 預設。定義單行輸入字段，使用者可在其中輸入文字。預設是 20 個字元。 |
定義用於 URL 的文字欄位。
#以上所述就是介紹給大家的HTML5 input新增type屬性color顏色拾取器的全部內容，希望對大家的學習有所幫助。更多相關教學請造訪Html5影片教學！
相關推薦： ######## #HTML5線上手冊######以上是HTML5 input新增type屬性color顏色拾取器的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
