Cara Membuat Form Upload Gambar Dengan HTML

Cara Membuat Form Upload Gambar Dengan HTML
Bagaimana kabarnya sahabat kodewebsite, untuk tutorial kali ini kita akan membahas tentang bagaimana cara membuat form upload gambar dengan kode markup html. Tahukah sahabat, Aktivitas upload gambar sudah menjadi fitur yang harus ada pada suatu website, Terutama bagi situs web yang berniche gambar seperti Instagram, Pinterest, Pixabay.
Di situs web lainnya seperti facebook juga ada yang namanya upload foto. hal ini menunjukan bahwa user lebih menyukai visual, dibandingkan hanya dengan membaca suatu text saja.

Membuat Form Upload Gambar Dengan HTML

Jangan lupa untuk menyiapkan dua aplikasi utama yaitu text editor (Notepad++ , Dream Weaver dan sejenisnya) dan browser  (Google Chrome, Opera mini, Uc browser, Mozila firefox dan lain-lain). Ada point penting yang harus kamu perhatikan dalam pembuatan form upload gambar,  Yaitu penambahan atribut khusus.
Atribut khusus tersebut yaitu enctype, dengan penambahan value “multipart/form-data”. jika kamu tidak menambahkan atribut ini, maka gambar tidak dapat terdeteksi ketika di proses di PHP.
Langsung saja buka notepadnya lalu ketikan format html berikut:
<html>
<head><title>ini digunakan untuk judul</title></head>
<body>

<h3>UPLOAD GAMBAR KAMU DISINI</h3><br/>

<form action="proses.php" method="POST" enctype="multipart/form-data">

<table>
<tr><td><h6>upload gambarnya mas broo</h6></td><td></td></tr>
<tr><td><td/><td><input type="file" value="upload gambar"/></td></tr>
<tr><td><input type="submit" value="kirim"/></td><td></td></tr>
</table>

</form>

</body>
</html>

 

Setelah kamu mengetikan kode HTML diatas, Selanjutnya simpan dengan nama “upload_gambar.html” (tanpa tanda petik). Lalu buka file tersebut dengan aplikasi browser dengan cara klik kanan pada file lalu klik “open with” dan klik aplikasi browser yang kamu inginkan, maka hasilnya yaitu seperti gambar berikut :
Form upload gambar dengan HTML
 

Setelah itu silahkan klik choose file :

input file upload gambar
Maka akan tampil pilihan untuk memilih gambar yang akan kamu upload lihat gambar:
 
Memilih gambar yang mau di upload
 
Penjelasan Form:
<input> : berfungsi untuk membuat inputan atau masukkan dari pengguna, dan memiliki beberapa atribut diantaranya yaitu name (memberi nama suatu input), type ( menentukan jenis tipe input, seperti type=”text” atau type=”radio” atau type=”file”). Tag Input ini bersifat tunggal jadi untuk menutup tag ini hanya menggunakan tanda slash”/” pada akhir tag (tanpa tanda petik)contoh : <input type=”file” />.
Tag <input type=”file”> merupakan tag yang berfungsi untuk mengunggah file (gambar, PDF, Word, dan sebagainya)
<form>, Tag form ini merangkum semua input yang ada di dalamnya. ada berbagai atribut pada form ini, pada contoh markup html diatas ada atribut action=”proses.php”.  proses.php ini merupakan sebuah file yang ditulis dengan pemrograman php.
Disana juga ada atribut enctype=”multipart/form-data” berfungsi untuk mengirim gambar ke proses selanjutnya, Jika tidak memakai atribut ini maka gambar tidak dapat diproses ke file selanjutnya (proses.php).
Mungkin sampai disini tutorial tentang cara membuat form upload gambar dengan html. Jangan ketinggalan update artikel terbaru kami dengan terus berkunjung kembali ke situs kodewebsite. artikel sebelumnya membahas tentang :
See also  Cara Mempertebal dan Memiringkan Tulisan di HTML

2 thoughts on “Cara Membuat Form Upload Gambar Dengan HTML”

  1. Artikelnya sangat bermanfaat kak dan penjelasannya juga sangat detail.sangat membantu sekali dalam proses saya belajar membuat website.terima kasih kak,semoga kedepannya bisa memposting hal hal tentang membuat web.
    Ardandysyah
    1922500080
    atmaluhur .ac .id/

Leave a Comment

Your email address will not be published. Required fields are marked *