input ( type=color ) element
If you don’t know what an element is or how you must use it, I recommend you read the » HTML tags and attributes» tutorial that you can find in the HTML tutorials section.
Description
The input element, having the «color» value in its type attribute, represents a field for a color input. In supporting browsers color fields are usually represented by controls that enable users to change its value in a graphical way (commonly color wells), instead of having to input the color code directly as a string.
Upon submission, supporting browsers convert the input data into a string representing a color. The rules to compose a valid color are described below.
Colors
A color syntax is composed by:
- A numeral or hash sign character («#»).
- Two lowercase hex digits (in the ranges «0» to «9» and «a» to «f») representing the red component.
- Two lowercase hex digits (in the ranges «0» to «9» and «a» to «f») representing the green component.
- Two lowercase hex digits (in the ranges «0» to «9» and «a» to «f») representing the blue component.
Browser support for color fields is incomplete. To improve compatibility, authors may have to rely on scripts to provide advanced controls and to check values conformance before submission.
Examples
In the first example we’ll only create a form with a color control. Here you’ll be able to note the functionality provided by your browser (if any) for the control.
action="../../form-result.php" method="post" target="_blank"> Profile main color: type="color" name="profilemaincolor"> type="submit" value="Send data"> Now we’ll provide a list of predefined suggested colors for the user to pick, besides the default color picker system. For this purpose we’ll use a datalist , that will be linked to our control thanks to the matching of the id attribute in the list with the list attribute in the control.
Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
action="../../form-result.php" method="post" target="_blank"> Profile secondary color: type="color" name="profilesecondarycolor" list="profilecolorslist"> type="submit" value="Send data"> >"profilecolorslist"> value="#00ffff"> value="#ff00ff"> value="#ffff00"> value="#ffaa00"> Attributes
Specific attributes
autofocus
A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value «autofocus» or the empty string («»), or if it’s just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.
Paint with: type="color" name="paintcolor" autofocus> disabled
A boolean value indicating wether the control is disabled or not. If the attribute takes the value «disabled» or the empty string («»), or if it’s just present, the control will be disabled.
Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren’t sent when the form is submitted.
action="../../form-result.php" method="post" target="_blank"> Border color: type="color" name="bordercolor" disabled> type="submit" value="Send data"> form
The value of the id attribute of the form with which this control is associated to.
This attribute is new in HTML 5 and helps defining the pertenence of controls in nested or distant forms.
Background color: type="color" name="backgroundcolor" form="form1"> >"form1" action="../../form-result.php" method="post" target="_blank"> type="submit" value="Send data"> list
A token matching the value of the id attribute of the datalist this control is assopciated with. The datalist referenced by this attribute will provide a number of suggestions that users can pick to autocomplete the control.
Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.
The values provided by the datalist element must conform with the requirements of color strings.
action="../../form-result.php" method="post" target="_blank"> Frame color: type="color" name="framecolor" list="framecolorslist"> type="submit" value="Send data"> >"framecolorslist"> value="#23fd5d"> value="#f8c255"> value="#3f2ac3"> value="#adeb63"> name
A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.
Currently, the value isindex , formerly used in a special way by some browsers and included in the HTML standard, isn’t permitted in this attribute.
action="../../form-result.php" method="post" target="_blank"> Ink color: type="color" name="inkcolor"> type="submit" value="Send data"> type
A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):
- hidden: a hidden control used to send information to the server, typically managed by scripts.
- text: a control used to input a single-line piece of text.
- search: same as text but for search purposes.
- tel: a control used to provide a telephone number.
- url: a text box used to input a single and absolute URL .
- email: a control designed to edit one or more e-mail addresses.
- password: a text box for editing passwords, where the characters are represented by dots.
- date: a control to input a specific date.
- month: a control to input a specific month.
- week: a control to input a specific week.
- time: a control to input a specific time.
- datetime-local: a control to input a specific local date and time.
- number: a control to input a number.
- range: a control to input one or two numbers inside a range.
- color: a control to input a color.
- checkbox: a control to input a boolean value (true/false).
- radio: a control used to choose one single option among many.
- file: a control used to upload files to the server.
- submit: a button used to submit the form.
- image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
- reset: a button used to reset the form’s controls to their default values.
- button: a button with no default action associated.
When this attribute isn’t present, the element behaves as it would have the value «text».
type="color" name="tattoocolor"> value
An initial value for the control, that will be set when the page loads and when the reset button is pressed.
The value provided in this attribute must conform with the requirements of color strings. If this attribute isn’t present, the control takes the default initial value (black).
action="../../form-result.php" method="post" target="_blank"> Favorite color: type="color" name="favoritecolor" value="#aaff00"> type="submit" value="Send data"> type="reset" value="Reset form"> Global attributes
For information about global attributes refer to this list of global attributes in HTML 5.
Events
Global events
For information about global events refer to this list of global events in HTML 5.