BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

Input color в HTML5

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

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

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

<input type="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="Получить результат" >

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Один ответ на комментарий - Input color в HTML5

  1. Людмила

    Вы правы, для определенных бизнес-направлений подобная кнопочка будет очень полезной фишкой.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки:

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 747
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4092