Tutorial Form HTML Part 8: Fungsi dan Cara Penggunaan tag input type image

Salah satu objek form yang sedikit jarang digunakan adalah tag input type image. Dalam Tutorial Form HTML: Fungsi dan Cara Penggunaan Tag Input type image ini kita akan mempelajari cara penggunaan type image ini secara lebih dalam.

Fungsi tag input type image dalam pembuatan Form HTML

Fungsi utama dari tag input dengan type image adalah memasukkan gambar ke dalam form. Gambar tersebut akan berfungsi sebagai objek form yang bisa di-klik oleh user. Ketika user men-klik gambar tersebut, web browser akan mengirimkan koordinat titik dimana gambar di-klik.

Kita akan jarang menggunakan tag input dengan type image ini, namun anda bisa memanfaatkannya untuk membuat gambar yang akan merespon dengan koordinat klik yang berbeda.

Contoh nya seperti aplikasi peta sederhana, dimana ketika user men-klik koordinat tertentu, kita bisa menampilkan gambar lainnya.

Atribut name: Untuk Pemrosesan tag input type image

Atribut name merupakan atribut paling penting untuk type image, karena atribut name inilah yang akan menjadi varibel penampung di sisi server nantinya. Berikut cara penulisan atribut name:

<input type="image" src="koala.jpg" name="gambar_koala"/>

Atribut src: Menentukan Lokasi Gambar

Sama seperti tag <img> yang membutuhkan alamat dari gambar, atribut scr digunakan untuk memberi tahu web browser alamat dari gambar yang ditampilkan. Atribut ini adalah atribut inti dari tag input dengan type image, karena tentu saja tanpa gambar objek form ini tidak akan berfungsi. Berikut adalah contoh penggunaan src untuk tag input type image:

<input type="image" src="koala.jpg" />

Dari contoh tersebut saya memiliki gambar dengan nama koala.jpg di dalam folder yang sama dengan halaman HTML berada.

Atribut width dan height: Menentukan Ukuran Gambar

Atribut width dan height digunakan untuk mengatur lebar dan tinggi dari gambar. Ukuran yang digunakan bisa dalam satuan pixel ataupun persen. Berikut contoh penggunaan atribut width dan height:

<input type="image" src="koala.jpg" width="200px" dan height="200px" />

Atribut Align: Untuk Mengatur Rata Penempatan Gambar

Atribut align digunakan untuk mengatur penempatan gambar, nilai dari atribut ini bisa salah satu dari: “bottom“, “left“, “middle“, “right“, dan “top“. Settingan default web browser jika atribut ini tidak ditulis adalah left. Berikut contoh penggunaan atribut align:

<input type="image" src="koala.jpg" align="right" />

Atribut alt: Alternatif Tulisan Jika Gambar Gagal Tampil

Atribut alt berfungsi untuk memberikan alternatif tulisan jika gambar gagal di tampilkan. Nilai dari atribut ini adalah tulisan yang dapat menggantikan atau menjelaskan gambar. Berikut contoh penggunaan atribut alt:

<input type="image" src="koala.jpg" alt="Gambar Koala" />

Atribut disabled: Untuk Menonaktifkan Gambar

Atribut disabled digunakan untuk membuat file gambar tidak bisa digunakan. Namun berbeda dengan objek form lainnya, ketiga tag input dengan tipe=”image” ini disabled, gambar seolah-olah tidak berpengaruh apa-apa, namun anda tidak bisa men-klik gambar tersebut.

Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan gambar hanya dapat diproses ketika user telah mengisi form diatasnya.

Atribut disabled hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya:

<input type="image" src="koala.jpg" disabled="disabled" />

Atribut id dan class: CSS dan Javascript

Selain atribut type, name, src, align, alt dan disabled, kita juga bisa menggunakan atribut umum seperti id dan class dalam tag input type image. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.

Cara Penggunaan tag input type image dalam Form HTML

Biasanya, tag input type image ini digunakan tanpa objek form lainnya, karena jika tag input ini berada di dalam tag form, maka ketika user men-klik gambar tersebut, secara otomatis form akan di-submit dan mengirimkan koordinat dimana gambar tersebut di klik (tanpa menggunakan tombol submit).

Berikut adalah contoh kode HTML penggunaan atribut type=”image”:

<!DOCTYPE html>
<html>

<head>
   <title>Belajar Tag Input Type=image HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="image" di duniailkom.com:</h4>
   <form action="proses.php" method="get">
      <input type="image" src="koala.jpg" alt="gambar koala" 
      name="gambar_koala"/>
   </form>

</body>
</html>

Silahkan jalankan kode tersebut, dan ketika anda men-klik gambar, halaman web akan berpindah dan perhatikan di bagian alamat web, akan terlihat koordinat gambar seperti berikut:

file:///D:/BelajarHTML/proses.php?gambar_koala.x=136&gambar_koala.y=94

Gambar_koala.x=136 dan gambar_koala.y=94 adalah koordinat dimana saya men-klik gambar tersebut. Informasi ini bisa digunakan di sisi web server untuk diproses. Contohnya, anda bisa membuat aplikasi peta sederhana dengan efek zoom. Namun untuk keperluan ini harus menggunakan PHP atau javascript untuk memproses hasil form.