hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

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

2019-11-26HTML搜搜PHP网67°c
A+ A-
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 的文本字段。

总结

以上所述就是给人人引见的HTML5 input新增type属性color色彩拾取器的全部内容,愿望能对人人的进修有所协助。更多相干教程请接见Html5视频教程!

相干引荐:

php公益培训视频教程

HTML5图文教程

HTML5在线手册

以上就是HTML5 input新增type属性color色彩拾取器的实例代码的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
HTML5 input新增type属性color色彩拾取器的实例代码【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章