Belajar HTML Part 5: Tabel dan Form HTML untuk Pemula

by

Pada Part 4, kamu sudah mempelajari link, gambar, audio, dan video dalam HTML. Sekarang di Part 5, kita masuk ke elemen yang sangat penting untuk menampilkan data dan interaksi pengguna, yaitu tabel dan form HTML.

Materi ini banyak dipakai pada:

  • Halaman admin
  • Form pendaftaran
  • Form login
  • Halaman data dan laporan

Tag table: Membuat Tabel HTML

Tabel digunakan untuk menampilkan data terstruktur dalam bentuk baris dan kolom. 

<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Ani</td>
    <td>ani@email.com</td>
  </tr>
</table>

Elemen penting dalam tabel:

  • table → pembungkus tabel
  • tr → baris
  • th → header kolom
  • td → isi kolom

Struktur Tabel yang Benar

Struktur tabel yang lebih rapi dan direkomendasikan: 

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ani</td>
      <td>ani@email.com</td>
    </tr>
  </tbody>
</table>

Manfaat struktur ini:

  • Lebih mudah dibaca
  • Siap di-style CSS
  • Lebih ramah SEO & aksesibilitas

Caption pada Tabel

Gunakan caption untuk memberi judul tabel. 

<table>
  <caption>Daftar Pengguna</caption>
</table>

Kesalahan Umum dalam Tabel

  • Menggunakan tabel untuk layout
  • Tidak pakai thead dan tbody
  • Header tidak jelas

Tag form: Membuat Form HTML

Form digunakan untuk mengirim data dari user ke server. 

<form action="proses.php" method="post">
  …
</form>

Atribut penting:

  • action → tujuan pengiriman
  • method → post atau get

Input Text

<input type="text" name="nama">

Label pada Form

Gunakan label agar form lebih rapi dan aksesibel. 

<label for="nama">Nama</label>
<input type="text" id="nama" name="nama">

Input Email

<input type="email" name="email">

Browser akan otomatis validasi format email.

Input Password

<input type="password" name="password">

Textarea

<textarea name="pesan"></textarea>

Radio Button

<input type="radio" name="gender" value="laki-laki"> Laki-laki
<input type="radio" name="gender" value="perempuan"> Perempuan

Checkbox

<input type="checkbox" name="hobi" value="coding"> Coding

Select Option

<select name="kota">
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
</select>

Button Submit

<button type="submit">Kirim</button>

Contoh Form Lengkap

<form action="proses.php" method="post">
  <label for="nama">Nama</label>
  <input type="text" id="nama" name="nama">

  <label for="email">Email</label>
  <input type="email" id="email" name="email">

  <label for="pesan">Pesan</label>
  <textarea id="pesan" name="pesan"></textarea>

  <button type="submit">Kirim</button>
</form>

Kesalahan Umum Pemula

  • Tidak pakai label
  • Name input tidak diisi
  • Form tidak punya method
  • Menggunakan GET untuk data sensitif

Ringkasan Part 5

  • Tabel untuk data terstruktur
  • Gunakan thead dan tbody
  • Form untuk input user
  • Label penting untuk aksesibilitas

Lanjutan Materi

Di Part 6, kita akan membahas:

  • Atribut HTML
  • Global attribute
  • Event attribute

Sebelumnya: Part 4 Link & List HTML | Lanjut: Part 6 Atribut HTML

Leave a Comment