htmx: htmx, include hidden input fields outside of a form

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

Using htmx I had a list of items, think a list of tasks, with task text and more details, and inside this list a “delete button”.

I had the need of sending some information that you’d usually use a hidden input element for.

Something invisible to the user but essential for my app needs.

But I couldn’t use a form for this, I just used a button element, because we can’t nest forms.

Turns our we can use the hx-vals attribute and pass a list of key-value pairs that are going to be added to the request just like a hidden input field would:

<button hx-delete="/item/..." hx-vals='{"key": "value"}' hx-target="#response">
  Delete
</button>

Lessons in this unit:

0:	Introduction
1:	Why htmx
2:	The core idea of htmx
3:	Installing htmx
4:	Doing a GET request
5:	Swap
6:	POST request
7:	Targets
8:	Loading indicator
9:	Confirming actions, and prompts
10:	Triggers
11:	Request headers
12:	Response headers
13:	Events
14:	Redirect after request
15:	Send files using htmx.ajax()
16:	Perform something on page load
17:	Conditionally hide HTML elements based on HTMX request status
18:	htmx + Alpine template tag
19:	▶︎ htmx, include hidden input fields outside of a form
20:	htmx trigger request via JS event