Setelah dalam tutorial sebelumnya kita telah membahas bagaimana cara membuat input file di form HTML yang bisa anda gunakan untuk membuat fitur upload di form, nah dalam tutorial kali ini kita akan membahas mengenai tipe input yang agak berbeda dan mungkin jarang digunakan, yaitu input dengan type image, baik langsung saja kita bahas.
Inputan jenis ini digunakan untuk memasukan gambar pada form, nah ketika nanti user melakukan klik pada gambar tersebut, maka form akan menangkap koordinat dari titik gambar yang di klik.
nah biar gak bingung langsung saja kita coba buat skrip sederhana untuk input type image :
<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<form action="proses.php" method="get">
<p><input type='image' src='bunga.jpg' alt='bunga' name='gambar_bunga' width='200px' height='200px' align='left' /></p>
</form>
</body>
</html>semisal saya simpan dengan nama type_image.html , lalu saya buka di browser :
baik kita bahas dulu apa yang kita tulis dalam skripnya :
- type=’image’ karena ini adalah tipenya inputan image
- src=’bunga.jpg’ adalah nama gambar yang ditampilkan cara menampilkannya sama seperti cara menampilkan gambar yang sebelumnya kita telah bahas di cara menambahkan gambar di HTML
- alt=’bunga’ adalah attribute alternate text sama seperti fungsi di bagian image, value dari alternate text ini akan ditampilkan jika gambar gagal di load
- name=’gambar_bunga’ adalah nama dari inputan yang akan mewakili nama inputan form ketika form di proses.
- width dan height digunakan untuk mengatur ukuran lebar dan tinggi dari gambar yang ditampilkan
- align digunakan untuk mengatur dibagian nama gambar akan ditampilkan, anda dapat memasukkan value “bottom“, “left“, “middle“, “right“, dan “top“, secara default nilai yang diberikan adalah left.
nah ketika gambar tersebut di klik maka url browser akan menangkap koordinat dari titik yang di klik.
terlihat ada tulisan proses.php?gambar_bunga.x=54&gambar_bunga.y=111
nah angka 54 dan 111 adalah titik koordinat yang kita klik.
Attribute disabled
attribute ini fungsinya sama seperti inputan lainnya, digunakan untuk menonaktifkan inputan ini, caranya tinggal anda tambahkan saja skrip disabled
| 1 | <p><input disabled='disabled' type='image' src='bunga.jpg' alt='bunga' name='gambar_bunga' width='200px' height='200px' align='left' /></p> |
Attribute id dan class
attribute ini juga bisa berfungsi pada input jenis image, anda dapat melakukan manipulasi tampilan dengan menggunakan css ataupun javascript dengan adanya attribute ini
| 1 | <p><input id='abc' class='def' type='image' src='bunga.jpg' alt='bunga' name='gambar_bunga' width='200px' height='200px' align='left' /></p> |
Nah Bagaimana mudah kan, teman teman untuk menggunakan input dengan type image ini, fitur ini bisa anda gunakan seperti pada pemilihan titik koordinat pada gambar seperti peta, baik sekian dulu cara membuat input dengan type image di form HTML, dalam tutorial selanjutnya kita akan membahas mengenai membuat inputan dengan type hidden di form HTML.