/html/input/type/color:> Средство выбора цвета_

Значение color

Синтаксис

HTML
<input type="color">

Описание

Тип color (от англ. "color" ‒ «цвет») создаёт поле выбора цвета.

Внешний вид

  • Внешний вид поля выбора цвета ‒ поле выбора цвета;
  • Внешний вид поля выбора цвета с фокусом ‒ фокус;
  • Внешний вид поля выбора цвета с наведённым на него курсором ‒ наведение курсора;
  • Внешний вид активированного поля выбора цвета ‒ активация.

Примечание

  • Цвет, выбранный с помощью поля выбора цвета, присваивается данному элементу в виде шестнадцатеричного значения атрибута «value».
  • На сервер вместе с остальными данными формы отправляется только имя и значение поля выбора цвета.

Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация

Верс. Раздел
HTML
2.0 Input Field: INPUT
3.2 INPUT text fields, radio buttons, check boxes, ...
4.01 17.4.1 Control types created with INPUT
5.0 4.10.5.1.11 Color state (type=color)
5.1 4.10.5.1.15. Color state (type=color)
XHTML
1.0 Extensible HyperText Markup Language
1.1 Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete
Автозаполнение значения поля выбора цвета.
autofocus
Автоматческая фокусировка на поле выбора цвета после полной загрузки страницы.
disabled
Блокировка поля выбора цвета.

Внешний вид заблокированного поля выбора цвета disabled="disabled"

form
Присоединение поля выбора цвета к форме.
list
Создание списка рекомендованных вариантов выбираемого цвета.

Внешний вид поля выбора цвета c вариантами рекомендованных цветов

name
Присвоение имени (идентификатора) полю выбора цвета.
value
Указывает значение отправляемое на сервер или используемое скриптами.

Внешний вид поля выбора цвета с указанным цветом value="#008614"

Значение по умолчанию: «#000000» (чёрный цвет).

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Значение color (input-type)</title>
</head>
<body>
<h1>Пример с средством выбора цвета "type=color"</h1>
<p>Выберите ваш любимый цвет:</p>
<p><input type="color" list="colorList"></p>
<datalist id="colorList">
<option value="#ff0000" label="Красный">
<option value="#008000" label="Зелёный">
<option value="#0000ff" label="Синий">
</datalist>
</body>
</html>
Значение color (input-type)