HTMX membuat form submission menjadi AJAX tanpa JavaScript.

Form Dasar

<form hx-post="/api/contacts" hx-target="#result" hx-swap="innerHTML">
  <input name="nama" required />
  <input name="email" type="email" required />
  <button type="submit">Simpan</button>
</form>
<div id="result"></div>

hx-include

<!-- Include input dari luar form -->
<input id="filter" name="filter" value="active" />
<button hx-get="/api/todos" hx-include="#filter">Filter</button>

Reset Form Setelah Submit

Cara paling bersih: biarkan server yang kembalikan form kosong sebagai response HTML. HTML yang kembali akan menggantikan form lama, jadi input otomatis "reset":

<!-- Response dari server setelah POST sukses: -->
<form hx-post="/api/items" hx-target="this" hx-swap="outerHTML">
  <input name="item" />
  <button>Tambah</button>
</form>

Ini pola HTMX yang idiomatis — server mengontrol state UI.

💡 Ada juga cara sisi client pakai hx-on::after-request="this.reset()" (dibahas di lesson Events HTMX). Event listener itu lebih fleksibel untuk kasus lain, tapi untuk sekadar reset form, solusi "kirim form baru dari server" di atas lebih sederhana dan konsisten dengan filosofi HTMX.

Server response bisa berisi HTML baru yang langsung ditampilkan di target.