Oke, saatnya kita masuk ke salah satu bagian paling interaktif dan penting di web: Formulir (Form) HTML. Ini adalah cara utama website ngumpulin input atau data dari pengunjung.

Form HTML: Jembatan Interaksi Pengguna dengan Websitemu!

Pernah ngisi formulir online? Entah itu buat daftar akun baru, login, nulis komentar, mesen barang, atau sekadar ngirim pesan lewat halaman kontak? Nah, semua itu dibuat pake Formulir HTML!

Formulir adalah elemen krusial yang ngebolehin pengguna buat masukin data dan ngirim data itu ke server (atau diproses di sisi klien pake JavaScript). Tanpa form, interaksi di web bakal terbatas banget.

Yuk, kita pelajari cara bikin form yang fungsional dan user-friendly!

Elemen Dasar Formulir: <form> Si Pembungkus Utama

Semua elemen input dan kontrol formulir harus dibungkus di dalam tag <form>. Tag ini nandain awal dan akhir dari sebuah formulir.

<form>
    <!-- Semua elemen input, label, tombol, dll. ditaruh di sini -->
</form>

Tag <form> punya dua atribut penting yang nentuin gimana data formulir itu diproses:

1. action:

   • Atribut ini nentuin URL atau alamat tujuan ke mana data formulir akan dikirim pas pengguna nge-klik tombol submit.
   • URL ini biasanya adalah skrip di sisi server (misalnya, file PHP, Python, Node.js) yang bakal nerima dan ngolah data tersebut (misal, nyimpen ke database, ngirim email, dll).
   • Kalau action dikosongin atau gak ada, data akan dikirim ke URL halaman saat ini.
   • Contoh: <form action="/proses-pendaftaran.php">

2. method:

   • Atribut ini nentuin metode HTTP yang dipake buat ngirim data formulir. Dua nilai yang paling umum adalah:
     • GET:
       • Data formulir bakal ditempelkan (appended) ke URL di atribut action sebagai query string (misalnya, proses.php?nama=Budi&email=budi@contoh.com).
       • Kapan dipake? Cocok buat form pencarian atau form yang datanya gak sensitif dan gak terlalu panjang. Data yang dikirim keliatan di URL, jadi gak aman buat password atau info pribadi. Ada batasan panjang URL juga.
       • Ini metode default kalau atribut method gak dispesifikin.
     • POST:
       • Data formulir dikirim di dalam body dari HTTP request, jadi gak keliatan di URL.
       • Kapan dipake? Ini metode yang paling umum dan disarankan buat form yang ngirim data sensitif (kayak password), data yang panjang, atau data yang bakal ngubah sesuatu di server (misal, nambah data baru ke database). Gak ada batasan ukuran data yang signifikan.
   • Contoh: <form action="/login.php" method="POST">

Elemen Input Paling Serbaguna: <input>

Tag <input> ini adalah "jagoan" utama dalam formulir. Dia bisa berubah jadi macem-macem jenis field input tergantung nilai atribut type-nya. <input> ini adalah elemen kosong (empty element).

Beberapa nilai type yang paling sering dipake buat <input>:

• type="text": Kotak input teks satu baris biasa.

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

• type="password": Mirip type="text", tapi karakter yang diketik bakal disensor (biasanya jadi bulatan atau bintang). Cocok buat input password.

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

• type="email": Kotak input yang dirancang khusus buat alamat email. Browser modern biasanya ngasih validasi dasar buat ngecek format emailnya. Di beberapa perangkat mobile, keyboard-nya juga bisa otomatis nyesuaiin buat ngetik email (misal, ada tombol @ dan .).

  <label for="surel">Alamat Email:</label>
  <input type="email" id="surel" name="alamat_email" placeholder="contoh@email.com">

• type="number": Kotak input buat angka. Biasanya ada tombol panah atas-bawah buat nambah/ngurangin angka. Bisa dikasih atribut min, max, dan step.

  <label for="usia">Usia:</label>
  <input type="number" id="usia" name="umur_user" min="0" max="120">

• type="date": Nampilin date picker (pemilih tanggal) di browser yang support. Format tanggal bisa beda-beda antar browser.

  <label for="tgl_lahir">Tanggal Lahir:</label>
  <input type="date" id="tgl_lahir" name="tanggal_lahir">

  Ada juga type="time", type="datetime-local", type="month", type="week".

• type="checkbox": Kotak centang. Pengguna bisa milih nol, satu, atau beberapa opsi dari sekelompok checkbox. Setiap checkbox idealnya punya atribut value yang unik.

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

  (Perhatikan name="hobi[]" dengan kurung siku, ini cara umum di PHP buat nerima multiple values dari checkbox dengan nama yang sama).

