Web Development – Table dan Form

Dua elemen ini (Table dan Form) sangat sering muncul dalam berbagai aplikasi berbasis web maupun desktop. Seperti pada sistem aplikasi penjualan (point of sales), sistem aplikasi sekolah, dan lain sebagainya.

Table digunakan sebagai media untuk menyampaikan informasi laporan berbentuk tabular, menampilkan statistik data, dan mengelompokkan suatu data/konten. Sedangkan form, sesuai dengan namanya digunakan sebagai media interaksi pengguna dengan sistem, seperti form registrasi, login, dan pendataan.

Langkah-langkah pembuatan HTML table:

1. Tentukan banyaknya kolom dan baris yang akan dibuat
2. Gunakan tag html: <table> untuk memulai membuat table dan tutup tag dengan </table>

<table>
// Baris table ada di sini
</table>

3. Kemudian untuk membuat table row kita gunakan tag <tr> dan tutup dengan tag </tr>

<table>
<tr></tr>
</table>

4. Di dalam tag table tersebut kita definisikan kolom headings di dalam row menggunakan tag <th> dan tutup dengan tag </th>

<table>
<tr><th>No</th><th>Nama</th><th>Alamat</th><th>Aksi</th></tr>
</table>

5. Kemudian untuk membuat content dari table, kita gunakan tag <th> di dalam row yang telah didefinisikan

<table>
<tr><th>No</th><th>Nama</th><th>Alamat</th><th>Aksi</th></tr>
<tr><td>1</td><td>Peserta 1</td><td>Surabaya</td><td>Hapus | Edit</td></tr>
<tr><td>2</td><td>Peserta 1</td><td>Sidoarjo</td><td>Hapus | Edit</td></tr>
</table>

Untuk keseluruhan kode dari pembuatan table di atas adalah sebagai berikut:

Langkah-langkah pembuatan HTML form:

Untuk membuat form HTML ada tag-tag tertentu yang bisa kita gunakan, yaitu <form> untuk memulai membuat form html, <input> untuk membuat form input, kemudian ada <textarea> untuk membuat form textarea, dan lain-lain.

Berikut contoh pembuatan form untuk menuliskan komentar di web:

1. Gunakan tag <form> untuk memulai, dan tutup dengan tag </form>. Tambahkan property action sebagai script pengolah input-input dari form ketika disubmit.

<form action="/action_page.php">

// Input akan berada di sini
</form> 

2. Di dalam tag elemen form, definisikan beberapa input elemen: text, email, dan textarea. Untuk masing-masing input, berikan label sehingga input tersebut jelas tipenya.

  <label for="fname">Full name:</label><br>
  <input type="text" id="fname" name="fname" value=""><br>
  <label for="lemail">Email:</label><br>
  <input type="email" id="lemail" name="lemail" value=""><br><br>
  <label for="lcomment">Comment:</label><br>
  <textarea id="lcomment" name="lcomment" value=""></textarea><br><br>

3. Tambahkan elemen input dengan type submit juga untuk media melakukan submisi form ke server

<input type="submit" value="Submit">

Berikut adalah kode keseluruhan untuk pembuatan form HTML:

Biasanya kedua elemen HTML ini(table dan form) digunakan dalam suatu management data, yaitu form untuk melakukan input data, sedangkan table digunakan untuk menampilkan data yang telah disimpan. Sekian untuk chapter kali ini, untuk chapter selanjutnya akan masuk ke pembahasan bahasa PHP(server side). Semoga bermanfaat.

Salam.