cloud-hosting-terbaik-indonesia

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

Posted on

Diantara objek form yang sedikit jarang digunakan yakni tag input type image. Dalam Tutorial Form HTML: Fungsi dan Cara Penggunaan Tag Input type image ini kita akan mempelajari cara pemakaian type image ini secara lebih pada.


Manfaat tag input type image pada perancangan Form HTML

Manfaat utama dari tag input dengan type image yakni memasukkan gambar ke pada form. Gambar tersebut akan berfungsi selaku objek form yang dapat 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 sahabat dapat memanfaatkannya bagi membangun gambar yang akan merespon dengan koordinat klik yang berbeda.

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


Atribut name: Bagi Pemrosesan tag input type image

Atribut name adalah atribut sangat urgen bagi type image, karena atribut name inilah yang akan menjadi varibel penampung di sisi server nantinya. Berikut cara penulisan atribut name:


Atribut src: Menentukan Lokasi Gambar

Sama seperti tag <img> yang membutuhkan domisili dari gambar, atribut scr digunakan bagi memberi tahu web browser domisili dari gambar yang ditampilkan. Atribut ini yakni atribut inti dari tag input dengan type image, karena tentu saja tanpa gambar objek form ini tak akan berfungsi. Berikut yakni contoh pemakaian src bagi tag input type image:

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


Atribut width dan height: Menentukan Ukuran Gambar

Atribut width dan height digunakan bagi mengatur lebar dan tinggi dari gambar. Ukuran yang digunakan dapat pada satuan pixel ataupun persen. Berikut contoh pemakaian atribut width dan height:


Atribut Align: Bagi Mengatur Rata Penempatan Gambar

Atribut align digunakan bagi mengatur penempatan gambar, nilai dari atribut ini dapat diantara dari: “bottom“, “left“, “middle“, “right“, dan “top“. Settingan default web browser bila atribut ini tak ditulis yakni left. Berikut contoh pemakaian atribut align:


Atribut alt: Alternatif Tulisan Jikalau Gambar Gagal Tampil

Atribut alt berfungsi bagi memberikan alternatif tulisan bila gambar gagal di tampilkan. Nilai dari atribut ini yakni tulisan yang dapat menggantikan atau menjelaskan gambar. Berikut contoh pemakaian atribut alt:


Atribut disabled: Bagi Menonaktifkan Gambar

Atribut disabled digunakan bagi membangun file gambar tak dapat digunakan. Namun berbeda dengan objek form lainnya, ketiga tag input dengan tipe=”image” ini disabled, gambar seolah-olah tak berpengaruh apa-apa, namun sahabat tak dapat men-klik gambar tersebut.

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

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


Atribut id dan class: CSS dan Javascript

Selain atribut type, name, src, align, alt dan disabled, kita pun dapat menggunakan atribut umum seperti id dan class pada tag input type image. Tag id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Cara Pemakaian tag input type image pada Form HTML

Biasanya, tag input type image ini digunakan tanpa objek form lainnya, karena bila tag input ini berada di pada tag form, karenanya 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 yakni contoh kode HTML pemakaian atribut type=”image”:

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

Gambar_koala.x=136 dan gambar_koala.y=94 yakni koordinat dimana saya men-klik gambar tersebut
. Informasi ini dapat digunakan di sisi web server bagi diproses. Contohnya, sahabat dapat membangun program peta sederhana dengan efek zoom. Namun bagi kebutuhan ini mesti menggunakan PHP atau javascript bagi memproses hasil form.


Sumber https://www.duniailkom.com/