-->

Iklan bawah header

Belajar HTML Part 22 - Cara Membuat Input File di HTML

input file

Pada tutorial sebelumnya kita pernah membahas mengenai bagaimana cara membuat form di html, nah pada kesempatan kali ini kita akan membahas mengenai bagaimana cara membuat fasilitas upload file di dalam form HTML. Dengan adanya fitur upload ini, kita dapat membuat fasilitas untuk upload dokumen, upload foto dan lain-lain.

Fitur form yang digunakan adalah input dengan type file, untuk lebih jelasnya bisa kalian perhatikan skrip sederhana berikut ini :

<form action="proses.php" method="post" enctype="multipart/form-data">
      <p>Upload <input type='file' name='foto' /></p>
      <input type='submit' name='tombol' value='Kirim' />
</form>

Coba kita jalankan kode tersebut di browser :

input file

Setelah di jalankan di browser, maka akan tampil inputan seperti gambar diatas, jika tombol browse di klik maka secara otomatis akan menampilkan pop up dimana kita bisa memilih file disana.

Berikut adalah keterangan dari code diatas :

  • enctype="multipart/form-data" - atribut ini harus digunakan pada tag form jika nantinya inputan form di proses di pemrograman web seperti php
  • method yang digunakan haruslah post jika menggunakan inputan type file
  • untuk tipe inputan kita gunakan file
  • jangan lupa untuk memberikan name pada inputan

Selanjutnya kita akan membahas mengenai beberapa attribute yang bisa digunakan pada inputan dengan type file ini.

Attribute accept

Atribut accept digunakan untuk membatasi jenis file apa saja yang dapat diupload. Misalnya kita ingin hanya file audio saja atau file gambar saja yang dapat diupload, nah hal itu dapat kita atur dengan menggunakan atribut accept. Value atau nilai dari atribut ini adalah MIME_type seperti video/*, audio/*, dan image/*.

Bagi yang belum tahu apa itu MIME_type, MIME_type adalah pengelompokan khusus untuk format file-file di internet. Untuk lebih lengkapnya bisa kalian kunjungi http://en.wikipedia.org/wiki/internet_media_type.

Misalkan kita mau file yang dapat diupload hanya gambar saja, maka bisa kalian lihat contohnya di bawah ini :


<!DOCTYPE html>
<html>
<head>
   <title>Form HTML<title>
<head>
<body>
<orm action="proses.php" method="post" enctype="multipart/form-data">
      <p>Upload <nput type='file' name='foto' accept='image/*' /></p>
      <input type='submit' name='tombol' value='Kirim' />
</form>
<body>
</html>

Attribute disabled

atribut disabled digunakan untuk menonaktifkan inputan, hal ini biasa dipadukan dengan javascript, misalnya pada form pendaftaran kita bisa membuat inputan file dalam keadaan disabled ketika username belum diisi.

Untuk penggunaan dari atribut ini bisa kalian lihat pada contoh dibawah ini.


<!DOCTYPE html>
<html>
<head>
   <title>Form HTML<title>
</head>
<body>
<form action="proses.php" method="post" enctype="multipart/form-data">
      <p>Upload <input type='file' name='foto' accept='image/*' disabled /></p>
      <input type='submit' name='tombol' value='Kirim' />
</form>
</body>
</html>

Attribte id dan class

Sama halnya seperti pada bagian inputan yang lainnya untuk inputan file ini kita dapat memberikan atribut id dan class. Hal ini dilakukan jika kita ingin melakukan set style css ataupun menggunakan javascript.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel