Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Type color значение атрибута поля ввода input

Поддержи проект!!! smile

Что такое type color html, Type color - это одно из значений тега input.

Тип color в поле ввода input

  1. Что такое type color html,
  2. Пример использования type color.
  3. Как сделать кнопку выбора цвета type color.
  1. Что такое type color html.

    У поля ввода есть типы передаваемых данных type, с разными значениями input

    Одно из таких значении : "type color" .

    Синтаксис type color html.

    <input type="color">

    Характеристики типа color:

    "type color" - поддерживается не всеми браузерами, поэтому, нам понадобится таблица, не буду её здесь повторять, если захотите, то сможете посмотреть, какие браузеры поддерживают type color html см. здесь

    Как использовать данный type color на сайте.

    HTML :

    Покажем поле ввода с type="color".

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

    Как использовать данный  type color на сайте.

    Форма(type="color") выбора цвета должна выглядеть так :

    Далее форма form.

    <form method="post">
    <input name="example" type="color">
    <input name="example_submit" type="submit" value="Отправить">
    </form>

    И еще одно поле ввода с другим типом submit

    PHP :

    Вам потребуется метод post.

  2. Пример использования type color.

    Нам нужно условие с post получением данных из type color

    if($_POST['example_submit']) { $result = 'Вы выбрали цвет: <div style="color:'.strip_tags($_POST['example']).'">'.strip_tags($_POST['example']).'</div>' ;}

    echo $result;

    Соберем весь код вместе:

    Html :
    <form method="post">
    <input name="example" type="color">
    <input name="example_submit" type="submit" value="Отправить">
    </form>
    Php :

    if($_POST['example_submit']) { $result = 'Вы выбрали цвет: <div style="color:'.strip_tags($_POST['example']).'">'.strip_tags($_POST['example']).'</div>' ;}

    echo $result;

    Результат использования type color:

    Выбираем цвет из палитры цветов type color и нажимаем отправить.

    Если цвет не выбран, то отправится значение по умолчанию("#000000").

  3. Как сделать кнопку выбора цвета type color.

    Если вы собираетесь использовать type color, то столкнетесь с такой проблемкой, что при отправлении type color по умолчанию, всегда будет отправлять цвет "#000000".

    Как сделать выбор цвета!?type color

    Решение очень простое:

    Палитру цветов делаем недоступной по умолчанию(display:none).

    Но вместо неё ставим checkbox, по нажатию на неё отправляем в тег с type color display block + в php проверяем нажатие на кнопку checkbox

    И уже внутри выше приведенного условия в php checkbox - получаем данные из type color


Последняя дата редактирования : 15.01.2021 11:41
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
color typeinput type colorhtml type colortype text html colortype color csscolor type cinput type text colorinput type color stylelist style type colortext color type color defaultinput type color valuecolor type test

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
29/04/2021 01:46
Реанимирована страница о "шаблонах в DREAMWEAVER"!Эта программа была основной для редактирования моих сайтов на…
подробнее.
Марат :
23/04/2021 04:35
Страница обновлена - добавлен скрипт - всё в одном. Скачивание картинку по…
подробнее.
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.