Sesuai namanya upload form sendiri merupakan form upload. nah upload form ini memiliki fungsi untuk mengambil sebuah file dari komputer yang nantinya akan dimasukan kedalam sebuah aplikasi yang dibuat. Untuk mengetahui upload from lebih lanjut silahkan pelajari disini
Tag html yang digunakan <form> menunjukan kita akan membuat sebuah form. lalu untuk membuat form upload atau memasukan file bisa menggunakan tag <input> dengan Type file.
Mungkin sampai sini sahabat masih merasa pusing atau tidak mengerti terkait upload form. namun jangan khawatir saya akan membahas langkah demi langkah sampai menjadi sebuah upload form yang menarik.
 |
| Ilustrasi Upload Form |
Script Upload Form Per-bagian
Script Membuat Form
<form action="" method="post" enctype="multipart/form-data">Script diatas merupakan script awalan untuk membuat form. seperti yang telah disebut tadi diatas dalam html untuk membuat sebuah from maka harus diawali dengan tag <form>.
action merupakan aksi dari form tersebut akan dikirim kemana.
Method berisi post artinya file yang dimasuan kedalam form setelah di upload akan di post atau dikirim.
enctype merupakan type dari form.
Menambahkan Table Dalam Form Agar Rapih
menambahkan tabel dalam sebuah pembuatan form sebenarnya hanya opsional, artinya tergantung selera. akan tetapi kalo saya biasanya dalam beberapa kesempatan menambahkan tabel dalam pembuatan form supaya terlihat rapih.<table width="100%" align="center" border="0" bgcolor="#eee" cellpadding="2" cellspacing="0">ketika kita memutuskan untuk menambahkan tabel dalam sebuah form maka oomatis langkah selanjutnya yang dilakukan harus menggunakan atau menambahkan tag tabel row <tr> dan <td>
Membuat Form Inputan Untuk Text
Form inputan dengan type text ini nantinya berfungsi untuk memasukan nama file. sehingga file yang akan di upload di dalam form dapat berubah atau dirubah namanya terlebih dahulu.
<tr><td width="40%" align="right"><b>Nama File</b></td><td><b>:</b></td><td><input type="text" name="nama" size="40" required /></td></tr>Membuat Form Upload File
Di dalam proses ini akan membuat bagian di dalam form yang mana berfungsi untuk upload file. tag yang digunakan yaitu sama dengan yang telah dibuat sebelumnya yaitu <input> akan tetapi yang membedakan adalah typenya. karena dalam proses ini kita akan mengupload sebuah file maka type yang digunakan pun file.
<tr><td width="40%" align="right"><b>Pilih File</b></td><td><b>:</b></td><td><input type="file" name="nama" size="40" required /></td></tr>Membuat Button Upload
Dalam proses terakhir ini yang akan dibuat yaitu tombol upload untuk mengirim atau memproses bagian form itu sendiri
<tr>
<td> </td><td> </td><td><input class="btn btn-primary" type="submit" name="upload" value="Upload" /></td>
</tr>
Kemuadian jangan lupa di akhir tambahkan tag penutup.
</table>
</Form>
Script lengkap upload form
pada bagian sebeumnya telah dibahas secara detail membuat for perbagian. namun bagi sahabat yang masih kebingungan bisa tinggal copas saja script upload form dibawah ini.
Form dengan tabel
<form action="" method="post" enctype="multipart/form-data">
<table width="100%" align="center" border="0" bgcolor="#eee" cellpadding="2" cellspacing="0">
<tr>
<td width="40%" align="right"><b>Nama File</b></td><td><b>:</b></td> <td><input type="text" name="nama" size="40" required /></td>
</tr>
<tr>
<td width="40%" align="right"><b>Pilih File</b></td><td><b>:</b> </td>
<td><input type="file" name="file" required /></td>
</tr>
<tr>
<td> </td><td> </td><td><input class="btn btn-primary" type="submit" name="upload" value="Upload" />
</td>
</tr>
</table>
</form>
Form Tanpa Tabel
<form action="" method="post" enctype="multipart/form-data">
<b>Nama File</b></td><td><b>:</b>
<input type="text" name="nama" size="40" required />
<b>Pilih File</b></td><td><b>:</b>
<input type="file" name="file" required />
<input class="btn btn-primary"type="submit" name="upload" value="Upload" />
</form>
<b>Nama File</b></td><td><b>:</b>
<input type="text" name="nama" size="40" required />
<b>Pilih File</b></td><td><b>:</b>
<input type="file" name="file" required />
<input class="btn btn-primary"type="submit" name="upload" value="Upload" />
</form>
Kesimpulan
Dapat disimpulkan dari beberapa proses diatas form upload berpungsi untuk mengirip file dari komputer kedalam aplikasi.
untuk beberapa proses diatas dalam pembuatan form menggunakan dua cara yaitu dengan menggunakan tabel dan tanpa tanpa tabel.
 |
| Tampilan Upload Form |
Gambar diatas merupakan tampian dari form yang telah ditambahkan css style sehingga tampilannya lebih indah.
sekian untuk tutorial upload form html, semoga bermanfaat
No comments