Как создать поле ввода Color Picker в HTML?
В этой статье мы узнаем о палитре цветов HTML и поймем ее реализацию на примере. Элемент <input> типа color в HTML предоставляет пользователю интерфейс для выбора цвета из палитры цветов по умолчанию для интерфейса или создания собственного цвета, задав желаемое значение в поле RGB.
Синтаксис:
<input type="color" value="#228c4e">
- type : указывает тип отображаемого элемента <input>. Значение по умолчанию — текст.
- value : Он указывает значение элемента, с которым он используется для указания начального значения входного элемента.
Подход:
- Объявите тег <input> внутри тега <body>.
- Используйте атрибут type с элементом <input>.
- Определите для атрибута type значение «color».
Пример 1. В этом примере мы разместим палитру цветов по умолчанию.
Вывод: значение по умолчанию для палитры цветов — #000000 (черный). Пользователь может указать свой собственный оттенок палитры цветов с помощью атрибута value.
Пример 2. В этом примере мы установим зеленый цвет по умолчанию с помощью атрибута value.
Вывод: значение текста в полях RGB может быть изменено в любое время в зависимости от удобства, и будет сгенерирован новый цвет.
Поддерживаемые браузеры:
- Гугл Хром 20.0
- Microsoft Edge 14.0
- Фаерфокс 29.0
- Опера 12.0
- Сафари 12.1