Tutorial Form HTML Part 7: Fungsi dan Cara Penggunaan tag input type file (form upload)
Halo Kawan-kawan,
Sejauh ini kita telah belajar penggunaan tag Form untuk menerima inputan berupa text saja. Tag Form juga dapat digunakan untuk menerima inputan berupa upload data dari user. Disinilah kegunaan dari tag input type file.
Fungsi tag input type file dalam pembuatan Form HTML
Tag input dengan atribut type=”file” adalah objek form yang digunakan untuk upload file. Pemrosesan upload sendiri akan banyak melibatkan web server (menggunakan PHP). Saya tidak akan membahasnya pemograman PHPnya, namun akan fokus pada kode HTML yang diperlukan.
Dalam menggunakan tag input dengan atribut type=”file” ini, kita hanya menambahkan kode berikut kedalam form HTML:
<form>
<input type="file">
</form>
Jika kita menjalankan kode tersebut, maka di dalam web browser akan tampil sebuah tombol dengan text keterangan disampingnya. Nama tombol dan text keterangan tersebut akan berbeda-beda tergantung web browser.
Ketika kita men-klik tombol upload (“Browse” pada firefox, dan “Choose File” pada chrome) maka akan keluar jendela untuk memilih file yang akan diupload. Setelah memilih salah satu file yang akan diupload, text keterangan akan berubah menjadi nama file tersebut.
Atribut name: Untuk Pemrosesan Upload Data
Atribut name merupakan atribut paling penting untuk type=”file”, karena atribut name inilah yang akan menjadi varibel penampung file upload di sisi server nantinya. Berikut cara penulisan atribut name:
<form>
<input type="file" name="file_gambar">
</form>
Atribut Accept: Membatasi Tipe Upload Data
Atribut accept digunakan untuk membasi jenis file yang akan diupload, apakah file gambar, file musik, atau file jenis lainnya. Nilai untuk atribut accept ini adalah MIME_type seperti audio/*, video/*, dan image/*. MIME_type adalah sebuah pengelompokkan khusus untuk file-file di dalam internet . List lengkap dari MIME ini dapat dilihat dari http://en.wikipedia.org/wiki/Internet_media_type.
Contoh berikut akan membatasi file upload untuk file gambar:
<form>
<input type="file" name="file_gambar" accept="image/*">
</form>
Namun pembatasan file ini tidak dapat diandalkan, karena user bisa dengan mudah mengganti jenis file yang diupload. Validasi untuk membatasi jenis file sebaiknya dilakukan juga di sisi web server (menggunakan PHP).
Atribut disabled: Menonaktifkan Upload File
Atribut disabled digunakan untuk membuat file upload tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah file upload hanya dapat diisi ketika user telah mengisi form diatasnya.
Atribut disabled hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya:
<form>
<input type="file" name="upload_gambar" disabled="disabled">
</form>
Atribut id dan class: CSS dan Javascript
Selain atribut type, name, accept dan disabled, kita juga bisa menggunakan atribut umum seperti id dan class dalam tag input type file. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan tag input type file Dalam Form HTML
Untuk merangkum penggunaan tag input type file beserta atribut-atributnya, saya akan membuat contoh kode HTML untuk semua atribut yang telah kita pelajari:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=file HTML</title>
</head>
<body>
<h4>Belajar tag Input type="file" di Nusantara Coding:</h4>
<form name="form_upload" >
Input type="file" dasar :
<input type="file">
<br />
Input type="file" tipe data gambar :
<input type="file" accept="image/*"/>
<br />
Input type="file" disabled :
<input type="file" accept="image/*" disabled="disabled">
</form>
</body>
</html>
Hasil Code:
Jika anda ingin menjalankan form diatas untuk diproses oleh PHP, kita perlu menambahkan beberapa atribut dan aturan untuk tag form.
Selain menggunakan tag input, untuk mengirimkan data ke web server (proses upload), pada tag form dari HTML perlu ditambahkan sebuah atribut enctype dengan nilai multipart/form-data. Atribut ini menginstruksikan kepada web server bahwa data yang dikirim berisi file yang diupload. Selain itu proses pengiriman harus menggunakan method=”POST”. Lebih jauh tentang penggunaan ini akan kita bahas dalam tutorial PHP, karena akan banyak menggunakan PHP.
Dalam tahap ini kita cukup mengetahui bahwa agar form dapat mengirimkan file, format awal form harus berbentuk:
<form name="nama_form" enctype="multipart/form-data" action="proses.php"
method="POST">
Sehingga contoh formnya akan menjadi sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=file HTML</title>
</head>
<body>
<h4>Belajar tag Input type="file" di duniailkom.com:</h4>
<form name="nama_form" enctype="multipart/form-data"
action="proses.php" method="POST">
Upload Gambar: <input type="file" accept="image/*"/>
<br />
<input type="submit" value="Proses Upload">
</form>
</body>
</html>
Di dalam tutorial form html kali ini kita telah mempelajari cara membuat form untuk keperluan upload file dengan tag input type file, walaupun pemrosesan file yang diupload tidak bisa ditangani dengan HTML saja, namun harus melibatkan bahasa pemograman web seperti PHP.
Selanjutnya kita akan mempelajari tentang tag input type image.