HTML Programming 6 - Tag Form Di HTML
Assalamu'alaikum
Selamat siang, salam programming!! Masuk ke pembahasan tentang form pada html. Dasarnya, form adalah suatu pengisian data dari atau data tertentu misalnya. Form juga sering digunakan sebagai pengisian suatu survey, register, contact us dll. Implementasi form tentu karena berkaitan penyimpanan data, nantinya bisa di arahkan ke php sebagai kotak data. Sehingga suatu form bisa mengolah isian isian yang di lakukan user interface agar bisa di teruskan sebagai data yang dapat di simpan.
Method Get Vs Post
Berdasarkan mekanisme penyimpanan php, terdapat 2 metode pengiriman data pada sebuah form html yaitu metode get dan metode post. Bedanya kedua metode tersebut
- Pada method GET panjang karakter string dibatasi hanya sampai 2047 sedangkan method POST tidak dibatasi karakter string.
- Method POST akan lebih aman untuk mengirimkan nilai yang bersifat rahasia, seperti username dan password.
Alasan kenapa method post lebih aman ketimbang method get di karenakan sifat dari method get program inputan akan di kirim melalui parameter url sehingga value yang di inputkan dapat terlihat di address bar URL dan tentu data yang di input masuk ke cache dan tersimpan pada history browser.
Tag Form
Tag form sendiri menggunakan tag <form>...</form> dimana tag form ini memiliki attribute yang berpasangan yaitu attribute method dan action. Strukturnya kurang lebih akan seperti ini.<form method="POST" action="url">Umumnya penggunaan tag form di kombinasikan dengan tag tabel yang di bahas pembahasan sebelumnya. Hal ini digunakan agar tag form terlihat lebih dinamis dan lebih rapih.
<input ...>
</form>
Tag Input
Didalam tag form terdapat tag input. Tag input sendiri beraneka ragam bentuk dan fungsinya sebagai inputer suatu form. Parameter atau attribute wajib yang membedakan jenis jenis inputer adalah attribute type. Selain type, attribute lainnya adalah- type : jenis input
- name : nama input
- size : panjang size input
- value : karakteristik kustomisasi tag input
Jenis jenis inputan atau value dari type input sendiri ada banyak tipenya seperti :
- reset : tombol reset form untuk menghapus semua teks yang sudah di tulis pada suatu form
- submit : tombol untuk mengeksekusi jika form sudah selesai di isi dan ingin di kirimkan datanya
- text : inputan untuk menghasilkan sebuah media input data berupa text boxes
- file : inputan untuk menelusuri file pada suatu direktori (browse)
- password : inputan untuk memasukan password. Untuk jenis inputan ini, ketika teks dituliskan yang muncul pada layar browser berupa ekripsi menjadi karakter *
- radio : inputan yang berupa pilihan sebuah media input data. Bentuknya berupa lingkaran-lingkaran yang ketika di klik akan menghitamkan area lingkaran pilihan tersebut.
- checkbox : inputan yang berupa pilihan namun dapat di lakukan lebih dari satu pilihan. Bentuk inputannya berupa checklist.
- select : bentuknya berupa sebuah tag yang menggantikan tag input. Dimana select ini fungsinya sama seperti tipe radio namun bentuknya yang berbeda yaitu dengan bentuk listing.
- textarea : inputan dengan bentuk kotak yang luas tergantung besar width yang di kustomisasi pada inputan attribute cols dan rows. Fungsi inputan ini sebagai penulisan teks yang panjang.
Langsung saja, berikut contoh masing masing tipe inputer dengan mengkombinasikan dengan tag tabel sehingga akan terlihat lebih dinamis. Berikut htmlnya.
| <html> <head> <title>Latihan Tabel </title> </head> <body> <form method="POST" enctype="multipart/form-data"> <table border="0" align="center" cellpadding="5" cellspacing="0"> <tr><td>First Name</td><td>:</td><td><input type="text" name="firstname" placeholder="Nama Depan"></td></tr> <tr><td>Last Name</td><td>:</td><td><input type="text" name="lastname" placeholder="Nama Belakang"></td></tr> <tr><td>Foto</td><td>:</td><td><input type="file" name="foto"></td></tr> <tr><td>Password </td><td>:</td><td><input type="password" name="pwd" placeholder="Password"></td></tr> <tr><td align="top">Hobi</td><td>:</td><td> <input type="radio" name="hobi" value="Mancing" checked="mancing">Mancing<br> <input type="radio" name="hobi" value="Ngewibu">Ngewibu<br> <input type="radio" name="hobi" value="Nolep">Nolep</td></tr> <tr><td align="top">Hobi Checkbox</td><td>:</td><td> <input type="checkbox" name="hobi2[]" value="Mancing" checked="mancing">Mancing<br> <input type="checkbox" name="hobi2[]" value="Ngewibu">Ngewibu<br> <input type="checkbox" name="hobi2[]" value="Nolep">Nolep</td></tr> <tr><td align="top">Alamat</td><td>:</td><td> <select name="select" size="10" multiple="multiple"> <option value="Bekasi">Bekasi </option> <option value="Jakarta">Jakarta</option> </select></td></tr> <tr><td align="top">Alamat Lengkap</td><td>:</td><td> <textarea name="alamatlengkap" cols="50" rows="5" placeholder="masukan alamat lengkap anda"></textarea></td></tr> <tr><td align="right"><input type="reset" name="Reset" value="Reset"></td><td></td><td><input type="submit" name="Submit" value="Submit"></td></tr> </table> </form> <br> <p align=center> © Mahasiswa Mercu Buana Bekasi Pemrograman Web Genap 2019 </p> </body> </html> |
Demikian penjelasan mengenai tag form pada html, semoga bermanfaat untuk para pembaca. Sekian dari saya, jika ada yang ingin di tanyakan silahkan letakkan di kolom komentar. Terima kasih sudah berkunjung, sampai berjumpa di pembahasan berikutnya. Salam programming!!
Unknown