• type="radio": Tombol radio. Pengguna cuma bisa milih satu opsi dari sekelompok tombol radio yang punya atribut name yang sama. Wajib ada atribut value.

  <p>Jenis Kelamin:</p>
  <input type="radio" id="pria" name="jenis_kelamin" value="L" required>
  <label for="pria">Pria</label><br>
  <input type="radio" id="wanita" name="jenis_kelamin" value="P">
  <label for="wanita">Wanita</label>

• type="submit": Nampilin tombol yang pas diklik bakal ngirim data formulir ke URL yang ditentuin di atribut action form. Teks di tombol bisa diubah pake atribut value.

  <input type="submit" value="Kirim Pendaftaran">

• type="reset": Nampilin tombol yang pas diklik bakal ngereset (ngosongin) semua isian formulir ke nilai defaultnya.

  <input type="reset" value="Ulangi Isi Form">

• type="button": Nampilin tombol generik yang gak punya perilaku default. Biasanya dipake bareng JavaScript buat micu aksi tertentu.

  <input type="button" value="Cek Validasi" onclick="validasiForm()">

• type="file": Nampilin tombol "Choose File" (atau sejenisnya) yang ngebolehin pengguna buat milih file dari komputernya buat di-upload.

  • PENTING: Kalau form-mu ada input file, kamu wajib nambahin atribut enctype="multipart/form-data" ke tag <form>-nya.

  <form action="/upload-avatar.php" method="POST" enctype="multipart/form-data">
      <label for="avatar">Upload Foto Profil:</label>
      <input type="file" id="avatar" name="file_avatar" accept="image/png, image/jpeg"> <!-- 'accept' buat filter tipe file -->
      <input type="submit" value="Upload">
  </form>

• type="hidden": Input yang gak keliatan sama pengguna, tapi nilainya tetep dikirim bareng data form lain. Berguna buat ngirim data tambahan yang gak perlu diisi user (misal, ID produk, token keamanan).

  <input type="hidden" name="id_produk" value="12345">

Dan masih banyak lagi type lain seperti range, color, search, tel, url.

Atribut Umum pada <input>:

• name: Sangat penting! Ini adalah nama variabel yang bakal dipake buat ngirim nilai input ini ke server. Tanpa name, data dari input ini gak bakal kekirim (kecuali buat tombol submit/reset/button).
• value: Nilai awal (default) dari input field. Buat checkbox dan radio, ini nilai yang dikirim kalau opsi itu dipilih. Buat tombol submit/reset/button, ini teks yang tampil di tombol.
• id: Pengenal unik buat input field. Dipake buat ngehubungin sama elemen <label> dan buat JavaScript.
• placeholder: Teks bantuan (hint) yang tampil di dalem input field sebelum pengguna ngetik. Otomatis ilang pas pengguna mulai ngetik.

  <input type="text" name="username" placeholder="Masukkan username Anda">

• required: Atribut boolean. Kalau ada, pengguna wajib ngisi field ini sebelum form bisa disubmit. Browser bakal nampilin pesan error kalau kosong.
• disabled: Atribut boolean. Bikin field gak bisa diisi atau diklik. Nilainya gak bakal dikirim.
• readonly: Atribut boolean. Bikin field gak bisa diubah isinya sama pengguna, tapi nilainya tetep dikirim.
• checked: (Untuk checkbox dan radio) Atribut boolean. Bikin opsi itu terpilih secara default.
• min, max, step: (Untuk number, range, date, dll.) Nentuin nilai minimum, maksimum, dan interval langkah.
• maxlength: (Untuk text, password, email, dll.) Batasan jumlah karakter maksimal yang bisa diinput.
• pattern: (Untuk text, tel, email, password, dll.) Nentuin pola (regular expression) yang harus dipenuhi sama inputan pengguna buat validasi.

<label>: Ngasih Nama ke Field Input (Penting buat Aksesibilitas!)

Elemen <label> dipake buat ngasih deskripsi atau label ke sebuah elemen input. Ini penting banget buat:

1. User Experience: Pengguna jadi tau field itu buat ngisi apa.
2. Aksesibilitas:
   • Pengguna screen reader bakal dengerin label ini pas fokus ke input field.
   • Kalau kamu klik teks labelnya, input field yang terhubung dengannya bakal otomatis aktif/fokus.

Cara ngehubungin <label> dengan <input> adalah pake atribut for di <label> yang nilainya sama dengan atribut id di <input>.

<label for="email_user">Alamat Email Anda:</label>
<input type="email" id="email_user" name="email">
 
<!-- Atau bisa juga input dibungkus di dalam label (implicit association) -->
<label>
    Nama Depan:
    <input type="text" name="nama_depan">
</label>

Selalu gunakan <label> untuk setiap input field yang terlihat!

