数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时装研究
法律研究如何在 HTML 中使用具有颜色选择器的输入类型字段？
在本文中，我们将学习如何在 HTML 中使用具有颜色选择器的输入类型字段。
我们使用 <input type="color"> 字段输入颜色。它将允许我们从颜色选择器中选择一种颜色。
当我们单击默认颜色框时，将显示一个颜色选择器。在这里，您还可以使用输入字段中的值属性设置默认颜色 - 此值需要以十六进制设置，因为颜色表示为带有井号的后跟六位十六进制值。
语法
以下是 HTML 中使用带颜色选择器的输入类型字段的语法。
<input type="color" >
示例
以下是 HTML 中使用带颜色选择器的输入类型字段的示例程序。
<!DOCTYPE html> <html> <body> <form > <label for="onecolor">Select color:</label> <input type="color" id="onecolor" name="onecolor" value="#ff0000"><br><br> <input type="submit"> </form> </body> </html>
示例
以下是另一个在 HTML 中使用具有颜色选择器的输入类型字段的示例程序。
<!DOCTYPE html> <html> <head> <title>HTML input color</title> </head> <body> <form action = "" method = "get"> Select which color you want for your website:<br><br> <input type="color" name="favcolor" value="#FFFFF"><br> <input type="submit" value="submit"> </form> </body> </html>
单击颜色选择器框后，我们可以选择我们想要的颜色。
示例
以下是另一个在 HTML 中使用具有颜色选择器的输入类型字段的示例程序。
<!DOCTYPE html> <html> <center> <body> <h1>How to use input type field with the color picker in HTML?</h1> <style> input[type=color] { width: 10%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid Blue; border-radius: 4px; } </style> <form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br> <input type="submit"> </form> <p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 versions.</p> </body> </center> </html>
单击颜色选择器框后，我们可以选择我们想要的颜色。
更新于：21-11-2022
2K+ 查看次数
广告