Hari 4: Tabel & Form HTML5

Tabel semantik dan form HTML5 interaktif — edit, preview, dan uji validasi browser langsung di halaman.

Pengantar

Di Hari 3 konten dasar sudah ada. Hari ini: tabel untuk data terstruktur, dan form untuk menerima input — keduanya bisa dicoba di preview.

Tabel semantik

Ubah status hari atau tambah baris baru.

Jadwal belajar

<table>
<caption>Jadwal Belajar 7 Hari HTML5</caption>
<thead>
  <tr>
    <th scope="col">Hari</th>
    <th scope="col">Topik</th>
    <th scope="col">Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>Pengantar</td>
    <td>Selesai</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Semantik</td>
    <td>Selesai</td>
  </tr>
  <tr>
    <th scope="row">4</th>
    <td>Tabel &amp; Form</td>
    <td>Sedang dikerjakan</td>
  </tr>
</tbody>
</table>

Preview

Form dengan label

Isi form di preview, lalu coba submit dengan field kosong untuk melihat validasi bawaan browser.

Form daftar belajar

<form action="#" method="get">
<p>
  <label for="nama">Nama</label><br />
  <input id="nama" name="nama" type="text" required />
</p>
<p>
  <label for="email">Email</label><br />
  <input id="email" name="email" type="email" required />
</p>
<p>
  <label for="topik">Topik favorit</label><br />
  <select id="topik" name="topik">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>
</p>
<fieldset>
  <legend>Mode belajar</legend>
  <label>
    <input type="radio" name="mode" value="pagi" checked />
    Pagi
  </label>
  <label>
    <input type="radio" name="mode" value="malam" />
    Malam
  </label>
</fieldset>
<p>
  <label>
    <input type="checkbox" name="setuju" required />
    Saya setuju mengikuti series ini
  </label>
</p>
<button type="submit">Daftar</button>
</form>

Preview

Input modern

Eksperimen tipe input

Preview

Kuis hari 4

Kenapa label sebaiknya dihubungkan ke input dengan for dan id?

Atribut mana yang membuat field wajib diisi sebelum submit?

Checklist

0/4 selesai

Membuat tabel dengan caption, thead, dan tbody
Membangun form dengan label yang benar
Menguji validasi required di preview
Mencoba minimal satu tipe input HTML5 baru

Hari 4: Tabel & Form HTML5

Pengantar

Tabel semantik

Form dengan label

Input modern

Kuis hari 4

Checklist

Komentar