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

go

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>

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

Tulisan yang tebal merupakan kode yang ditambah dan diubah 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="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>

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:

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:

front_page1

Maka akan tampil jendela seperti berikut:

front_page2

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.

Kalau saya sendiri biasa mencari kode warna tersebut dengan menggunakan CSS editor seperti Top Style Lite, sangat cocok apalagi jika web kita menggunakan CSS.

Posted on May 18th, 2008 in Belajar HTML by Masim man

Post a comment

12 Responses to “Menggunakan gambar sebagai tombol pada Form HTML”

  1. cheaperbuy said:

    Nice site! Thank you!

  2. tonski said:

    muantabb bos ilmunya, ditambah lagi dong..
    klik disini

  3. echa said:

    keren!!
    banyak belajar nih kayaknya dari sini.
    tpi aku mau tanya dong,
    cara buat smiley di kotak komentar blog gimana ya ?

  4. nanang said:

    makasih mas atas tutoriallnya
    salam kenal ya ..

    free download mp3, chords and song lyrics

  5. danz said:

    wah post.y keren gan makasih inf0.y

  6. lugist said:

    terimakasih infonya gan… bermanfaat bnget bagi saya… 🙂

  7. sinta said:

    Terimakasih, tutorialnya bermanfaat banget …

    Kamu butuh tutorial yang menggunakan bahasa Indonesia? Pusing cari dimana? Kunjungi Kumpulan Tutorial Gratis Tutorial berbahasa Indonesia, yang bisa membantu kamu melakukan aktivitas sehari-hari

  8. daman said:

    Tanks bnget ini
    udh bagi ilmu nya
    bermanfaat buat ane pelajari

  9. Osmp3.Net said:

    mantap bro 😀 ilmunya bermanfaat

  10. inclick.xyz said:

    makasih ilmu dari dasar-dasar html tentang membuat tombol button

Back to top