Belajar HTML Part 23 Cara Membuat Input File di Form HTML (Form Upload)

Jika dalam tutorial sebelumnya kita telah membahas mengenai bagaimana cara membuat inputan dengan radio button yang digunakan untuk membuat pilihan yang mengharuskan user hanya boleh memilih satu pilihan saja, nah dalam tutorial kali ini kita akan membahas mengenai bagiamana cara untuk membuat fasilitas upload file di dalam form HTML, dengan adanya fitur upload ini anda dapat membuat fasilitas upload foto, upload dokumen dll.

 

---

Video Tutorial Belajar HTML – Membuat Input Type File di Form HTML

 

Fitur form yang kita gunakan adalah input dengan type file, baik langsung saja penjelasannya sebagai berikut.

Pada pembuatan form yang kompleks pasti tidak hanya inputan text saja yang digunakan, ada kemungkinan inputan dengan type file juga dibutuhkan, karena itu HTML menyediakan inputan type file untuk menghandle kebutuhan inputan seperti upload file.

baik langsung saja kita coba buat ya skrip sederhana :

baik semisal kita simpan dengan nama type_file_html.html, dan kita coba kita akses di browser :

akan tampil inputan seperti itu, jika tombol browse di klik otomatis akan menampilkan pop up dimana anda bisa memilih file disana.

untuk penulisan skripnya keterangannya adalah sebagai berikut :

• enctype=”multipart/form-data”  attribute ini harus dipasang di tag form jika nantinya inputan form di proses di pemrogaman webnya seperti php
• method yang digunakan haruslah post jika menggunakan inputan type file
• untuk tipe inputan kita gunakan file
• jangan lupa memberikan name pada inputan

bagaimana mudah kan ? selanjutnya kita akan bahas beberapa attribute yang ada di inputan dengan type file ini.

 

Attribute accept

Attribute ini digunakan untuk membatasi file apa saja yang dapat diupload, semisal anda hanya memperbolehkan file audio saja, file video saja, atau file gambar saja, nah hal seperti itu bisa anda atur didalam attribute accept.  Value dari attribute ini adalah MIME_type seperti video/*, audio/*, dan  image/*.

bagi anda yang belum tahu apa itu MIME_type, MIME_type adalah sebuah pengelompokkan khusus untuk format file-file di internet .

Daftar lengkap dari MIME_type dapat dilihat dari http://en.wikipedia.org/wiki/Internet_media_type.

baik langsung saja kita contohkan semisal anda hanya menginginkan filenya itu hanya gambar saja :

 

bagaimana mudah kan ?

untuk hasil yang lebih maksimal biasanya saya menggunakan validasi dari sisi pemrogaman webnya pada PHP contohnya, atau mungkin lebih baik lagi validasi dilakukan di javascript dan PHP pasti lebih aman hehe…

 

Attribute disabled

attribute ini hampir sama seperti pada inputan dengan type lain, digunakan untuk menonaktifkan inputan, biasanya memang kita padukan dengan javascript, semisal ini pada form pendaftaran, inputan file akan dalam keadaan disabled ketika username belum diisi, nah kurang lebih seperti itu, untuk penggunaan dari skrip ini adalah sebagai berikut :

Attribute id dan class

Sama seperti dibagian inputan lainnya untuk inputan file ini anda dapat memberikan attribute id dan class, jika anda menginginkan untuk melakukan set style css ataupun menggunakan javascript.

Nah baik kurang lebih seperti itu penjelasan mengenai penggunaan input dengan type file, bagaimana mudah kan ?

nah tapi jangan lupa untuk menambahkan enctype=”multipart/form-data” pada bagian form, karena kalau anda tidak menggunakan skrip ini fitur uploadnya tidak akan berfungsi, baik sekian dulu untuk tutorial cara membuat input file di form HTML untuk keperluan fitur upload pada form, dalam tutorial selanjutnya kita akan membahas mengenai bagaimana cara untuk membuat input dengan type image, wah apalagi tuh ?? bagaimana penasaran ?? sampai jumpa di tutorial selanjutnya ya 😀

[stextbox id=”info”] Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]