Menggunakan gambar sebagai tombol pada Form HTML

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">

Maka hasilnya adalah seperti berikut:

Untuk menggunakan gambar kita cukup mengubah kodenya menjadi:

<input type="image" src="contoh.jpg">

Dimana src adalah lokasi dan nama dari gambar (image) yang akan kita gunakan.

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 d ibawah berfungsi lho, kenapa ngak sekalian dicoba?

Gambar tersebut harus berada tepat di tengah 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="https://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>

Hasil dari kode diatas adalah sebagai berikut:

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="https://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>

Tulisan yang tebal merupakan kode yang di tambah dan di ubah dari kode sebelummya.
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="https://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>

Code CSS:

#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;

Berikut adalah hasilnya: