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;
0 komentar:
Posting Komentar