HTML Forms – Part 7 – Input type color control

This is part 7 of HTML Form series. You can read previous parts here. In this part you will learn about input type color control.

Contents hide
input type=”color”
Example

input type=”color”

The <input> type “color” is used to define an input field which contains a colour.

The <input type="color"> defines a color picker.

It allows the user to specify the colour by the visual colour interface on a browser.

The “color” type only supports color value in hexadecimal format, and the default value is #000000 (black).

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show a Color Picker</title>
</head>

<body>
    <h1>Show a Color Picker</h1>

    <form>
        <label for="favcolor">Select your favorite color:</label>
        <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br>
    </form>
</body>

</html>
Color Picker Example