HTML input type="color": Color Selection

A form should feel easy to use. The visitor sees a question, gives an answer, and needs to know what will happen next.

What You Need to Know

This example uses the browser’s built-in color control, so you do not have to create a picker from scratch.

In this example: choose a profile theme color.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<form action="/preferences" method="get">
    <label for="selected-value">Theme color</label>
    <input id="selected-value" name="theme-color" type="color" value="#3366cc" required>
    <button type="submit">Save choice</button>
</form>

Let’s Read the Code

type: Type changes what sort of control or resource the browser uses.
<form>: The form groups controls and identifies where submitted data goes.
<label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
for: For connects a label or output with a control by ID.

What the example shows: Choose a favorite color and notice that the submitted value is a color string such as #3366cc.

What Happens in the Browser?

The HTML controls work in the browser, but saving an answer requires the example action path to be handled by a real server.

Where does the answer go? The example uses the submitted name(s) theme-color. Those names help the receiving server identify each answer. A label is for people; a name attribute is for the form data; an ID connects elements in the page.

Your Turn

Change the value from #3366cc to another valid color value, then submit and read the URL query string.

Common Beginner Mistakes

Copying the example without giving the fields a clear label and a usable name.
Different browsers can show different color-picker interfaces; the important part is the control value.

Key Takeaways

A control needs a clear label and, when submitted, a meaningful name and value.
type: Type changes what sort of control or resource the browser uses.
Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.