Input Warna di Form HTML

Ketika kita membuat aplikasi berbasis web, kadang client meminta input yang tidak standar, sebagai contoh input warna interaktif (baca: color picker). bagaimana cara mengimplementasikannya kedalam form HTML? caranya mudah, cukup gunakan plugin javascript bernama jscolor. Library ini akan memberikan fasilitas color picker ke input textfield sehingga user bebas memilih warna yang ingin diterapkan. Jika anda belum punya gambaran, anda bisa melihat Template desainernya Blogger.

Langkah untuk membuat input color picker ternyata cukup sederhana

1. include script jscolor.js sebelum form
2. pada bagian input warna tambahkan class=color

Untuk lebih jelas bagaimana cara memakainya, anda cukup melihat skrip sederhana berikut:

<script type="text/javascript" src="jscolor.js"></script>
<h1> Demo JScolor </h1>
<form action='demo.php' method='POST'>

Nama Anda: <input name='nama' ><br />
Warna Text&nbsp;: <input class="color" name='ctext' value="66ff00"><br />
background: <input class="color" name='btext' value="66ff00"><br />
<input type='submit' name='simpan' value='simpan'>
	</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
	}
	?>

Hasil dari script diatas akan tampil seperti ini

untuk melihat demonya secara langsung, silahkan klik disini