Kali ini, kita akan mempelajari sebuah input yang cukup unik. Biasanya kita mempelajari sebuah input dengan user interface standar. Kali ini kita akan menggunakan gambar sebagai suatu bentuk baru dari sebuah input. Penggunaan gambar akan membuat halaman website kita tampil lebih menarik dibandingkan menggunakan input standar. Mari kita mulai tutorial HTML – Input Gambar.

Tutorial HTML – Input Gambar – Bagian 15 – 12 (Bahasa Indonesia)

Input gambar yang akan kita pelajari merupakan salah satu bentuk input yang disediakan oleh HTML. Fungsi dari input gambar sama seperti input kirim. Bila kita klik pada input gambar, data form akan dikirimkan.

Input tombol kirim yang dipelajari sebelumnya menggunakan tampilan user interface standar dari aplikasi peramban namun kita bisa mengubah tampilan tombol tersebut menjadi lebih menarik dan sesuai dengan tema pada halaman website.

Input gambar sendiri masih merupakan salah satu jenis varian dari tag input. Sedangkan type yang digunakan untuk input gambar adalah image.

Sebelum kita melanjutkan cara penulisan kode HTML untuk sebuah input gambar. Anda bisa mencoba untuk menggunakan gambar yang telah kami sediakan berikut ini:

 

Tombol Daftar 1

Tombol Daftar 2

Klik kanan pada kedua gambar di atas dan simpan. Anda juga bisa menggunakan gambar sendiri bila Anda sudah memiliki gambar sendiri.

Tag input dengan type image memiliki atribut tambahan yaitu src. Atribut src di sini memiliki fungsi yang sama dengan atribut src pada tag img. Input gambar bisa diartikan sebagai tag img yang memiliki fungsi sebagai tombol kirim. Mari perhatikan kode HTML berikut ini:

 

Contoh kode HTML di atas akan menghasilkan tampilan seperti berikut ini:

Tutorial HTML - Input Gambar - Image - 1

Bila gambar di atas di klik maka form akan dikirimkan.

Input gambar tidak hanya bisa digunakan sebagai tombol kirim, kita juga bisa mengubahnya sebagai tombol dengan fungsi lain. Namun, tentu saja karakteristik tombol tersebut harus diubah menggunakan pemrograman client side.

Implementasi pemrograman client side

Saya akan mengubah karakteristik form beserta fungsi tombol daftar tersebut. Ketika tombol tersebut diklik form akan dikirimkan. Oleh karena itu, saya akan mengagalkan pengiriman form dan mengubah fungsi tombol tersebut menjadi tombol reset. Silahkan lihat contoh kode berikut ini:

 

Setelah karakteristik form dan fungsi tombol diubah menggunakan javascript, input gambar tersebut tidak akan mengirimkan form dan fungsi tombol tersebut menjadi tombol reset.

Mengubah ukuran input gambar

Input gambar juga memiliki atribut width dah height seperti layaknya tag img. Input gambar juga dapat disesuaikan ukurannya menggunakan atribut width dah height.

Gambar tombol yang saya berikan akan terlihat terlalu besar sehingga tombol tersebut harus disesuaikan kembali ukurannya. Saya akan merubahnya pada contoh kode HTML berikut ini:

 

Silahkan perhatikan hasil tampilan berikut ini:

Tutorial HTML - Input Gambar - Image - 3

Tombol daftar akan terlihat lebih kecil dan lebih sesuai dengan form.

Input gambar lebih interaktif

Javascript tidak hanya dapat mengubah fungsi tombol dan karakteristik form. Javascript juga bisa digunakan untuk membuat tombol kirim yang kita gunakan menjadi lebih interaktif.

Sekarang saya akan membuat tombol tersebut berubah gambar ketika mouse berada di atas tombol tersebut. Saya juga akan merubah kembali gambar tersebut kembali ke semula bila mouse keluar dari area tombol tersebut.

Silahkan perhatikan kode berikut ini:

 

Tombol Daftar

Tombol Daftar

perhatikan kedua tampilan ketika mouse berada di atas tombol dan ketika mouse keluar dari area tombol. Gambar yang ditampilkan pada tombol daftar akan berbeda dan hal ini menjadi lebih interaktif dan menarik perhatian pengunjung.

Ok, saya kira cukup sudah kita mempelajari input gambar. Hingga saat ini Anda sudah mengetahui cara penggunaan input gambar, cara merubah fungsi, ukuran dan cara membuatnya menjadi lebih interaktik. Kita selanjutnya akan melanjutkan tutorial ke bagian pengelompokan data di dalam form.

Tutorial HTML – Pengelompokan Data – Bagian 15 – 13 (Bahasa Indonesia)