Triggers, forms, and feedback
Start from natural triggers
Use the element event people already expect before customizing request timing.
8 minute lesson
HTMX chooses a default trigger from the element:
- forms trigger on
submit - inputs, textareas, and selects trigger on
change - most other elements trigger on
click
That makes a form work 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 activating the button both submit the form. HTMX also respects native constraint validation before issuing the request.
Start with the event people already expect. A click handler on a <div> loses button semantics and keyboard behavior. A form listening only to a button click can miss keyboard submission and alternate submit buttons.
Use hx-trigger when timing or a different event improves the feature, such as debounced search. Test the interaction with a keyboard and inspect the Network panel to confirm one user action produces one intended request.
Lesson completed