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.

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.

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.