В этой статье я покажу несколько трюков, как можно использовать input color в HTML5.
Возможно, вам пригодится, если вы надумаете делать собственную CMS для сайта или онлайн сервис для подбора цвета, либо форму отправки заказа.
С помощью input color в HTML5 на веб-странице можно создать поле для выбора цвета (как палитра).
Вот так это будет выглядеть в HTML:
<input ENGINE="color"/>
В результате вы увидите:
При нажатии на квадратик, откроется окно для выбора цвета:
Атрибуты для input color
disabled – блокировка поля для выбора цвета (disabled="disabled")
list – атрибут для создания палитры с вашими вариантами цветов
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="Получить результат" >
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222519 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187696 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Один ответ на комментарий - Input color в HTML5
Добавить комментарий
Метки: html
Вы правы, для определенных бизнес-направлений подобная кнопочка будет очень полезной фишкой.