How to use input type field with the color picker in HTML?

HTML Web Development Front End Technology

In this article, we are going to learn how to use input type field with the color picker in HTML.

We use <input type="color"> for input fields with color. It will allow us to select a color from color picker.

A color picker will be visible when we will click on the default color box. Here, you can set the default color also with the value attribute in the input field - this value needs to be set in hexadecimal because colors are represented as six-digit hexadecimal values following a hashtag.

Syntax

Following is the syntax to use input type field with color picker in HTML.

<input type="color" >

Example

Following is the example program to use input type field with color picker in 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>

Example

Following is another example program to use input type field with color picker in 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>

After clicking on the color picker box, we can choose the color we want.

Example

Following is one more example program to use input type field with color picker in 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>