Include extra values

Sometimes the control that triggers the request is not the control that owns the value. HTMX gives you two ways to add extra fields without duplicating the whole form.

hx-include adds successful controls outside the normal request context. A toolbar button can include a separate search input:

<input id="task-filter" name="q" type="search">

<button
  hx-get="/tasks"
  hx-include="#task-filter"
  hx-target="#task-list">
  Apply filter
</button>

Use a stable selector and verify that the selected element contains named controls. Relative selectors are resolved from the element that triggers the request, which can surprise you when hx-include is inherited from a parent. I test inherited includes by clicking the child control and reading the outgoing query string, not by assuming the parent markup alone tells the story.

hx-vals adds a JSON-shaped set of values:

<button hx-delete="/tasks/42" hx-vals='{"source":"list"}'>Delete</button>

Prefer ordinary named controls when the value is part of a form a person can understand. Use hx-vals for a small piece of request context, not as a hidden client-side data model. If you need ten keys in hx-vals, you probably need a real form or a redesign of what the server expects.

Both mechanisms send client-controlled values. source=list can help analytics or rendering, but it cannot prove where the request came from and must never grant permission.

Inspect the outgoing request and confirm each included value appears exactly once. Duplicate field names may be intentional arrays or an accidental collision your server parses unpredictably. When a filter and a sort control both use name="q", you get one winner, not two fields.

Try this on your own project: add hx-include to a button that reads from a field outside its form, then confirm the Network panel shows both values.