HTML5 input新增type属性color色彩拾取器的实例代码【html5教程】,inputcolor,html5,拾取器

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 <input> type 属性

属性值

值	形貌
button	定义可点击的按钮（大多与 JavaScript 使用来启动剧本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地点的文本字段
file	定义输入字段和 "阅读..." 按钮，供文件上传
hidden	定义隐蔽输入字段
image	定义图象作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义暗码字段。字段中的字符会被遮盖。
radio	定义单选按钮。
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将一切表单字段重置为初始值。
search	定义用于搜刮的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
text	默许。定义单行输入字段，用户可在个中输入文本。默许是 20 个字符。
url	定义用于 URL 的文本字段。