Latihan 1 dari materi Form dengan HTMX di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya <form> berisi <input name="item" required> dan tombol Tambah, plus <ul id="items">. Biarkan isinya, lalu tambahkan atribut ini di tag <form>:
hx-post="/api/items", supaya form dikirim sebagai POST ke alamat itu.hx-target="#items" dan hx-swap="beforeend", supaya item baru masuk di akhir daftar dan item lama tetap.hx-on::after-request="if (event.detail.successful) this.reset()", supaya kotak isiannya dikosongkan cuma kalau request-nya berhasil. Kalau gagal, isiannya tetap, jadi pembeli gak perlu mengetik ulang.Yang dicek:
<form>, dengan hx-post persis /api/items, hx-target persis #items, dan hx-swap persis beforeend.hx-on::after-request (dua titik dua) yang isinya gak kosong dan memeriksa event.detail.successful.hx-post dan hx-on: di luar komentar.Di pratinjau, htmx berjalan: menekan Tambah mengirim POST /api/items, yang dijawab 404 karena belum ada contoh balasan, jadi daftarnya tetap kosong dan isiannya gak dikosongkan. Mau melihatnya jalan? Tambahkan <template id="contoh-balasan"><li>Kopi</li></template> di bawah daftar. Template itu gak dinilai.
