Membuat Custom Color Picker pada Form

Custom Color Picker disini dimaksudkan sebagai Form Input pemilihan warna, entah itu sebagai background chooser untuk Form Pendaftaran ataupun sebagai Background Theme biasa.

Widget seperti ini memang populer, selain mempermudah bagi pengguna dan pengunjung, pun semakin menambah Style tertentu pada suatu Website, sehingga lebh atractive.. :D

Sebenarnya ini adalah pengaplikasian dari JS Color Dot Com :) .
Proses bikinnya cukup mudah dan Simple, cuma butuh file javascript "jscolor.js" dan sedikit ketrampilan membuat Form, untuk file jscolor.js nya bisa didownload sendiri di "JSCOLOR.COM"

Berikut Screen Shoot nya

Lihat Contoh yang sudah di Upload : http://wolypop.tk/colorpick/

Berikut Source Code :

<script type="text/javascript" src="jscolor.js"></script>
<h1> Color Pick</h1>
<form action='index.php' method='POST'>

Nama Anda: <input name='nama' ><br />
Warna Text&nbsp;: <input class="color" name='ctext' value="ffffff"><br />
Background: <input class="color" name='btext' value="000000"><br />
<input type='submit' name='simpan' value='Terapkan'>
  </form>
  <?php
  if(isset($_POST['nama'])){
  $nama=$_POST['nama'];
  $ctext=$_POST['ctext']; //warna text
  $btext=$_POST['btext']; //warna background
  ?>
  <h1>
  Selamat Datang
  <span style='background-color:#<?=$btext?>;
    color:#<?=$ctext;?>'>
  <?=$nama;?>
  </span></h1>
<?php
  }
  ?>

Enjoy :)

Share this

typhun