Input image di HTML

Sebuah tombol bisa juga dibuat berupa gambar, dengan menggunakan input image di form HTML

Untuk menampilkan tombol submit yang lebih cantik, kita bisa menggunakan input dengan type image sebagai pengganti input submit.

😲 Info sampingan

Untuk menghias tombol, nanti kamu juga akan belajar CSS.

Menggunakan input image di HTML

Kita akan membuat sebuah form dengan tombol submit yang menggunakan gambar

<form action="#">
    <input type='text'> <br>
    <input type='image' width="150" height="50"
           src="https://sko.dev/sumber-gambar.png"
            >

</form>

Hasilnya

Tombol berawarna di atas, adalah sebuah tombol submit. Jika kamu menekannya, formulir di atas akan terkirim.

😲 Info sampingan

Jika ingin menampilkan tulisan di tombolnya, maka kamu harus memasukkan tulisan tersebut di gambar yang kamu muat.

Mengatur lebar dan tinggi gambar input type image

Ukuran lebar dan tinggi gambar, bisa diatur dengan atribut width dan height. Sama seperti saat menampilkan gambar biasa.

Atribut alt pada input image

Gunakan atribut alt sebagai alternatif jika gambar tidak berhasil dimuat atau sebagai informasi untuk dibaca screen reader.

<input type='image' width="150" height="50" alt="tombol submit"
           src="https://sko.dev/sumber-gambar.png" />

Input email di HTML

Atribut pada form HTML

💅 Edit halaman ini