Cara Memasukkan Icon Gambar Pada Inputan dengan CSS

Sering kali kita menemukan inputan dengan icon atau gambar kecil disebelah kiri inputan, lalu apa sih fungsi sebenarnya dari gambar icon pada form inputan tersebut..?

Tutorial Memasukkan Icon Gambar

Fungsi icon gambar tersebut memiliki fungsi 

1). Sebagai penjelas bahwa inputan tersebut harus di isi sesuai dengan icon gambar yang sudah tersera, misalkan icon gambar pada inputan pertama bergambar user, maka rata-rata yang harus di isi oleh para pengguna adalah username atau email atau nama orang, begitu juga dengan icon gembok, maka seorang pengguna sudah mengerti bahwa inputan tersbeut harus di isikan dengan password atau privasi yang lainnya.

"Oalah, jadi begitu ya, jadi tidak sembarang kita memasukkan icon gambar pada inputan ya"

Yap betu, jadi, kita harus sesuaikan dengan kebutuhan dan isi yang ada, agar si pengguna lebih mudah dalam melakukan proses pengisi.an Form Inputan yang kalian buat.

"Cara buatnya bagaimana...? apakah bisa...?"

Pastinya bisa dong, kali ini saya akan memberikan tutorial bagaimana cara membuat icon gambar pada form inputan, oke langsung saja kita mulai tutorialnya.

"Bentar min, setahu saya icon gambar sebelah kiri yang biasa saya temui itu yang saya tahu hanya digunakan pada Framework Bootstrap..?"

Iya, memang rata-rata orang tidak mengetahui bahwa cara itu bisa dilakukan dengan CSS, maka dari itu simak tutorialnya ya.

Cara Memasukkan Icon Gambar Pada Inputan dengan CSS

1). Langkah pertama, buat form inputannya terlebih dahulu, sebagai contoh, copy source code dibawah ini :

atau bisa juga kalian copy source code Form Bukutamu yang pernah Dunia Programming buat.

Baca : Cara Membuat Form Bukutamu Keren

2). Setelah itu, download icon gambar dibawah ini, caranya agar gambarnya bagus, klik kanan gambar icon dibawah ini, kemudian klikc view images, terus download aja deh gambarnya. 

3). Setelah itu, buat folder images pada folder yang tadi kalian buat, misalkan folder utamanya Belajar > images.

"Kenapa harus buat folder images..? kan bisa ditaruh di folder Belajar langsung"

Nah, dari sini kita dimulai belajar merapihkan file-file pada saat pembuatan sebuah program, agar nantinya apabila file kalian puluhan nantikan akan lebih mudak mencari data-data yang kita inginkan nantinya.

bayangkan saja, dalam satu folder sebuah program yang kalian buat itu, sudah dicampur aduk dengan gambar, file html, file php, vidio dan lain sebagainya, otomatis, Folder kalian akan terkesan tidak rapi atau acak-acakan, jadi dimulai dari sekarang belajar rapi dalam menaruh file dengan cara membuat folder.

letakkan gambar yang sudah kalian download tadi kedalam folder images, setelah itu kita buka Web Browsernya, atau bisa juga langsung kita klik 2 kali bagian index.html nya.

Dan tampilannya akan nampak seperti pada gambar dibawah ini :

Tampilan Icon Pada Form Bukutamu

Penjelasan :
no-repeat : Maksutnya gambar hanya menunjukkan 1 gambar saja, meskipun lebar dan tinggi melebihi ukuran gambar, apabila tanpa no-repeat maka gambar akan menjadi banyak.

Sekian penjelasan dari saya, apabila ada yang kurang jelas, atau bertanya-tanya seputar topik diatas, silahkan kalian dapat berkomentar pada kolom komentar dibawah ini.

Bagikan Artikel ini