Tutorial Form HTML Part 8: Fungsi dan Cara Penggunaan tag input type image
Halo Kawan-kawan,
Pada kesempatan kali ini, kita akan belajar salah satu objek form yang sedikit jarang digunakan yaitu 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 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="Nusantara Coding.png" />
Dari contoh tersebut saya memiliki gambar dengan nama Nusantara Coding.png di dalam folder yang sama dengan halaman HTML berada.
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="Nusantara Coding.png" name="Nusantara_Coding"/>
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="Nusantara Coding.png" 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="Nusantara Coding.png" 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="Nusantara Coding.png" alt="Nusantara Coding" />
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="Nusantara Coding.png" 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 Nusantara Coding:</h4>
<form action="proses.php" method="get">
<input type="image" src="Nusantara Coding.png" alt="Nusantara Coding"
name="Nusantara_Coding"/>
</form>
</body>
</html>
Hasil Code:
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:/HTML/proses.php?Nusantara_Coding.x=125&Nusantara_Coding.y=124
Nusantara_Coding.x=125 dan Nusantara_Coding.y=124 adalah koordinat dimana saya men-klik gambar tersebut. Informasi ini bisa digunakan di sisi web server untuk diproses. Contohnya, kita bisa membuat aplikasi peta sederhana dengan efek zoom. Namun untuk keperluan ini harus menggunakan PHP atau javascript untuk memproses hasil form.