Triggers, forms, and feedback
Start from natural triggers
Use the element event people already expect before customizing request timing.
Before you customize timing, use the event the element already fires. HTMX picks a default trigger from the tag:
- forms trigger on
submit - inputs, textareas, and selects trigger on
change - most other elements trigger on
click
That means a plain form works with browser conventions:
<form action="/tasks" method="post" hx-post="/tasks">
<label>Task <input name="title"></label>
<button>Add task</button>
</form>
Pressing Enter in the field and clicking the button both submit the form. HTMX runs native constraint validation before it sends the request. Required fields, email formats, and pattern rules still apply.
Start here. A click handler on a <div> loses button semantics and keyboard behavior. A form that listens only to a button click can miss Enter and alternate submit buttons.
Reach for hx-trigger when timing or a different event genuinely improves the feature. Debounced search is the classic case. Even then, keep the natural fallback working.
Select elements are worth a special mention. HTMX listens for change, which fires when the selection moves to a different option. That matches how most filter dropdowns should work: pick a status, send one request, update the list.
Test with a keyboard, not only a mouse. Tab to the submit control and activate it. Open the Network panel and confirm one user action produces one intended request. Duplicate submits from overlapping triggers are a common bug, and they show up immediately in the network log.
If you add hx-trigger later, document why. The next developer should not have to guess why keyup replaced the form’s natural submit.
Lesson completed