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

htmlweb developmentfront end technology更新于 2024/7/4 8:44:17

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