如何在 HTML 中使用带有颜色选择器的输入类型字段？

在本文中，我们将学习如何在 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>

点击颜色选择器框后，我们可以选择所需的颜色。

更新于: 2022-11-21

2K+ 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.