Belajar HTML5 Minggu Kedua: Form, Tabel, dan Media yang Bikin Halaman Web Jadi Lebih Dinamis

Hai teman-teman, kembali lagi di artikel belajar HTML5! Kalau minggu pertama kita sudah kenalan sama HTML dan belajar elemen-elemen dasar, sekarang di minggu kedua kita akan melangkah lebih jauh. Kita bakal belajar membuat form, tabel, dan memasukkan media ke dalam halaman web kita. Wah, seru banget kan? Jadi, yuk kita langsung mulai!

Hari 1-2: Membuat Form di HTML5

Formulir atau form itu ibarat jembatan komunikasi antara pengguna dan website. Kalau kalian sering isi data di website—entah itu login, daftar akun, atau mengisi survey—semua itu dilakukan melalui form. Di sini, kita akan belajar membuat form sederhana dengan elemen-elemen dasar yang biasa digunakan.

Elemen Form Dasar

Untuk membuat form, kita mulai dengan tag <form>. Form ini biasanya punya atribut action dan method. Misalnya:

<form action="/submit" method="POST">
  <!-- elemen form lainnya -->
</form>

Atribut action ini menunjukkan ke mana data dari form akan dikirim, sementara method mengatur cara pengiriman data, biasanya POST atau GET.

Sekarang, mari kita lihat elemen-elemen penting dalam form.

1. Input Text dan Password

Elemen input adalah salah satu yang paling sering digunakan. Untuk memasukkan teks biasa, kita pakai tipe text, sementara untuk password kita pakai tipe password.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

<label for="password">Password:</label>
<input type="password" id="password" name="password">

2. Checkbox dan Radio Button

Kalau teman-teman ingin menampilkan pilihan yang bisa di-check, kita bisa gunakan checkbox dan radio button. Perbedaannya, kalau checkbox bisa memilih lebih dari satu, sedangkan radio button hanya bisa memilih satu saja dari beberapa opsi.

<label for="subscribe">Subscribe:</label>
<input type="checkbox" id="subscribe" name="subscribe">

<label for="gender">Pria</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">Wanita</label>
<input type="radio" id="female" name="gender" value="female">

3. Textarea

Untuk memasukkan teks yang lebih panjang, misalnya komentar atau pesan, kita bisa pakai <textarea>.

<label for="message">Pesan:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

4. Select Dropdown

Dropdown adalah elemen pilihan di mana kita bisa memilih salah satu dari banyak opsi yang ada. Biasanya digunakan saat pilihan cukup banyak.

<label for="city">Pilih kota:</label>
<select id="city" name="city">
  <option value="jakarta">Jakarta</option>
  <option value="bandung">Bandung</option>
  <option value="surabaya">Surabaya</option>
</select>

5. Button

Untuk mengirim data yang sudah kita isi di form, kita butuh tombol submit. Bisa menggunakan elemen <button> atau input bertipe submit.

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

Nah, itulah beberapa elemen penting dalam form. Sekarang teman-teman bisa coba gabungkan semua elemen di atas ke dalam satu form. Misalnya seperti ini:

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <label for="subscribe">Subscribe:</label>
  <input type="checkbox" id="subscribe" name="subscribe"><br>

  <label for="male">Pria</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="female">Wanita</label>
  <input type="radio" id="female" name="gender" value="female"><br>

  <label for="city">Pilih kota:</label>
  <select id="city" name="city">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="surabaya">Surabaya</option>
  </select><br>

  <label for="message">Pesan:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br>

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

Dengan form sederhana ini, teman-teman sudah bisa membuat halaman web yang bisa menangkap input pengguna.

Hari 3-4: Membuat Tabel

Selanjutnya, kita akan belajar tentang tabel. HTML punya elemen khusus untuk menampilkan data yang terstruktur, seperti daftar harga, jadwal, atau data statistik.

Elemen Tabel Dasar

Untuk membuat tabel, kita mulai dengan tag <table>. Setiap tabel terdiri dari baris (<tr>) dan kolom yang disebut sel (<td> untuk data, dan <th> untuk header).

<table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Aldo</td>
    <td>25</td>
    <td>Jakarta</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>30</td>
    <td>Bandung</td>
  </tr>
</table>

Tabel di atas akan menampilkan tiga kolom dengan judul: Nama, Usia, dan Kota. Kemudian, setiap baris mewakili satu orang dengan nama, usia, dan kota asalnya.

Atribut Tabel

1. colspan dan rowspan

Terkadang, kita ingin satu sel menggabungkan beberapa kolom atau baris. Untuk itu, kita bisa gunakan atribut colspan dan rowspan.

<table>
  <tr>
    <th colspan="2">Informasi Pengguna</th>
  </tr>
  <tr>
    <td>Nama</td>
    <td>Usia</td>
  </tr>
  <tr>
    <td>Aldo</td>
    <td>25</td>
  </tr>
</table>

Sel Informasi Pengguna akan membentang dua kolom, memberi lebih banyak ruang untuk judul.

Hari 5-7: Menambahkan Media (Video dan Audio)

Sekarang kita masuk ke bagian yang lebih seru: menambahkan video dan audio ke halaman web kita! HTML5 mempermudah kita untuk menambahkan elemen media tanpa harus bergantung pada plugin seperti Flash.

Menambahkan Video

Untuk menambahkan video, kita bisa gunakan tag <video>. Video ini bisa diputar langsung di browser dengan kontrol yang disediakan oleh HTML.

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Browser kamu tidak mendukung pemutar video.
</video>

Atribut controls menambahkan kontrol pemutaran seperti tombol play/pause, volume, dan lainnya.

Menambahkan Audio

Sama seperti video, kita juga bisa menambahkan audio dengan tag <audio>:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Browser kamu tidak mendukung pemutar audio.
</audio>

Kontrol audio juga otomatis muncul dengan menambahkan atribut controls.

Penutup

Nah, teman-teman, itu dia rencana belajar HTML5 untuk minggu kedua. Kita sudah belajar tentang cara membuat form untuk menerima input dari pengguna, menampilkan data dengan tabel, dan menambahkan elemen media seperti video dan audio.

Jangan lupa untuk terus berlatih ya! Semakin sering teman-teman mencoba kode HTML, semakin cepat juga kalian menguasainya. Minggu depan, kita akan lanjut belajar elemen semantik dan lebih banyak fitur keren di HTML5. Tetap semangat dan selamat belajar!

Terima kasih sudah membaca, dan sampai ketemu di artikel selanjutnya!

---

List Part Artikel