cloud-hosting-terbaik-indonesia

Tutorial Form HTML Part 7: Fungsi dan Cara Penggunaan tag input type file (form upload)

Posted on

Form tak hanya digunakan bagi menerima inputan berupa text saja, namun pun digunakan bagi menerima inputan berupa upload data dari user. Bagi kebutuhan ini, HTML menyediakan tag input type file.


Manfaat tag input type file pada perancangan Form HTML

Tag input dengan atribut type=”file” ialah objek form yang digunakan bagi upload file. Pemrosesan upload sendiri akan banyak melibatkan web server (menggunakan PHP). Saya tak akan membahasnya pemograman PHPnya, namun akan fokus di kode HTML yang diperlukan.

Pada menggunakan tag input dengan atribut type=”file” ini, kita hanya menambahkan kode berikut kedalam form HTML:

Kalau sahabat menjalankan kode tersebut, karenanya di pada web browser akan tampil sebuah tombol dengan text keterangan disampingnya. Nama tombol dan text keterangan tersebut akan berbeda-beda tergantung web browser.

Ketika sahabat men-klik tombol upload (“Browse” di firefox, dan “Choose File” di chrome) karenanya akan keluar jendela bagi memilih file yang akan diupload. Setelah memilih diantara file yang akan diupload, text keterangan akan berubah menjadi nama file tersebut.


Atribut name: Bagi Pemrosesan Upload Data

Atribut name adalah atribut sangat urgen bagi type=”file”, karena atribut name inilah yang akan menjadi varibel penampung file upload di sisi server nantinya. Berikut cara penulisan atribut name:


Atribut Accept: Membatasi Tipe Upload Data

Atribut accept digunakan bagi membasi jenis file yang akan diupload, apakah file gambar, file musik, atau file jenis lainnya. Nilai bagi atribut accept ini ialah MIME_type seperti audio/*, video/*, dan  image/*. MIME_type ialah sebuah pengelompokkan khusus bagi file-file di pada internet . List komplit dari MIME ini dapat dilihat dari http://en.wikipedia.org/wiki/Internet_media_type.

Contoh berikut akan membatasi file upload bagi file gambar:

Namun pembatasan file ini tak dapat diandalkan, karena user dapat dengan gampang mengganti jenis file yang diupload. Validasi bagi membatasi jenis file sebaiknya dilakukan pun di sisi web server (menggunakan PHP).


Atribut disabled: Menonaktifkan Upload File

Atribut disabled digunakan bagi merancang file upload tak dapat digunakan. Pemakaian 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 mempunyai 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya:


Atribut id dan class: CSS dan Javascript

Selain atribut type, name, accept dan disabled, kita pun dapat menggunakan atribut umum seperti id dan class pada tag input type file. Tag id dan class akan dibutuhkan bagi pemograman HTML menggunakan Javascript dan CSS.


Cara Pemakaian tag input type file Pada Form HTML

Bagi merangkum pemakaian tag input type file dan juga atribut-atributnya, saya akan merancang contoh kode HTML bagi segala atribut yang telah kita pelajari:

Kalau sahabat ingin menjalankan form diatas bagi diproses oleh PHP, kita perlu menambahkan beberapa atribut dan aturan bagi tag form.

Selain menggunakan tag input, bagi mengirimkan data ke web server (proses upload), di 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 mesti menggunakan method=”POST”. Lebih jauh mengenai pemakaian ini akan kita bahas pada panduan PHP, karena akan banyak menggunakan PHP.

Pada tahap ini kita lumayan mengetahui bahwa agar form dapat mengirimkan file, format awal form mesti berbentuk:

Sehingga contoh formnya akan menjadi selaku berikut:


Di pada panduan form html kali ini kita telah mempelajari cara membuat form untuk keperluan upload file dengan tag input type file, walaupun pemrosesan file yang diupload tak dapat ditangani dengan HTML saja, namun mesti melibatkan bahasa pemograman web seperti PHP.

Berikutnya kita akan mempelajari mengenai tag input type image.


Sumber https://www.duniailkom.com/