Membuat form dalam suatu tabel bertujuan untuk meningkatkan pengalaman pengguna (meningkatkan kerapihan layout), Ada bermacam-macam cara dalam membuat form agar terlihat rapih, namun yang paling sederhana yaitu menggunakan tabel html. kita perlu mempelajari dasarnya terlebih dahulu, agar kita mengetahui susunan dinamisnya.
Ini Dia Cara Membuat Form Dalam Tabel HTML
Ada dua tag utama yang perlu kita pahami dalam membuat form di tabel html, Yaitu tag table dan tag form. selain itu pastikan untuk menyiapkan text editor seperti notepad, notepad ++, atau text editor lainnya. Jangan lupa untuk menyiapkan makanan ringan, Agar kita lebih santai.
Membuat Tabel di HTML
Tabel adalah suatu kerangka yang digunakan untuk menyusun data agar mudah dipahami dan mudah dikelola. Tabel ini diibaratkan suatu kerangka rumah, dengan block tembok lurus (kamar, kamar mandi, ruang tamu, dan sebagainya), sehingga kita bisa menyimpan barang didalam ruangan tersebut.
Penulisan tag Tabel diawali dengan kode <table> dan ditutup dengan tambahan slash </table>. didalam tag tabel ini terdapat beberapa anak tag yang bertujuan untuk membuat kolom dan baris. Tag “tr” adalah anak tabel yang digunakan untuk membentuk jumlah baris, Tag ini ditulis dengan meggunakan kode <tr>dan diakhiri dengan </tr>.
Sedangkan tag “td” berfungsi untuk menentukan jumlah kolom yang akan dibuat, tag ini dapat ditulis dengan <td>dan diakhiri dengan </td>, penulisan tag td ini diletakan dalam tag tr. Berikut ini adalah contoh penulisan tag tabel, tr, dan td :
<table>
<tr><td>kolom 1</td><td>kolom 2</td></tr>
</table>
Pada penulisan kode diatas, kita dapat mengetahui bahwa kode tersebut akan membuat satu tabel yang memiliki satu baris dan dua kolom. Untuk membuat baris kedua, kita hanya perlu menambahkan kembali tag <tr> baru, setelah tag tr yang pertama.
Membuat FORM di HTML
Form atau yang dikenal banyak orang formulir, yaitu sekumpulan pertanyaan yang terdiri dari berbagai kebutuhan data.
Seperti formulir pada umumnya, form ini juga meminta user untuk mengisi data yang tersedia, sehingga data tersebut dijadikan pembanding, atau disimpan dalam database. Untuk membuat form di html, pertama kita perlu menuliskan tag <form> dan menutupnya dengan tag </form>.
Didalam tag form ini terdapat berbagai atribut, Atribut yang sering dipakai umumnya yaitu :
- “action” berfungsi untuk meneruskan data yang telah dimasukan oleh pengguna.
- “name” berfungsi untuk memberikan nama pada suatu form.
- “method” adalah metode yang di berikan pada suatu form.
Penulisan tag form kurang lebih seperti berikut :
<form name=”form_kuis” method=”post” action=”diproses.php”>
………………………………
</form>
Pada kode tersebut menjelaskan bahwa terdapat form dengan nama form_kuis, dengan metode penerusan data post, dan akan diproses pada file diproses.php.
Isi name pada kode diatas bebas dan tidak boleh memakai spasi, jadi bisa menggunakan tanda “_ “untuk menggantinya. mada isian method, umumnya menggunakan dua tipe yaitu GET dan POST. dan pada isian action, menentukan pada file mana data akan diolah.
untuk sementara lupakan dulu hal yang kamu rasa rumit. fokus pada apa yang kamu pahami dulu, nanti juga terbiasa.
Untuk menampilkan data apa saja yang harus diisi user, maka kamu dapat menggunakan berbagai metode input seperti tag input, textarea, radio, select, dan sebagainya. tapi disini kita akan mencoba metode tag input saja, perhatikan kode berikut.
<form>
<input type=”text” name=”nama_input”/>
</form>
begitulah cara penulisan tag input dalam form.
Kombinasi Tabel dengan Form
Setelah mengetahui tentang pembuatan table dan form, mari kita coba untuk mengaplikasikannya secara langsung, Biasanya kita lebih paham jika sudah melihat kode, Langsung saja ketikan kode seperti berikut ini :
<html> <head> <title> belajar halaman login di ariprayogiputra.blogspot.com </title> </head> <body align="center"> <h2>SILAHKAN LOGIN<h2> <form > <table border="0"align="center"> <tr><td>email :</td><td><input type="text" ></td></tr> <tr><td>password :</td><td><input type="password maxlength="8"></td></tr> <tr><td></td><td><input type="submit" name="submit" value="login"></td></tr> </table> </form> </body> </html>
Simpan kode tersebut dengan nama table_form.html dan buka dengan aplikasi browser, Hasilnya akan tampak seperti gambar berikut ini :
Pada script kode table_form.html, kita membuat satu form dengan 3 baris dan dua kolom. pada kode tag table saya tambahkan atribut (border=”0″ align=”center”), Yang berarti bahwa garis kotak border hilang atau nol, dan center yang berarti table berada di tengah. Atribut border bisa kamu isi dengan 1px, 2px, dan sebagainya (ini akan membuat kotak garis terlihat), Semakin besar angka yang kamu masukan, maka akan semakin tebal border atau garis kotak tersebut.
itulah dia pembahasan tentang cara membuat form dalam tabel HTML, sebelumnya kita pernah berbincang tentang membuat tulisan memantul pada html. silahkan klik disini untuk membaca :