Home > Pemula > Belajar HTML CSS > Trik Membuat Submit Button dengan Image

.

1 komentar BYAdmin Ilmuwebsite

button dengan imageOke, mungkin pada awalnya kebanyakan dari web developer pun pernah bertanya-tanya bagaimana membuat suatu image menjadi submit button dari suatu form. Dan fungsi seperti ini memang ternyata telah dipakai pada beberapa Content Management System favorit, joomla misalnya, ketika anda melakukan suatu save item, entah itu article, ataupun product di virtuemart yang memanfaatkan component backendnya, disana terlihat sebuah image yang memiliki sebuah fungsi sebagai submit button. Ada 2 trik yang biasanya sering digunakan, pertama memanfaatkan tag html, dan yang terakhir memanfaatkan fungsi javascript sederhana.


Ya, kita coba terlebih dahulu untuk trik yang pertama …

Buat sebuah file, namakan terserah anda, saya menamakannya imgbtn.html, kemudian isi didalamnya :

<html><head></head><body>

<form name=”formulir” action=”kirim.php” method=”POST”>
Nama : <input type=”text” name=”nama”>
<input type=”image” src=”submit_icon.jpg” alt=”Submit button”>
</form>

</body></html>

Yang memiliki fungsi intinya :
baris <input type=”image” src=”submit_icon.jpg” alt=”Submit button”>
membuat sebuah input dengan type image.

kemudian, file kirim.php, file ini digunakan untuk menangkap apa yang telah dikirim oleh imgbtn.html, tentunya anda harus memiliki sebuah web server yang telah terinstall didalam pc anda untuk mencobanya. Tapi diakhir artikel html ini penulis menyediakan file demo dari artikel ini.

File kirim.php
< ?php
echo $_POST[‘nama’];
?>

Anda tidak dapat menggunakan fitur seperti hover button dalam trik yang pertama ini, tag input type=’image’ tidak mengizinkan anda untuk perubahan gambar ketika mouse over, ataupun ketika mouse out. Fitur perubahan image/gambar ketika mouse over atau mouse out didapatkan dengan menggunakan trik yang selanjutnya.

Kemudian trik yang terakhir, ini trik pengembangan dari trik sebelumnya. Jika trik yang pertama itu hanya membolehkan gambar yang statik, maka trik yang kedua ini anda dapat memasang fitur perubahan gambar ketika mouseover ataupun mouseout.

Sediakan sebuah file imgtbn2.html, berisi :

<html><head></head><body>

<form name=”formulir” action=”kirim.php” method=”POST”>

Nama : <input type=”text” name=”nama”>

<a href=”javascript:document.formulir.submit()”
onmouseover=”document.formulir.sub_but.src=’submit_icon.jpg'”
onmouseout=”document.formulir.sub_but.src=’submit_icon_hover.jpg'”
onclick=”return val_form_this_page()”>
<img src=”submit_icon_hover.jpg” border=’0′ alt=”Submit this form” name=”sub_but” />
</a>

</form>

</body></html>

trik yang terakhir ini, menggunakan tag <a> dan memanfaatkan fungsi javascript yang diembedkan.
Statement intinya :
onclick=”return val_form_this_page()”>
ketika image di klik maka kembalikan nilai yang terisi dalam form di document untuk kemudian di kirim ke action targetnya, yakni kirim.php.
Dengan trik ini

dan file kirim.php yakni file php untuk menangkap variable yang dikirim.
< ?php
echo $_POST[‘nama’];
?>

Sekian, anda dapat menggunakan trik ini untuk digunakan dalam melakukan development website anda. Terima kasih.
Oleh : Loka Dwiartara.

File tutorial ini dapat anda download disini :

http://www.ilmuwebsite.com/file_tutorial/trikimagebutton.zip

Dan untuk mencoba file tutorial diatas silahkan klik :

http://www.ilmuwebsite.com/file_tutorial/trikimagebutton/imgbtn.html
http://www.ilmuwebsite.com/file_tutorial/trikimagebutton/imgbtn2.html

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



One Response

  1. Helmi

    maaf,,
    klo buat blog bsa ga ya ???


eXTReMe Tracker