Membuat Upload Form Html

Upload Form Html - untuk sahabat semua yang sedang membuat aplikasi berbasis web bisa jadi aplikasi yang dibuat membutuhkan upload form.

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.

upload form html
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>&nbsp;</td><td>&nbsp;</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>

Baca juga Membuat laporan excel dengan php

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>&nbsp;</td><td>&nbsp;</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>


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.


upload form html
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
Membuat Upload Form Html
4/ 5
Oleh

Berlangganan via email

Suka dengan postingan di atas? Silakan berlangganan postingan terbaru langsung via email.

1 comments:

Tulis comments