1 Тема від VTrim Востаннє редагувалося VTrim (30.11.2014 18:25:23)

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Тема: HTML5 Вибір кольору

Дуже зручна штука для зміни кольору якогось елементу на сторінці або ж для відправки на сервер та подальшої обробки.
Не потрібно вписувати значення кольорів вручну,а вибрати самому,через клік і вибір в таблиці.
Це новий тип поля в HTML - color

<input  type='color' name='ColorPage' />

Ім'я вибраного кольору генерується в HEX значенні,наприклад #FFFAFA

Наведу приклад використання через зміну фону сторінки (на JS)

<!DOCTYPE html> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML5 форма color</title>

        <style type="text/css">
            body {
                background: #FFFAFA;
            }
        </style>
        <script type="text/javascript">

             function SetColorPage()
             {
             var ColorPage = document.getElementById('ColorPage');
             document.body.style.background = ColorPage.value;
             }
        </script>
    </head>

    <body> 
         <form> 
            <b>Виберіть колір фону сторінки</b>
             <br />
             <input  type='color'  name='ColorPage' id='ColorPage'/>
            <input type="button" onclick="SetColorPage();" value="Застосувати"/>
         </form> 
    </body> 
</html>

2 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Re: HTML5 Вибір кольору

Відправка на сервер.
Варіант з PHP

<?php 

echo isset($_POST['ColorValue']) ? 'Вибрали колір: '.$_POST['ColorValue'].'<br/>' : null;

echo '<form method="POST" action="?">
     Виберіть колір: <input type="color" name="ColorValue" />
     <input type="submit" value="Відправити" />
     </form>';

3 Відповідь від Blast

  • Blast
  • Blast
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.01.2014
  • Повідомлень: 1 099
    • Репутація: 156

Re: HTML5 Вибір кольору

VTrim написав:

Відправка на сервер.
Варіант з PHP

<?php 

echo isset($_POST['ColorValue']) ? 'Вибрали колір: '.$_POST['ColorValue'].'<br/>' : null;

echo '<form method="POST" action="?">
     Виберіть колір: <input type="color" name="ColorValue" />
     <input type="submit" value="Відправити" />
     </form>';

Прошу вибачення за оффтоп. Потрібно буде твоя консультація з приводу безпеки.
Пишу тут об не забути.

4 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 333
    • Репутація: 2304

Re: HTML5 Вибір кольору

Blast написав:
VTrim написав:

Відправка на сервер.
Варіант з PHP

<?php 

echo isset($_POST['ColorValue']) ? 'Вибрали колір: '.$_POST['ColorValue'].'<br/>' : null;

echo '<form method="POST" action="?">
     Виберіть колір: <input type="color" name="ColorValue" />
     <input type="submit" value="Відправити" />
     </form>';

Прошу вибачення за оффтоп. Потрібно буде твоя консультація з приводу безпеки.
Пишу тут об не забути.

Ok