- HTMX - Home
- HTMX - Introduction
- HTMX - Installation
- HTMX - Features
- HTMX - Attributes
- HTMX - Ajax
- HTMX - Inheritance
- HTMX - Boosting
- HTMX - Websockets
- HTMX - Server Sent Events(SSE)
- HTMX - History Support
- HTMX - Requests
- HTMX - Responses
- HTMX - Validation
- HTMX - Animations
- HTMX - Extensions
- HTMX - AI Extension
- HTMX - Events
- HTMX - Logging
- HTMX - Debugging
- HTMX - Scripting
- HTMX - 3rd Party Integration
- HTMX - Caching
- HTMX - Security
- HTMX - Configuring
HTMX - Attributes
HTMX attributes are the main key of htmx, as it plays the main role of allowing access to AJAX, CSS transition, WebSockets, and Server Sent Events directly from HTML. So we can build modern UI without using extensive JavaScript.
Types of HTMX Attributes
HTMX attributes are categorized into two parts as mentioned below.
- Core Attributes
- Additional Attributes
This categorization is not official, it is just to make your learning curve more interesting and easy to understand each attribute and their usage.
HTMX Core Attributes
These are the common attributes that are frequently used when we are using htmx.
| Attribute | Description |
|---|---|
| hx-get | Used to trigger a GET request to the specified URL. |
| hx-post | Used to trigger a POST request to the specified URL. |
| hx-on* | Used to handle events with inline scripts on elements. |
| hx-push-url | Used to push a URL into the browser location bar to create history. |
| hx-select | Used to select content to swap in from a response. |
| hx-select-oob | Used to select content to swap in from a response, somewhere other than the target (out of band). |
| hx-swap | Controls how content will swap in (outerHTML, beforeend, afterend, ) |
| hx-swap-oob | Used to mark element to swap in from a response (out of band). |
| hx-target | Used to specify the target element to be swapped. |
| hx-trigger | Used to specify the event that triggers the request. |
| hx-vals | Used to add values to submit with the request (JSON format). |
HTMX Additional Attributes
Certain attributes are used rarely when we are using htmx.
| Attribute | Description |
|---|---|
| hx-boost | Used to add progressive enhancement for links and forms. |
| hx-confirm | It shows a confirm() dialog before issuing a request. |
| hx-delete | Used to trigger a DELETE request to the specified URL. |
| hx-disable | It disables htmx processing for the given node and any children nodes. |
| hx-disabled-elt | Adds the disabled attribute to the specified elements while a request is in flight. |
| hx-disinherit | Control and disable automatic attribute inheritance for child nodes. |
| hx-encoding | It changes the request encoding type. |
| hx-ext | Act as an extension to use for this element. |
| hx-headers | Adds to the headers that will be submitted with the request. |
| hx-history | Use to prevent sensitive data from being saved to the history cache. |
| hx-history-elt | The element to snapshot and restore during history navigation |
| hx-include | Used to include additional data in requests. |
| hx-indicator | The element to put the htmx-request class on during the request |
| hx-inherit | Control and enable automatic attribute inheritance for child nodes if it has been disabled by default |
| hx-params | Used to filter the parameters that will be submitted with a request. |
| hx-patch | Used to trigger a PATCH request to the specified URL. |
| hx-preserve | Used to specify elements to keep unchanged between requests |
| hx-prompt | It shows a prompt() before submitting a request. |
| hx-put | Used to trigger a PUT request to the specified URL. |
| hx-replace-url | Used to replace the URL in the browser location bar. |
| hx-request | Used to configure various aspects of the request. |
| hx-sync | Control how requests made by different elements are synchronized. |
| hx-validate | Used to force elements to validate themselves before a request. |
| hx-vars | It adds values dynamically to the parameters to submit with the request (deprecated, please use hx-vals). |
Advertisements