Fungsi Input Type File Beserta Cara Penggunaannya

Kuy Belajar - Fungsi Input Type File Beserta Cara Penggunaannya. Assalamualaikum sobat semua, alhamdulillah kita ketemu lagi nih. kita masih akan membahas tentang form di HTML. Sebelumnya kita sudah membahas materi tentang Fungsi Input Type Image Beserta Cara Penggunaannya, nah pembahasan kita kali ini yaitu Fungsi Input Type File Beserta Cara Penggunaannya. Kuy kita mulai saja pembahasannya!

Penggunaan form di HTML tidak hanya digunakan untuk menerima inputan berupa text saja,
namun bisa juga kita gunakan untuk menerima inputan upload file dari user, HTML sudah menyediakan tag input type file untuk keperluan tersebut.

Mengenal Tag Input Type File Dalam Form HTML

Tag input type file adalah sebuah objek di dalam form yang digunakan untuk upload file. Proses upload file bukan di lakukan oleh HTML itu sendiri, melainkan akan melibatkan bahasa pemrograman PHP atau pun aplikasi berbasis web server lainnya.

Namun pada pembahasan kali ini kita belum membahas ke arah pemrosesan file yang akan di upload ke sebuah website, kita terlebih dahulu akan fokus kepada kode HTML yang kita perlukan untuk mengupload sebuah file.

Untuk penulisan tag input type file ini pun tidaklah rumit, kuy simak contoh penulosan tag input type file dalam form HTML berikut ini.


<html>


<title>Kuy Belajar Tag Input type file</title>




</head>







<body>

<h1> Kuy Belajar Tag Input type file</h1> 

<form action="proses.php" method="get">

<input type="file">

</form>





</html>

Maka akan menghasilkan file HTML seperti gambar berikut ini.

Terlihat pada gambar di atas tampil sebuah tombol dengan sebuah teks keterangan di sampingnya. Nama dan teks keterangan tersebut akan berbeda-beda tergantung web browser yang sobat gunakan.

Saya menggunakan web browser mozilla pada saat pengujian kode di atas, ketika sobat men-klik tombol upload (“Browse” pada firefox, dan “Choose File” pada chrome) maka akan keluar jendela untuk memilih file yang akan diupload.

Setelah itu silahkan sobat pilih file yang akan di upload, setelah memilih salah satu file yang akan diupload, text keterangan yang berada di samping tombol upload akan berubah menjadi nama file yang akan sobat upload tersebut.

Mengenal Atribut Name dalam Tag Input Type File

Atribut name pada tag input type file berfungsi sebagai identitas dari tag input type file tersebut. Identitas ini diperlukan untuk pemberian nama variable penampung nilai yang dipilih oleh user pada saat pemrosesan di sisi server (misalnya menggunakan PHP).

Berikut ini adalah contoh penulisan atribut name dalam input type file.


<html>


<title>Kuy Belajar Tag Input type file</title>




</head>







<body>

<h1> Kuy Belajar Tag Input type file</h1> 

<form action="proses.php" method="get">

<input type="file"  name="nama_nya">

</form>





</html>

Tidak akan ada perubahan tampilan, karena atribut name ini memang tidak akan tampil di web browser.

Mengenal Atribut Accept dalam Tag Input Type File

Atribut accept ini berfungsi untuk membatasi jenis file yang bisa diupload, apakah file gambar, file musik, atau file jenis lainnya. Nilai yang di gunakan untuk atribut accept ini adalah MIME_type seperti audio/*, video/*, dan image/*.

MIME_type yaitu sebuah pengelompokkan khusus untuk file-file di dalam internet . Daftar lengkap dari MIME ini dapat dilihat dari http://en.wikipedia.org/wiki/Internet_media_type.

Berikut ini adalah contoh penulisan atribut accept dalam tag input type file.


<html>


<title>Kuy Belajar Tag Input type file</title>




</head>







<body>

<h1> Kuy Belajar Tag Input type file</h1> 

<form action="proses.php" method="get">

<input type="file"  name="nama_nya" accept="image/*">

</form>





</html>

Maka Hasilnya akan seperti pada gambar di bawah ini.

Pada gambar di atas telihat hanya file gambar saja yang bisa di upload, itu karena kita tambahkan atribut accept dengan nilai image/*.

Namun sebenarnya pembatasan file di HTML ini tidak dapat diandalkan, karena user bisa dengan mudah mengganti jenis file yang diupload. Sebaiknya validasi untuk membatasi jenis file kita lakukan juga di sisi web server (menggunakan PHP).

Mengenal Atribut Disabled dalam Tag Input Type File

Atribut disabled digunakan untuk membuat file upload tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan gambar hanya dapat diproses ketika user telah mengisi form diatasnya.

Atribut disabled hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled Berikut contoh penulisannya:


<html>


<title>Kuy Belajar Tag Input type file</title>




</head>







<body>

<h1> Kuy Belajar Tag Input type file</h1> 

<form action="proses.php" method="get">

<input type="file"  name="nama_nya" Disabled>

</form>





</html>

Maka akan menghasilkan file seperti gambar berikut ini.

Tombol dan kotak keterangan di samping nya akan berubah warna dan tidak dapat digunakan.

Mengenal Atribut Id dan Class Dalam Tag Input Type File

selain atribut type, name, accept, dan disabled, HTML juga menyediakan atribut juga menyediakan atribut id dan class. Kita bisa menggunakan atribut seperti id dan class dalam tag input image.

Berikut ini adalah contoh penulisan tag id dan class dalam input type image.


<html>


<title>Kuy Belajar Tag Input type file</title>




</head>







<body>

<h1> Kuy Belajar Tag Input type file</h1> 

<form action="proses.php" method="get">

<input type="file"  name="nama_nya" id="nama_id" class="nama_class">

</form>





</html>

Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan javascript

dan CSS.

Contoh Penggunaan tag input type image di Dalam Form HTML

Sebagai akhir dari materi Fungsi Input Type File Beserta Cara Penggunaannya ini, kita akan menggabungkan semua atribut yang sudah kita pelajari di atas.

Berikut ini adalah contoh penulisan input type file dalam form HTML.


<html>


<title>Kuy Belajar Tag Input type file</title>




</head>







<body>

<h1> Kuy Belajar Tag Input type file</h1> 

<form action="proses.php" method="get">

Input Type File Default :  

<input type="file"  name="nama_nya">

<br> <br>



Input type="file" tipe data gambar :

<input type="file" accept="image/*"/>

<br /><br>



Input type="file" disabled :

<input type="file" accept="image/*" disabled>



</form>





</html>

Maka akan menghasilkan file HTML seperti gambar berikut ini.

Saya rasa itu lah pembahasan kita tentang Fungsi Input Type File Beserta Cara Penggunaannya. kita sudah mempelajari fungsi berserta contoh nya masing-masing.

Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya sobat!

Kuy ke materi selanjutnya : Cara Membuat Tombol di HTML Menggunakan Tag Button