hx-action

View as Markdown Open this page as Markdown
For LLMs
llms.txt htmx overview for LLMs
llms-full.txt Complete htmx docs for LLMs

Specifies URL to receive request

The hx-action attribute specifies the URL that will receive the request. It mirrors the native action attribute on forms, making it familiar to HTML authors and enabling progressive enhancement.

Syntax

<button hx-action="/api/users" hx-method="post">
    Create User
</button>

Progressive Enhancement

Like hx-boost, hx-action supports progressive enhancement — the browser falls back to native action/method when JavaScript is unavailable. Where hx-boost provides page-navigation defaults (target body, scroll to top, push URL) for <a> and <form>, hx-action gives you full control over those behaviors and works on any element.

<!-- Works natively AND with htmx -->
<form hx-action="/contacts" method="post" hx-target="#results">
    <input name="name" required>
    <button>Create Contact</button>
</form>

Unlike hx-boost (which always requests the same URL as the native href/action), hx-action can optionally point to a different URL. The recommended approach is still to detect htmx request headers and return fragments from the same URL, but in cases where separate endpoints are preferred, hx-action makes that possible:

<form action="/contacts/new"               <!-- full page (no-JS fallback) -->
      hx-action="/fragments/contacts/new"  <!-- separate partial endpoint -->
      method="post"
      hx-target="#contact-list">
    <input name="name" required>
    <button>Create</button>
</form>

Method Resolution

When hx-action is used without hx-method, htmx resolves the HTTP method using the same fallback chain browsers use:

  1. hx-method attribute on the element
  2. formmethod attribute on the submitter button
  3. Native method attribute on the form
  4. Defaults to GET

This means submitter buttons with formmethod work as expected:

<form hx-action="/contacts/123" method="get" hx-target="#detail">
    <button>View</button>
    <button formmethod="delete">Delete</button>
</form>

Clicking “View” sends a GET, clicking “Delete” sends a DELETE — matching native form semantics.

When to Use

PatternUse case
hx-get, hx-post, etc.You know the method at authoring time and don’t need native fallback
hx-action + hx-methodMethod is dynamic (e.g. server-rendered) or you want a clear separation of URL and verb
hx-action aloneProgressive enhancement — method from native attributes, with option to use a separate AJAX endpoint
hx-boostProgressive enhancement with page-navigation defaults (target body, push URL)

Notes

  • hx-action is typically used with hx-method to specify both the URL and HTTP method
  • The shorthand attributes like hx-get, hx-post, etc. combine both URL and method

Examples

<!-- Server-rendered dynamic method -->
<button hx-action="/api/users/123" hx-method="${method}">
    ${action_label}
</button>

<!-- Equivalent to hx-post shorthand -->
<button hx-action="/api/users" hx-method="post">
    Create User
</button>
<!-- same as -->
<button hx-post="/api/users">
    Create User
</button>