Formulir dasar

Kumpulkan masukan dengan label dan input yang jelas.

Pahami konsepnya

Form mengelompokkan masukan yang akan dikirim. Hubungkan label dan input memakai atribut for dan id yang sama agar orang bisa mengklik label dan pembaca layar mengenali nama bidang.

Tag <form> adalah wadahnya, dan dua atributnya menentukan nasib data: action berisi alamat halaman yang memproses kiriman, method memilih cara pengiriman — get menempelkan data di URL (cocok untuk pencarian), post mengirimkannya tersembunyi dalam badan permintaan (wajib untuk kata sandi).

Isi form dibangun dari beberapa pelaku: <input> adalah bintangnya — satu tag yang berubah wujud menurut atribut type (text, password, email, number, checkbox, radio, submit). <textarea> menyediakan kotak teks panjang untuk alamat atau pesan; <select> bersama <option> menyajikan pilihan tarik-turun. Kombinasi lengkapnya satu halaman pendaftaran.

Coba contoh kode

<form action="/contact" method="post">
  <label for="email">Alamat email</label>
  <input id="email" name="email" type="email" required />
  <button type="submit">Kirim</button>
</form>

required meminta nilai sebelum formulir dikirim. Halaman tujuan pada action perlu tersedia di aplikasi nyata.

Formulir lengkap

<form action="/daftar" method="post">
  <p>
    <label for="nama">Nama</label><br>
    <input id="nama" name="nama" type="text">
  </p>
  <p>
    <label for="sandi">Kata sandi</label><br>
    <input id="sandi" name="sandi" type="password">
  </p>
  <p>
    Jenis kelamin:
    <label><input type="radio" name="jk" value="L"> Laki-laki</label>
    <label><input type="radio" name="jk" value="P"> Perempuan</label>
  </p>
  <p>
    Bahasa yang dikuasai:
    <label><input type="checkbox" name="web"> Web</label>
    <label><input type="checkbox" name="mobile"> Mobile</label>
  </p>
  <p>
    <label for="kota">Kota asal</label>
    <select id="kota" name="kota">
      <option>Bandung</option>
      <option>Jakarta</option>
    </select>
  </p>
  <p>
    <label for="pesan">Pesan</label><br>
    <textarea id="pesan" name="pesan" rows="4"></textarea>
  </p>
  <button type="submit">Daftar</button>
</form>

Perhatikan tiga wujud input sekaligus: radio (pilih satu — atribut name sama mengikat kelompok), checkbox (pilih banyak), dan password yang menyamarkan ketikan. select menyajikan pilihan tetap, textarea menampung teks panjang. Atribut name pada tiap bidang menjadi kunci data saat formulir dikirim.

Latihan singkat

Tambahkan input nama beserta label yang terhubung benar, lalu tambahkan satu kelompok checkbox hobi.