Membuat Tombol Form HTML

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:

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:

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.

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