Input image di HTML - Referensi HTML

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

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.

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" />