<textarea>: Buat Input Teks yang Panjang (Multi-baris)

Kalau kamu butuh input teks yang bisa nampung banyak baris (misalnya buat kolom komentar, pesan, atau alamat lengkap), pake elemen <textarea>.

<label for="pesan_user">Pesan Anda:</label><br>
<textarea id="pesan_user" name="isi_pesan" rows="5" cols="40" placeholder="Tulis pesanmu di sini..."></textarea>

• Atribut rows nentuin tinggi awal textarea (jumlah baris teks yang keliatan).
• Atribut cols nentuin lebar awal textarea (jumlah karakter per baris).
• Teks di antara <textarea> dan </textarea> bakal jadi nilai defaultnya.

<select> dan <option>: Bikin Dropdown List (Daftar Pilihan)

Buat ngasih pilihan ke pengguna dalam bentuk dropdown (daftar pilihan ke bawah), kita pake kombinasi elemen <select> dan <option>.

• <select>: Pembungkus utama dropdown. Atribut name-nya penting.
• <option>: Nentuin masing-masing pilihan di dalem dropdown. Atribut value pada <option> adalah nilai yang bakal dikirim ke server kalau opsi itu dipilih. Teks di antara <option> dan </option> adalah yang tampil ke pengguna.
• Atribut selected pada <option> bikin opsi itu jadi pilihan default.
• Atribut multiple pada <select> ngebolehin pengguna milih lebih dari satu opsi (biasanya tampilannya jadi beda, bukan dropdown biasa).

<label for="kota_asal">Pilih Kota Asal:</label>
<select id="kota_asal" name="kota">
    <option value="">-- Pilih Kota --</option>
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="surabaya" selected>Surabaya</option> <!-- Surabaya jadi default -->
    <option value="medan">Medan</option>
</select>

Kita juga bisa ngelompokin <option> pake tag <optgroup label="Nama Grup">.

<button>: Alternatif Buat Bikin Tombol

Selain <input type="submit">, <input type="reset">, dan <input type="button">, kita juga bisa bikin tombol pake elemen <button>.

Kelebihan <button>:

• Kamu bisa naruh konten HTML lain di dalemnya (misal, gambar, ikon, teks dengan styling beda), gak cuma teks biasa kayak di value input.
• Secara default, kalau <button> ada di dalem <form> dan gak punya atribut type, dia bakal berperilaku kayak type="submit".
• Atribut type pada <button> bisa diisi:
  • "submit" (default): Ngirim form.
  • "reset": Ngereset form.
  • "button": Tombol generik tanpa aksi default (buat JavaScript).

<button type="submit">
    <img src="ikon-kirim.png" alt="" width="16" height="16"> Kirim Pesanan
</button>
 
<button type="button" onclick="alert('Tombol diklik!')">Klik Saya</button>

<fieldset> dan <legend>: Mengelompokkan Elemen Form yang Berhubungan

Kalau form-mu panjang dan punya beberapa bagian yang logis, kamu bisa ngelompokin elemen-elemen input yang berhubungan pake <fieldset>. Terus, kasih judul buat grup itu pake <legend>.

Ini bagus buat visual (biasanya ada garis border di sekeliling fieldset) dan aksesibilitas (screen reader bisa ngebacain legend-nya).

<form>
    <fieldset>
        <legend>Informasi Pribadi</legend>
        <label for="nama_lengkap">Nama Lengkap:</label>
        <input type="text" id="nama_lengkap" name="nama"><br><br>
        <label for="email_kontak">Email:</label>
        <input type="email" id="email_kontak" name="email">
    </fieldset>
 
    <fieldset>
        <legend>Detail Pesanan</legend>
        <label for="produk">Produk:</label>
        <select id="produk" name="produk_pilihan">
            <option value="A">Produk A</option>
            <option value="B">Produk B</option>
        </select><br><br>
        <label for="jumlah_item">Jumlah:</label>
        <input type="number" id="jumlah_item" name="jumlah" min="1">
    </fieldset>
 
    <input type="submit" value="Proses Pesanan">
</form>

Wah, banyak banget ya elemen dan atribut buat bikin form! Tapi ini semua penting biar kamu bisa bikin form yang lengkap, fungsional, dan ramah pengguna. Jangan takut buat nyoba-nyoba kombinasi elemen dan atribut ini.

Ingat, form adalah gerbang utama interaksi. Bikinlah form yang jelas, mudah diisi, dan jangan lupa soal validasi (baik di sisi klien pake atribut HTML5 atau JavaScript, maupun di sisi server).

Materi selanjutnya, kita bakal ngobrolin soal HTML Semantik. Kenapa sih penting nulis kode HTML yang "bermakna"? Yuk cari tau!