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