Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

Kalau lo lagi belajar HTML, pasti udah gak asing sama yang namanya form. Form ini penting banget buat ngumpulin data dari user, misalnya buat login, daftar akun, atau bahkan sekadar cari sesuatu di website. Nah, biar form lo makin kece dan fungsional, lo wajib paham HTML Form Attributes.

Di artikel ini, gue bakal bahas beberapa atribut penting yang sering dipakai di <form>, yaitu:

• action
• target
• method
• autocomplete
• novalidate

Gak cuma itu, gue juga bakal kasih list lengkap semua atribut yang bisa dipakai di <form>. Cus, kita bahas satu-satu!

1. The Action Attribute

Atribut action ini fungsinya buat ngasih tahu ke mana data dari form bakal dikirim setelah user klik submit. Biasanya, ini berupa URL dari server yang bakal nge-handle datanya.

Contoh Penggunaan:

<form action="proses.php">
  <input type="text" name="nama">
  <button type="submit">Kirim</button>
</form>

Hasilnya:

Di contoh ini, data dari form bakal dikirim ke proses.php buat diproses lebih lanjut.

Kalau lo gak kasih action, secara default data bakal dikirim ke halaman yang sama.

2. The Target Attribute

Atribut target ini buat nentuin di mana hasil submit form bakal ditampilkan. Ada beberapa opsi yang bisa lo pakai:

• _self → (default) buka di tab/halaman yang sama.
• _blank → buka di tab baru.
• _parent → buka di frame parent (kalau pakai iframe).
• _top → buka di halaman penuh, nutup semua frame.

Contoh Penggunaan:

<form action="hasil.php" target="_blank">
  <input type="text" name="email">
  <button type="submit">Daftar</button>
</form>

Hasilnya:

Kalau user klik submit, halaman hasil.php bakal kebuka di tab baru.

3. The Method Attribute

Atribut method ini buat nentuin cara pengiriman data ke server. Ada dua opsi utama:

• GET → data dikirim lewat URL (cocok buat pencarian atau form sederhana).
• POST → data dikirim lewat body request (lebih aman buat data sensitif).

Contoh Penggunaan:

<form action="login.php" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

Hasilnya:

Kalau pakai POST, data gak bakal kelihatan di URL, jadi lebih aman buat form login atau registrasi.

4. The Autocomplete Attribute

Atribut autocomplete ini buat ngontrol autofill di browser. Kalau diaktifkan (on), browser bakal nyimpen input user biar bisa diisi otomatis di lain waktu. Kalau dimatikan (off), browser gak bakal nyimpen datanya.

Contoh Penggunaan:

<form action="simpan.php" autocomplete="on">
  <input type="text" name="nama">
  <button type="submit">Simpan</button>
</form>

Hasilnya:

Kalau autocomplete="on", browser bisa nyaranin inputan berdasarkan data sebelumnya.

5. The Novalidate Attribute

Atribut novalidate ini gunanya buat ngilangin validasi bawaan dari browser. Secara default, browser punya validasi sendiri buat input (misalnya, email harus format yang bener). Kalau lo gak mau itu terjadi, tinggal tambahin novalidate.

Contoh Penggunaan:

<form action="submit.php" novalidate>
  <input type="email" name="email" required>
  <button type="submit">Kirim</button>
</form>

Hasilnya:

Di contoh ini, meskipun ada required, browser gak bakal ngecek apakah input kosong atau gak. Semua tanggung jawab validasi ada di backend atau JavaScript.

6. List Lengkap Atribut <form>

Selain atribut-atribut di atas, ada beberapa atribut lain yang bisa lo pakai di <form>:

Kesimpulan

Atribut <form> ini penting banget buat nentuin cara kerja form di website lo. Biar gampang diingat:
✅ action → ke mana data dikirim
✅ target → di mana hasilnya muncul
✅ method → pakai GET atau POST
✅ autocomplete → autofill on/off
✅ novalidate → matiin validasi browser

Semoga artikel ini bikin lo makin jago ngoding! Kalau ada pertanyaan, langsung aja tulis di kolom komentar. Selamat ngoding!