Главная » Все про HTML » Input color в HTML5

Input color в HTML5

2016-12-06 / Вр:10:55 / просмотров: 8432

В этой статье я покажу несколько трюков, как можно использовать input color в HTML5.
Возможно, вам пригодится, если вы надумаете делать собственную CMS для сайта или онлайн сервис для подбора цвета, либо форму отправки заказа.

С помощью input color в HTML5 на веб-странице можно создать поле для выбора цвета (как палитра).
Вот так это будет выглядеть в HTML:

<input ENGINE="color"/>

В результате вы увидите:

При нажатии на квадратик, откроется окно для выбора цвета:

Input color в HTML5

Атрибуты для input color

disabled – блокировка поля для выбора цвета (disabled="disabled")
list – атрибут для создания палитры с вашими вариантами цветов

Input color в HTML5

name – имя поля
value – значение, которое будет отправляться (value="#cccccc")

Пример:

<input type="color" list="colorList" name="idColor" id="idColor" value="#cc0000">
<datalist id="colorList">
<option value="#ff0000" label="Красный">
<option value="#008000" label="Зелёный">
<option value="#0000ff" label="Синий">
<option value="#ffffff" label="Белый">
<option value="#cccccc" label="Серый">
</datalist>

Результат:

Также можно вывести код HEX цвета на веб-странице.
Да, тут уже без javascript или php не обойтись.
Буду использовать javascript.
Выведем значение из атрибута value:

JS:

<script>
window.oninput = function oninputColor() {
var idColor = document.getElementById('idColor').value;
document.getElementById('rezultatColor').innerHTML = idColor;
}
</script>

* Код вставить между тегами <head></head>

HTML (поле для выбора цвета):

<fieldset>
<legend><b>Выберите ваш любимый цвет</b></legend>
<input type="color" list="colorList" name="idColor" id="idColor" value="#cc0000">
<datalist id="colorList">
<option value="#ff0000" label="Красный">
<option value="#008000" label="Зелёный">
<option value="#0000ff" label="Синий">
<option value="#ffffff" label="Белый">
<option value="#cccccc" label="Серый">
</datalist>
</fieldset>

* Вставлять нужно между тегами <body></body>
* Если вам нужно добавить цвета, используйте вот такой шаблон (разместить между тегами <datalist></datalist>):

<option value="#код цвета" label="название цвета">

HTML (вывод результата на веб-странице):

<output id="rezultatColor"></output>

* Вставлять нужно между тегами <body></body>

Вот готовый код:

<!DOCTYPE html>
<html>
<head>
<title>Input color в HTML5 на BlogGood.ru</title>
<meta charset="utf-8">

<script>
window.oninput = function oninputColor() {
var idColor = document.getElementById('idColor').value;
document.getElementById('rezultatColor').innerHTML = idColor;
}
</script>

</head>
<body>

<fieldset>
<legend><b>Выберите ваш любимый цвет</b></legend>
<input type="color" list="colorList" name="idColor" id="idColor" value="#cc0000">
<datalist id="colorList">
<option value="#ff0000" label="Красный">
<option value="#008000" label="Зелёный">
<option value="#0000ff" label="Синий">
<option value="#ffffff" label="Белый">
<option value="#cccccc" label="Серый">
</datalist>
<output id="rezultatColor"></output>
</fieldset>
</body>
</html>

Результат будет вот таким:

Выберите ваш любимый цвет

Если нужно сделать, чтобы при клике на кнопку выводился код HEX цвета на веб-странице, тогда можно воспользоваться вот таким кодом:

JS:

<script>
function inputColor (){
var value, result;
value = document.getElementById("input_color_value");
result = document.getElementById("input_color_result");
click = document.getElementById("input_color_click");
click.addEventListener('click', function(){
result.innerHTML = value.value;
});
}
inputColor();
</script>

HTML:

<span id="input_color_result"> #000000 </span>
<input id="input_color_value" type="color" />
<input type="button" id="input_color_click" style=" border:1px solid #000; background: #999; color: #000; padding: 5px;" value="Получить результат" >