在本文中，我们将学习如何在HTML中使用带有颜色选择器的输入类型字段。
我们使用<input type="color">来创建带有颜色的输入字段。它允许我们从颜色选择器中选择一种颜色。
当我们单击默认颜色框时，将看到颜色选择器。在这里，您还可以使用输入字段中的 value 属性设置默认颜色 - 该值需要以十六进制设置，因为颜色表示为主题标签后面的六位十六进制值。
以下是在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>
点击颜色选择框后，我们可以选择我们想要的颜色。
