Form & Input dalam HTML: Membuat Formulir Interaktif

Form itu cara utama ngumpulin data dari pengguna — login, daftar, kontak, survey, belanja online. Tanpa form, website cuma bisa ditampilin, gak bisa interaksi.

1. Form Dasar

<form action="/submit" method="POST">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">
    
    <button type="submit">Kirim</button>
</form>

Atribut Penting

action — URL tujuan data dikirim

<form action="/proses-data.php">

method — Cara kirim data

<!-- POST: data di body (aman buat sensitif) -->
<form method="POST">

<!-- GET: data di URL (buat search/filter) -->
<form method="GET">

Gampangnya:

POST → buat kirim password, data pribadi
GET → buat cari data (search bar)

2. Jenis Input — Sesuai Kebutuhan

Text

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

Email

<input type="email" name="email" placeholder="[email protected]">

Otomatis validasi format email.

Password

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

Teks jadi bullet (•••).

Number

<input type="number" name="usia" min="1" max="100">

Cuma bisa input angka.

Tel

<input type="tel" name="telepon" placeholder="081234567890">

URL

<input type="url" name="website" placeholder="https://example.com">

3. Checkbox & Radio

Checkbox — Bisa Pilih Banyak

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

<input type="checkbox" id="gaming" name="hobi" value="gaming">
<label for="gaming">Gaming</label>

<input type="checkbox" id="reading" name="hobi" value="reading">
<label for="reading">Reading</label>

Radio — Cuma Pilih Satu

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

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

Yang membedakan: Checkbox bisa milih banyak, radio cuma satu. Rahasianya di nama — radio yang satu group harus nama yang sama.

<label for="kota">Kota:</label>
<select id="kota" name="kota">
    <option value="">-- Pilih Kota --</option>
    <option value="batam">Batam</option>
    <option value="jakarta">Jakarta</option>
    <option value="surabaya">Surabaya</option>
</select>

Multiple Select

<select name="bahasa" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

Optgroup — Kelompok Opsi

<select name="mobil">
    <optgroup label="Toyota">
        <option value="avanza">Avanza</option>
        <option value="innova">Innova</option>
    </optgroup>
    <optgroup label="Honda">
        <option value="jazz">Jazz</option>
    </optgroup>
</select>

5. Textarea — Input Teks Panjang

<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="5" cols="50" placeholder="Tulis pesan..."></textarea>

Cocok buat komentar, deskripsi, atau pesan yang panjang.

6. Tombol Form

<button type="submit">Kirim</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Halo!')">Klik Saya</button>

submit → Kirim form
reset → Kosongkan semua input
button → Tombol biasa (butuh JavaScript buat aksi)

7. Label — Penting Buat Aksesibilitas

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

Klik label → fokus ke input. Ini penting banget buat:

Screen reader
User yang pakai keyboard
UX yang lebih baik

Tip: Selalu sambungkan label dengan input pakai for dan id.

8. Validasi Form — Paksa Isi yang Benar

Wajib Diisi

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

Panjang Minimum/Maximum

<input type="text" name="nama" minlength="2" maxlength="50">
<input type="password" name="password" minlength="8">

Range Angka

<input type="number" name="usia" min="1" max="150">

Pattern (Regex)

<!-- Format telepon Indonesia -->
<input type="tel" name="telepon" pattern="08[0-9]{9,12}">

9. Input Lainnya

<!-- Date -->
<input type="date" name="tanggal_lahir">
<input type="time" name="waktu">

<!-- Color -->
<input type="color" name="warna" value="#ff0000">

<!-- Range (slider) -->
<input type="range" name="volume" min="0" max="100">

<!-- File -->
<input type="file" name="foto" accept="image/*">

<!-- Hidden (tidak terlihat) -->
<input type="hidden" name="user_id" value="12345">

10. Fieldset & Legend — Grup yang Rapi

<form>
    <fieldset>
        <legend>Data Pribadi</legend>
        
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </fieldset>
    
    <fieldset>
        <legend>Alamat</legend>
        
        <label for="kota">Kota:</label>
        <input type="text" id="kota" name="kota">
    </fieldset>
</form>

<fieldset> ngebungkus group field. <legend> kasih judul buat group itu.

11. Contoh Form Lengkap

<!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>
    <style>
        form {
            max-width: 400px;
            margin: 20px auto;
        }
        label {
            display: block;
            margin-top: 15px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            box-sizing: border-box;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Form Pendaftaran</h1>
    
    <form action="/register" method="POST">
        <fieldset>
            <legend>Data Pribadi</legend>
            
            <label for="nama">Nama Lengkap *</label>
            <input type="text" id="nama" name="nama" required>
            
            <label for="email">Email *</label>
            <input type="email" id="email" name="email" required>
            
            <label for="password">Password *</label>
            <input type="password" id="password" name="password" minlength="8" required>
            
            <label for="tanggal">Tanggal Lahir</label>
            <input type="date" id="tanggal" name="tanggal">
        </fieldset>
        
        <fieldset>
            <legend>Preferensi</legend>
            
            <label for="kota">Kota</label>
            <select id="kota" name="kota">
                <option value="">-- Pilih --</option>
                <option value="batam">Batam</option>
                <option value="jakarta">Jakarta</option>
            </select>
            
            <label>Hobi:</label>
            <input type="checkbox" id="coding" name="hobi" value="coding">
            <label for="coding">Coding</label>
            
            <input type="checkbox" id="gaming" name="hobi" value="gaming">
            <label for="gaming">Gaming</label>
            
            <label for="pesan">Pesan</label>
            <textarea id="pesan" name="pesan" rows="4"></textarea>
        </fieldset>
        
        <button type="submit">Daftar</button>
        <button type="reset">Reset</button>
    </form>
</body>
</html>

12. Recap

Elemen	Fungsi
`<form>`	Container form
`<input>`	Input field
`<label>`	Label input
`<textarea>`	Text area
`<select>`	Dropdown
`<option>`	Opsi dropdown
`<button>`	Tombol
`<fieldset>`	Grup field
`<legend>`	Judul fieldset

Jenis Input

Type	Kegunaan
`text`	Teks biasa
`email`	Email
`password`	Password
`number`	Angka
`date`	Tanggal
`checkbox`	Pilihan ganda
`radio`	Pilihan tunggal
`file`	Upload file
`submit`	Tombol kirim
`hidden`	Data tersembunyi

Penutup

Form itu elemen interaktif paling penting di HTML. Tanpa form, website cuma bisa ditampilin tanpa interaksi.

Yang perlu diingat:

Selalu pakai label buat aksesibilitas
Pakai required buat field wajib
Pakai fieldset dan legend buat rapi

Di artikel terakhir seri HTML, kita bahas Semantic HTML — elemen yang bikin website lebih aksesibel dan SEO-friendly.