Membuat Tombol Dengan Peringatan Plus Link Aktif

Membuat Tombol Dengan Peringatan Plus Link Aktif - Tombol dengan adanya kotak peringatan untuk menerangkan sebuah penjelasan sebuah teks didalamnya, setelah itu langsung menuju link aktif yang disertakan dengan menggunakan atribut onclick dan nilai alert, kotak peringatan bisa kita tampilkan.

Untuk membuat sebuah tombol kita bisa menggunakan tag HTML <button> ataupun <form> <input>, namun walupun kedua-duanya bisa kita gunakan untuk membuat sebuah tombol dengan tambahan kotak peringatan didalamnya, ada sedikit perbedaan pada saat kita muat dalam browser yang berbeda, sebagai perbandingan antara browser dengan mesin Webkit (Chrome) dan Gecko (Firefox).

Tombol Dengan Tag <button>

Untuk membuat tombol kita bisa langsung membuatnya dengan tag <button> seperti ini:

<button>Kilik Ane</button>

Atau kita bisa sertakan atribut type di dalamnya seperti ini:

<button type="button">Klik Ane</button>

Untuk menampilkan kotak peringatan setelah tombol di klik, kita tambahkan atribut onclick dengan nilai alert didalamnya sehingga menjadi seperti ini:

<button type="button" onclick="alert('Selamat Datang di Blog deZige')">Klik Ane</button>

Setelah tombol peringatan ditampilkan dan klik Ok langsung menuju link aktif yang dituju, kita bisa tambahkan tag <a> dengan nilai URL didalam tag <button> tersebut sehingga menjadi seperti iniL:

<button type="button" onclick="alert('Selamat Datang di Blog deZige')"><a href=”Alamat URL di Tuju”>Klik Ane</a></button>

Dengan script tombol seperti itu, setelah di klik akan menghasilkan kotak peringatan dan selanjutnya akan langsung menuju alamat URL yang dituju, pada mesin webkit (chrome) bisa berjalan dengan baik tapi pada mesin gecko (firefox) hanya tampil kotak peringatan tanpa menuju link yang dimaksud.

Berbeda jika kita menggunan tag <form> dan tag <input>, baik mengunakan mesin webkit ataupun gecko bisa berjalan dengan baik, setelah tampilnya kotak peringan akan langsung menuju link aktif yang dituju.

Tombol Dengan Tag <form> dan <input>

Saya kira langsung saja kita buat tombol tersebut dengan menggunakan tag <form> dan tag <input> supaya tidak panjang lebar penjelasannya.

Contoh script menggunakan tag <form> dan <input> yang berjalan dengan baik di kedua mesin browser, baik tampilnya kotak peringatan dan langsung menuju link aktif yang di tuju:

<form method="get" action="Alamat URL di Tuju">
<input onclick="alert('Selamat Datang di Blog deZige')" TYPE="submit" value="Klik Ane">
</form>

Sebuah tombol biasanya diiringi dengan style CSS tertentu untuk memberikan tampilan sebuah tombol dengan baik dan sesuai dengan yang kita inginkan.

Untuk eksperimen bisa menggunakan alat bantu online untuk memeberikan tampilan yang sesuai untuk sebuah tombol dan apakah berfungsi dengan baik script tersebut ditiap-tiap mesin browser.

Penambahan style CSS meupakan sebuah pilihan, apakah kita akan menggunakan CSS untuk tampilan sebuah tombol atau tidak, itu tergantung pemilik weblog untuk memberikan bentuk sebuah tombol, untuk itu kalian bisa modifikasi sendiri tampilan tombol-tombol tersebut.

Semoga bermanfaat.