Belajar Web Development

Tabel dan Form

Dua elemen HTML yang paling sering digunakan di dunia nyata: tabel untuk menampilkan data, dan form untuk mengumpulkan input dari pengguna.

Tabel HTML

Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom — misalnya daftar harga, jadwal, atau data karyawan.

Struktur Dasar Tabel

<table border="1">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Kota</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Ahmad</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Siti</td>
            <td>Bandung</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Budi</td>
            <td>Surabaya</td>
        </tr>
    </tbody>
</table>

Penjelasan tag:

TagFungsi
<table>Membuat tabel
<thead>Bagian header (judul kolom)
<tbody>Bagian isi data
<tr>Table Row — satu baris
<th>Table Header — sel judul (tebal)
<td>Table Data — sel data biasa

Menggabungkan Sel

Kadang kita perlu menggabungkan beberapa sel menjadi satu:

<table border="1">
    <tr>
        <th colspan="2">Nama Lengkap</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Ahmad</td>
        <td>Fauzi</td>
        <td>25</td>
    </tr>
</table>
  • colspan="2" — gabungkan 2 kolom secara horizontal
  • rowspan="2" — gabungkan 2 baris secara vertikal

Form HTML

Form adalah cara pengguna mengirim data ke server. Di dunia nyata, form digunakan untuk: login, registrasi, pencarian, pemesanan, dan lainnya.

Struktur Dasar Form

<form action="proses.php" method="POST">
    <!-- Input teks -->
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama">

    <br><br>

    <!-- Input email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="contoh@email.com">

    <br><br>

    <!-- Tombol submit -->
    <button type="submit">Kirim</button>
</form>

Penjelasan penting:

AtributFungsi
actionURL tujuan data dikirim (biasanya file PHP)
methodCara pengiriman: GET (lewat URL) atau POST (tersembunyi)
nameWajib! Nama variabel yang dikirim ke server
idPengenal unik, digunakan oleh <label>
placeholderTeks petunjuk di dalam input
Kenapa

name Penting? Atribut name adalah kunci yang digunakan PHP untuk membaca data dari form. Tanpa name, data tidak akan terkirim ke server!

Contoh: <input name="email"> → Di PHP dibaca dengan $_POST['email']

Jenis-jenis Input

HTML menyediakan banyak tipe input:

<form action="proses.php" method="POST">
    <!-- Teks biasa -->
    <input type="text" name="nama" placeholder="Nama lengkap">

    <!-- Password (karakter tersembunyi) -->
    <input type="password" name="password" placeholder="Password">

    <!-- Email (validasi otomatis) -->
    <input type="email" name="email" placeholder="Email">

    <!-- Angka -->
    <input type="number" name="umur" min="1" max="150" placeholder="Umur">

    <!-- Tanggal -->
    <input type="date" name="tanggal_lahir">

    <!-- Nomor telepon -->
    <input type="tel" name="telepon" placeholder="08xxxxxxxxxx">

    <!-- URL -->
    <input type="url" name="website" placeholder="https://...">

    <!-- File upload -->
    <input type="file" name="foto">

    <!-- Hidden (tersembunyi, untuk data tambahan) -->
    <input type="hidden" name="user_id" value="123">
</form>

Textarea (Teks Panjang)

Untuk input teks yang panjang seperti pesan atau komentar:

<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="5" cols="40" placeholder="Tulis pesan kamu di sini..."></textarea>

Select (Dropdown)

Untuk memilih satu dari beberapa opsi:

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

Radio Button (Pilih Satu)

<p>Jenis Kelamin:</p>
<input type="radio" id="laki" name="gender" value="L">
<label for="laki">Laki-laki</label>

<input type="radio" id="perempuan" name="gender" value="P">
<label for="perempuan">Perempuan</label>
Perhatikan!

Radio button dengan name yang sama akan menjadi satu grup — hanya satu yang bisa dipilih. Kalau name berbeda, semua bisa dipilih sekaligus.

Checkbox (Pilih Banyak)

<p>Hobi:</p>
<input type="checkbox" id="coding" name="hobi[]" value="coding">
<label for="coding">Coding</label>

<input type="checkbox" id="baca" name="hobi[]" value="membaca">
<label for="baca">Membaca</label>

<input type="checkbox" id="game" name="hobi[]" value="game">
<label for="game">Bermain Game</label>
Tanda

[] di name name="hobi[]" menggunakan tanda kurung siku [] agar PHP bisa menerima beberapa nilai sekaligus sebagai array.

Latihan: Form Pendaftaran

Buat file daftar.html di folder ~/Herd/belajar/:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Pendaftaran</title>
</head>
<body>
    <h1>Form Pendaftaran Siswa</h1>

    <form action="proses-daftar.php" method="POST">
        <table>
            <tr>
                <td><label for="nama">Nama Lengkap</label></td>
                <td><input type="text" id="nama" name="nama" required></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" id="email" name="email" required></td>
            </tr>
            <tr>
                <td><label for="tgl_lahir">Tanggal Lahir</label></td>
                <td><input type="date" id="tgl_lahir" name="tanggal_lahir"></td>
            </tr>
            <tr>
                <td>Jenis Kelamin</td>
                <td>
                    <input type="radio" id="laki" name="gender" value="L">
                    <label for="laki">Laki-laki</label>
                    <input type="radio" id="perempuan" name="gender" value="P">
                    <label for="perempuan">Perempuan</label>
                </td>
            </tr>
            <tr>
                <td><label for="kota">Kota</label></td>
                <td>
                    <select id="kota" name="kota">
                        <option value="">-- Pilih --</option>
                        <option value="jakarta">Jakarta</option>
                        <option value="bandung">Bandung</option>
                        <option value="surabaya">Surabaya</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="pesan">Pesan</label></td>
                <td><textarea id="pesan" name="pesan" rows="4" cols="30"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit">Daftar Sekarang</button></td>
            </tr>
        </table>
    </form>
</body>
</html>
Atribut

required Menambahkan required pada input membuat browser otomatis memvalidasi bahwa field tersebut harus diisi sebelum form bisa dikirim. Ini adalah validasi sisi klien yang paling simpel!

Selanjutnya

Sekarang kamu sudah bisa membuat tabel dan form. Mari lanjut ke Semantic HTML → untuk belajar membuat struktur halaman yang lebih rapi dan profesional.