HTML5中input新增type屬性color顏色拾取器介紹

發(fā)布時(shí)間：2020-04-16 10:38:34 來(lái)源：億速云閱讀：494 作者：小新欄目：web開(kāi)發(fā)

今天小編給大家分享的是HTML5中input新增type屬性color顏色拾取器介紹，很多人都不太了解，今天小編為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

定義和用法

type 屬性規(guī)定 input 元素的類型。

注釋：該屬性不是必需的，但是我們認(rèn)為您應(yīng)該始終使用它。

HTML5中input新增type屬性color顏色拾取器介紹

<!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(); // 必須添加觸發(fā)click事件否則不能通過(guò)點(diǎn)擊確定按鈕觸發(fā)更改顏色
    document.body.style.background = this.value;
  }
</script>
</html>

下面看下HTML 5 <input> type 屬性

屬性值

值	描述
button	定義可點(diǎn)擊的按鈕（大多與 JavaScript 使用來(lái)啟動(dòng)腳本）
checkbox	定義復(fù)選框。
color	定義拾色器。
date	定義日期字段（帶有 calendar 控件）
datetime	定義日期字段（帶有 calendar 和 time 控件）
datetime-local	定義日期字段（帶有 calendar 和 time 控件）
month	定義日期字段的月（帶有 calendar 控件）
week	定義日期字段的周（帶有 calendar 控件）
time	定義日期字段的時(shí)、分、秒（帶有 time 控件）
email	定義用于 e-mail 地址的文本字段
file	定義輸入字段和 "瀏覽..." 按鈕，供文件上傳
hidden	定義隱藏輸入字段
image	定義圖像作為提交按鈕
number	定義帶有 spinner 控件的數(shù)字字段
password	定義密碼字段。字段中的字符會(huì)被遮蔽。
radio	定義單選按鈕。
range	定義帶有 slider 控件的數(shù)字字段。
reset	定義重置按鈕。重置按鈕會(huì)將所有表單字段重置為初始值。
search	定義用于搜索的文本字段。
submit	定義提交按鈕。提交按鈕向服務(wù)器發(fā)送數(shù)據(jù)。
tel	定義用于電話號(hào)碼的文本字段。
text	默認(rèn)。定義單行輸入字段，用戶可在其中輸入文本。默認(rèn)是 20 個(gè)字符。
url	定義用于 URL 的文本字段。

總結(jié)

以上就是HTML5中input新增type屬性color顏色拾取器介紹的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來(lái)億速云行業(yè)資訊！

向AI問(wèn)一下細(xì)節(jié)

HTML5中input新增type屬性color顏色拾取器介紹

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