Значение color
Синтаксис
HTML
<input type="color">
Описание
Тип color (от англ. "color" ‒ «цвет») создаёт поле выбора цвета.
Внешний вид
‒ поле выбора цвета;
‒ фокус;
‒ наведение курсора;
‒ активация.
Примечание
- Цвет, выбранный с помощью поля выбора цвета, присваивается данному элементу в виде шестнадцатеричного значения атрибута «
value». - На сервер вместе с остальными данными формы отправляется только имя и значение поля выбора цвета.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 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 | |
| 1.1 | |
Сопутствующие атрибуты
- autocomplete
- Автозаполнение значения поля выбора цвета.
- autofocus
- Автоматческая фокусировка на поле выбора цвета после полной загрузки страницы.
- disabled
- Блокировка поля выбора цвета.
disabled="disabled" - form
- Присоединение поля выбора цвета к форме.
- list
- Создание списка рекомендованных вариантов выбираемого цвета.
- name
- Присвоение имени (идентификатора) полю выбора цвета.
- value
- Указывает значение отправляемое на сервер или используемое скриптами.
value="#008614"Значение по умолчанию: «
#000000» (чёрный цвет). - Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, 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>
<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)