liveBook · Manning

HTMX attribute

As explained in Quarkus in Action

An HTMX attribute is a declarative HTML attribute that specifies client-side requests, events, targets, or updates handled by HTMX.

An HTMX attribute gives an HTML element client-side behavior without requiring custom JavaScript for simple interactions. Attributes can specify a request, its trigger, a target element, and how the response replaces content. section 6.2.3

Replace a greeting

A button with `hx-get="/click"` requests HTML when clicked. `hx-target="#greeting"` selects the destination div, while `hx-swap="innerHTML"` replaces its contents with the response body. section 6.2.3

Listing 6.13 Including the list of available cars in the index page
<h2>Available cars to rent</h2>
<form hx-get="/available" hx-target="#availability">
  <p>Start date:<input id="startDateInput" type="date"
                       name="startDate" value="{startDate}"/></p>
  <p>End date:<input id="endDateInput" type="date"
                     name="endDate" value="{endDate}"/></p>
  <input type="submit" value="Update list"/>
</form>
<div id="availability" hx-get="/available"  #1
     hx-trigger="load, update-available-cars-list from:body"
     hx-include="[id='startDateInput'],[id='endDateInput']">
  <!-- To be replaced by the result of calling /available -->
</div>

The availability form requests `/available` and targets `#availability`. That div also requests data on load or a named event, including the selected dates. section 6.2.3

How Quarkus in Action covers it

How deep it goes
Works through request, target, swap, trigger, and included-input attributes; does not examine HTMX internals.
Examples
Uses a greeting button and date-filtered car availability form.
What it assumes
Assumes familiarity with HTML and HTTP requests; introduces HTMX behavior through a small button example.
What you can do after
Apply it via HTMX to request rendered HTML and update selected elements without custom JavaScript in simple cases.
How it connects
Connects HTML forms and events to REST endpoints, Qute templates, and response-based page updates.

Also explained in

Compare how 2 books explain HTMX attribute →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Quarkus in Action. The section links point to the parts of the book it draws on.