Start with an interaction the browser already understands:

<form action="/search" method="get">
  <label>
    Search
    <input type="search" name="q">
  </label>
  <button>Search</button>
</form>

Without JavaScript, the browser navigates to /search?q=... and the server returns a complete results page. That URL can be refreshed, bookmarked, and shared.

Now enhance the same form:

<form action="/search" method="get"
  hx-get="/search"
  hx-target="#results"
  hx-push-url="true">
  <!-- the same controls -->
</form>

HTMX updates only #results and records the meaningful search URL. The action, method, named control, and submit button still define the fallback.

Progressive enhancement does not require both experiences to look identical. It requires the essential task to remain understandable and usable when the script fails, is blocked, or has not loaded yet.

Disable JavaScript and complete the flow. If you cannot, fix the HTML and server routes before adding more HTMX behavior.