Dengan menggunakan gambar untuk tombol Form HTML seperti: submit, search, send dll memang akan kelihatan lebih menarik.
Bagaimana cara membuatnya? ikuti langkah-langkah berikut ini.
Untuk tombol pada Form HTML, kode untuk menuliskannya adalah:
<input type="submit" value="Tombol">Untuk menggunakan gambar kita cukup mengubah kodenya menjadi:
<input type="image" src="contoh.jpg"> Untuk membuat gambar, kita bisa menggunakan program grafik seperti Photoshop atau Corel Photopaint atau bisa juga mencarinya di Internet dengan kata kunci free button. BTW, Google search yang dibawah berfungsi lho, kenapa ngak sekalian dicoba?
Gambar tersebut harus berada tepat ditengah dengan dikelilingi oleh kekuatan warna yang sama pada setiap sisinya sehingga akan mudah nantinya untuk menyesuaikan dengan warna latar belakang website kita, berikut adalah contoh sebuah gambar tombol:
Kita akan menggunakan Google Search sebagai contoh dalam pelajaran ini.
Berikut adalah Google Search dengan menggunakan table dan masih menggunakan tombol standar, tulisan yang tebal adalah merupakan input untuk tombol pada form ini:
<form action="http://www.google.com/search" method="get">
<table border="0" cellpadding="2" width="180">
<tr>
<td>
<input type="text" maxlength="30" name="q" size="18">
<input type="hidden" name="hl" value="en">
</td>
<td valign="middle">
<input type="submit" name="button" value="Go">
</td>
</tr>
</table>
</form>Selanjutnya kita akan memasukkan gambar, agar sesuai dengan warna gambar tadi maka kita harus membuat warna yang sama pada latar belakang tabel atau halaman website, jadi kita harus mengetahui kode dari warna tersebut kemudian masukkan ke “bgcolor” seperti dibawah.
<form action="http://www.google.com/search" method="get">
<table bgcolor="#B0D8E2" border="0" cellpadding="2" width="180">
<tr>
<td>
<input type="text" maxlength="30" name="q" size="18">
<input type="hidden" name="hl" value="en">
</td>
<td valign="middle">
<input type="image" name="button" src="go.jpg">
</td>
</tr>
</table>
</form>Dan hasil dari Form diatas adalah sebagai berikut:
Jika anda tidak ingin menggunakan table, anda bisa menggunakan kode dibawah ini.
Code HTML:
<div id="google-search">
<form action="http://www.google.com/search" method="get">
<input type="text" class="s-text" maxlength="30" name="q" size="18" />
<input type="hidden" name="hl" value="en" />
<input type="image" class="s-images" name="button" alt="Search" src="go.jpg" />
</form>
</div>#google-search {
width: 180px;
background: #B0D8E2;
height: 28px;
margin: 0;
padding: 2px;
}
#google-search .s-text {
float: left;
height: 18px;
margin: 4px;
padding: 0;
border: 1px solid #B0D8E2;
background: #fff;
}
#google-search .s-images {
float: right;
margin: 0;
padding: 0;Tips untuk mengetahui Kode Warna dengan Ms FrontPage
Lebih lanjut mengenai kode warna, untuk mengetahui kode warna dari image, anda bisa menggunakan Ms ProntPage, yang saya pernah coba adalah Ms FrontPage XP Professional, caranya adalah buka Program tersebut kemudian kecilkan jendelanya sehingga anda bisa melihat gambar yang akan anda cari kode warnanya. Kemudian pada tombol untuk mengubah font color, klik More Color:
Maka akan tampil jendela seperti berikut:
Kemudian tekan tombol “Select” dengan alat ini tujukan ke warna gambar yang ingin anda ketahui kode warnanya, jadi tool ini bisa bekerja walaupun diluar dari jendela Ms ProntPage tersebut, asal jangan diluar layar monitor.
Setelah posisinya sudah tepat ke warna yang diinginkan kemudian klik, maka kode dari warna tersebut akan terlihat di “value” seperti contoh gambar diatas adalah: Hex={E8,E6,D7}maka sebagai hasil akhirnya kita cukup ambil angka dan huruf yang ada diantara kurung dan menghapus tanda koma kemudian menambahkan tanda “#” sehingga menjadi: #E8E6D7, dan tinggal memasukkannya ke kode html.
Berminat, Silahkan Dicoba. Semoga Bermanfaat.
