INPUT IMAGE DI HTML

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

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.

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