Cara Pemakaian dan Fungsi tag input type image

belajar HTML dan CSS untuk pemula

Salah satu objek form yang sedikit jarang dipakai ialah tag input type image. Dalam Tutorial Form HTML: Fungsi dan Cara Pemakaian Tag Input type image ini kita akan mempelajari cara pemakaian type image ini secara lebih dalam.

Fungsi tag input type image dalam pembuatan Form HTML

Fungsi utama dari tag input dengan type image ialah memasukkan gambar ke dalam form. Gambar itu akan berguna sebagai objek form yang dapat di-klik oleh user. Saat user men-klik gambar itu, web browser akan mengirimkan koordinat titik dimana gambar di-klik.

Kita akan jarang memakai tag input dengan type image ini, tetapi kamu bisa memanfaatkannya untuk membuat gambar yang akan menanggapi dengan koordinat klik yang berbeda.

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

Atribut name

Atribut name merupakan atribut terpenting untuk type image, sebab atribut name inilah yang akan jadi varibel penampung di sisi server nantinya. Berikut cara penulisan atribut name:

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

Atribut src

Sama seperti tag <img> yang memerlukan alamat dari gambar, atribut scr dipakai untuk memberi tahu web browser alamat dari gambar yang ditampilkan. Atribut ini merupakan atribut inti dari tag input dengan type image, sebab tentu saja tanpa gambar objek form ini tak akan berfungsi. Berikut ialah contoh pemakaian src untuk tag input type image:

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

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

Atribut width dan height

Atribut width dan height dipakai untuk mengatur lebar dan tinggi dari gambar. Ukuran yang dipakai bisa dalam satuan pixel maupun persen. Berikut contoh pemakaian atribut width dan height:

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

Atribut Align

Atribut align dipakai untuk mengatur penempatan gambar, nilai dari atribut ini dapat salah satu dari: “bottom“, “left“, “middle“, “right“, dan “top“. Settingan default web browser bila atribut ini tidak ditulis ialah left. Berikut contoh pemakaian atribut align:

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

Atribut alt

Atribut alt berguna untuk memberikan alternatif tulisan bila gambar tidak sukses di tampilkan. Nilai dari atribut ini merupakan tulisan yang bisa menggantikan atau menjelaskan gambar. Berikut contoh pemakaian atribut alt:

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

Atribut disabled

Atribut disabled dipakai untuk membuat file gambar tidak dapat dipakai. Tetapi beda dengan objek form lainnya, ketiga tag input dengan tipe=”image” ini disabled, gambar seakan-akan tidak berefek apa-apa, tetapi kamu tidak dapat men-klik gambar itu.

Pemakaian atribut ini pada umumnya di kombinasikan dengan javascript supaya berfungsi maksimum. Misalnya gambar cuma bisa diproses saat user sudah mengisi form diatasnya.

Atribut disabled cuma mempunyai 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 dapat memakai atribut umum seperti id dan class dalam tag input type image. Tag id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Cara Pemakaian tag input type image dalam Form HTML

Pada umumnya, tag input type image ini dipakai tanpa objek form lainnya, sebab bila tag input ini ada di dalam tag form, maka saat user men-klik gambar itu, dengan otomatis form akan di-submit dan mengirimkan koordinat dimana gambar itu di klik (tanpa memakai tombol submit).

Berikut ialah contoh kode HTML pemakaian atribut type=”image”:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=image HTML</title>
</head>
<body>
<h4>Belajar tag Input type="image" di infanthree.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 itu, dan saat kamu men-klik gambar, halaman web akan berpindah dan perhatikan pada bagian alamat web, akan tampak 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 ialah koordinat dimana saya men-klik gambar itu. Informasi ini dapat dipakai di sisi web server untuk diproses. Misalnya, kamu dapat membuat aplikasi peta sederhana dengan efek zoom. Tetapi untuk kebutuhan ini harus memakai PHP atau javascript untuk memproses hasil form.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *