Cara Pemakaian dan Fungsi tag input type file

belajar HTML dan CSS untuk pemula

Form tidak cuma dipakai untuk menerima inputan berupa text saja, tetapi juga dipakai untuk menerima inputan berupa upload data dari user. Untuk kebutuhan ini, HTML menyediakan tag input type file.

Fungsi tag input type file dalam pembuatan Form HTML

Tag input dengan atribut type=”file” ialah objek form yang dipakai untuk upload file. Pemrosesan upload sendiri akan banyak melibatkan web server (memakai PHP). Saya tak akan mendiskusikannya pemograman PHPnya, tetapi akan fokus terhadap kode HTML yang dibutuhkan.

Dalam memakai tag input dengan atribut type=”file” ini, kita cuma menambahkan kode berikut kedalam form HTML:

<form>
<input type="file">
</form>

Bila kamu menjalankan kode itu, maka di dalam web browser akan tampil sebuah tombol dengan text keterangan disampingnya. Nama tombol dan text keterangan itu akan berbeda bergantung web browser.

Saat kamu men-klik tombol upload (“Browse” pada firefox, dan “Choose File” pada chrome) maka akan keluar jendela untuk memilih file yang akan diunggah. Sesudah memilih salah satu file yang akan diunggah, text keterangan akan berganti jadi nama file itu.

Atribut name

Atribut name merupakan atribut terpenting untuk type=”file”, sebab atribut name inilah yang akan jadi varibel penampung file upload di sisi server nantinya. Berikut cara penulisan atribut name:

 <form>

   <input type="file" name="file_gambar">
</form>

Atribut Accept

Atribut accept dipakai untuk membasi jenis file yang akan diunggah, apakah file gambar, file musik, atau file jenis lainnya. Nilai untuk atribut accept ini merupakan MIME_type seperti audio/*, video/*, dan  image/*. MIME_type ialah sebuah pengelompokkan khusus untuk file-file di dalam internet . Daftar lengkap dari MIME ini bisa 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>

Tetapi pembatasan file ini tidak bisa diandalkan, sebab user bisa dengan gampang mengganti jenis file yang diunggah. Validasi untuk membatasi jenis file disarankan dilakukan juga di sisi web server (memakai PHP).

Atribut disabled

Atribut disabled dipakai untuk membuat file upload tidak dapat dipakai. Pemakaian atribut ini pada umumnya di kombinasikan dengan javascript supaya berfungsi maksimum. Misalnya sebuah file upload cuma bisa diisi saat user sudah mengisi form diatasnya.

Atribut disabled cuma mempunyai 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 dapat memakai atribut umum seperti id dan class dalam tag input type file. Tag id dan class akan diperlukan untuk pemograman HTML memakai Javascript dan CSS.

Cara Pemakaian tag input type file Dalam Form HTML

Untuk merangkum pemakaian tag input type file bersama atribut-atributnya, saya akan membuat contoh kode HTML bagi semua atribut yang sudah kita pelajari:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=file HTML</title>
</head>
<body>
<h4>Belajar tag Input type="file" di infanthree.com:</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>

Bila kamu mau menjalankan form diatas untuk diproses oleh PHP, kita harus menambahkan beberapa atribut dan aturan untuk tag form.

Selain memakai 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 diunggah. Disamping itu proses pengiriman harus memakai method=”POST”. Lebih jauh tentang pemakaian ini akan kita bahas dalam tutorial PHP, sebab akan banyak memakai PHP.

Dalam tahap ini kita cukup menyadari bahwa supaya form bisa mengirimkan file, format awal form harus berbentuk:

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

Sehingga contoh formnya akan jadi sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Input Type=file HTML</title>
</head>
<body>
<h4>Belajar tag Input type="file" di infanthree.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 saat ini kita sudah mempelajari cara membuat form untuk kebutuhan upload file dengan tag input type file, meskipun pemrosesan file yang diunggah tidak mampu ditangani dengan HTML saja, tetapi harus melibatkan bahasa pemograman web seperti PHP.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *