Principales Atributos de HTMX

  Atributos de HTMX 🚀

En HTMX, los atributos personalizados son la base para agregar interactividad dinámica a una aplicación web sin escribir JavaScript adicional.

Estos atributos, añadidos directamente a los elementos HTML, controlan peticiones HTTP, actualización del DOM, eventos, confirmaciones, indicadores de carga y más.

🔧 Atributos Fundamentales de HTMX

Algunos de los atributos fundamentales de HTMX son: hx-get, hx-post, hx-put, hx-delete, hx-patch, hx-trigger, hx-swap, hx-target, hx-confirm, y hx-indicator.

1Atributo hx-get

Realiza una petición HTTP de tipo GET al servidor y actualiza el contenido del elemento indicado con el atributo hx-target con la respuesta del servidor.

html 
<div hx-get="/datos" hx-target="#contenido">
  Contenido inicial
</div>

<div id="contenido"></div>
  Explicación del ejemplo

  • hx-get="/datos": Realiza una petición HTTP de tipo GET al servidor.
  • hx-target="#contenido": Actualiza el contenido del elemento con id="contenido" con la respuesta del servidor.

2Atributo hx-post

Realiza una petición HTTP de tipo POST al servidor y actualiza el contenido del elemento indicado con el atributo hx-target con la respuesta del servidor.

html 
<button hx-post="/datos" hx-target="#contenido">
  Enviar datos
</button>

<div id="contenido"></div>
  Explicación del ejemplo

  • hx-post="/datos": Realiza una petición HTTP de tipo POST al servidor.
  • hx-target="#contenido": Actualiza el contenido del elemento con id="contenido" con la respuesta del servidor.

Otro ejemplo práctico utilizando hx-post

html 
<form 
  hx-post="/guardar-datos" 
  hx-target="#resultado" 
  hx-swap="innerHTML" 
  hx-trigger="submit" 
>
  <input type="text" name="nombre" placeholder="Ingresa tu nombre" />
  <button type="submit">Guardar</button>
</form>

<div id="resultado"></div>
  Explicación del ejemplo

  • hx-post="/guardar-datos": Envía los datos del formulario al servidor mediante POST.
  • hx-target="#resultado": Inserta la respuesta del servidor en el div con id="resultado".
  • hx-swap="innerHTML": Reemplaza el contenido interno del div.
  • hx-trigger="submit": La petición se lanza al enviar el formulario.

Formulario de búsqueda con hx-post

html 
<form hx-post="/buscar" hx-target="#resultados">
  <input type="text" name="query" placeholder="Buscar..." />
  <button type="submit">Buscar</button>
</form>

<div id="resultados"></div>
  Explicación del ejemplo

  • post: Se dispara cuando el usuario hace click en el botón.
  • hx-post: Realiza una petición POST al endpoint /buscar.
  • hx-target: Define dónde se mostrará la respuesta.
  • hx-swap: Define el modo de swap que se utilizará para insertar la respuesta.

3Atributo hx-put

Realiza una petición HTTP de tipo PUT al servidor y actualiza el contenido del elemento indicado con el atributo hx-target con la respuesta del servidor.

html 
<button hx-put="/datos" hx-target="#contenido">
  Enviar datos
</button>

<div id="contenido"></div>
  Explicación del ejemplo

  • hx-put="/datos": Realiza una petición HTTP de tipo PUT al servidor.
  • hx-target="#contenido": Actualiza el contenido del elemento con id="contenido" con la respuesta del servidor.

4Atributo hx-delete

Realiza una petición HTTP de tipo DELETE al servidor y actualiza el contenido del elemento indicado con el atributo hx-target con la respuesta del servidor.

html 
<button hx-delete="/datos" hx-target="#contenido">
  Enviar datos
</button>

<div id="contenido"></div>
  Explicación del ejemplo

  • hx-delete="/datos": Realiza una petición HTTP de tipo DELETE al servidor.
  • hx-target="#contenido": Actualiza el contenido del elemento con id="contenido" con la respuesta del servidor.

Confirmar acciones con hx-delete

Envía una petición DELETE al servidor y actualiza el elemento definido por hx-target con la respuesta.

html 
<button 
  hx-delete="/eliminar/1"
  hx-confirm="¿Desea eliminar el registro?"
  hx-swap="delete"
  >
  Eliminar
</button>
  Explicación de los atributos

  • hx-delete: Envía una petición HTTP DELETE al endpoint /eliminar/1.
  • hx-confirm: Muestra un mensaje de confirmación antes de ejecutar la acción.
  • hx-swap="delete": Elimina el elemento del DOM si la respuesta del servidor tiene éxito.

5Atributo hx-indicator

Muestra un elemento visual como un indicador de carga mientras se realiza la petición.

html 
<div id="caja" hx-get="/fetch" hx-trigger="click" hx-indicator="#loader">
  Cargar datos
</div>
<div id="loader" style="display: none;">Cargando...</div>
  Explicación de los atributos

  • hx-get: Realiza una petición HTTP GET al endpoint /fetch.
  • hx-trigger="click": La petición se lanza al hacer click en el elemento con id="caja".
  • hx-indicator="#loader": Muestra el indicador de carga en el elemento con id="loader".

6Atributo hx-trigger

Define el evento que disparará la petición (por ejemplo, click, submit, etc.).

html 
<button 
  hx-get="/mensaje" 
  hx-target="#respuesta" 
  hx-trigger="mouseover"
>
  Pasa el mouse por aquí
</button>

<div id="respuesta"></div>
  Explicación del atributo hx-trigger

  • hx-trigger="mouseover": La petición se dispara cuando el usuario pasa el cursor sobre el botón, en lugar de hacer clic.
  • hx-get="/mensaje": Solicita contenido desde el endpoint /mensaje.
  • hx-target="#respuesta": Inserta la respuesta dentro del div con id respuesta.

Enviar un formulario al hacer submit

Realiza una petición HTTP de tipo POST al servidor y actualiza el contenido del elemento indicado con el atributo hx-target con la respuesta del servidor.

html 
<form hx-post="/registrar" hx-trigger="submit" hx-target="#respuesta">
  <input type="text" name="nombre" placeholder="Tu nombre" required />
  <button type="submit">Enviar</button>
</form>

<div id="respuesta"></div>
  Formulario con `hx-trigger='submit'`

  • hx-trigger="submit": La petición se lanza al enviar el formulario.
  • hx-post="/registrar": Envía los datos al endpoint /registrar.
  • hx-target="#respuesta": Muestra la respuesta del servidor en el div.

Disparar petición automáticamente al cargar la página

Realiza una petición HTTP de tipo GET al servidor y actualiza el contenido del elemento indicado con el atributo hx-target con la respuesta del servidor.

html 
<div hx-get="/bienvenida" hx-trigger="load" hx-target="#mensaje"></div>

<div id="mensaje"></div>
  Petición automática con `hx-trigger='load'`

  • hx-trigger="load": Ejecuta la petición al cargar el elemento.
  • hx-get="/bienvenida": Solicita contenido del endpoint /bienvenida.
  • hx-target="#mensaje": Coloca la respuesta dentro del div con id mensaje.

7Atributo hx-patch

Realiza una petición HTTP de tipo PATCH al servidor y actualiza el contenido del elemento indicado con el atributo hx-target con la respuesta del servidor.

html 
<form>
  <input type="text" name="email" value="usuario@example.com" />
  <button hx-patch="/actualizar-email" hx-target="#resultado">Actualizar</button>
</form>

<div id="resultado"></div>
  Actualizar con `hx-patch`

  • hx-patch="/actualizar-email": Envía una petición PATCH al servidor.
  • hx-target="#resultado": Muestra la respuesta en el contenedor #resultado.

8Atributo hx-target

Define el elemento al cual se insertará la respuesta del servidor.

html 
<button hx-get="/mensaje" hx-target="#contenedor"></button>

<div id="contenedor"></div>
  Uso de `hx-target`

  • hx-get="/mensaje": Realiza una petición GET.
  • hx-target="#contenedor": Inserta la respuesta en el div con id contenedor.

9Atributo hx-swap

Controla como se inserta la respuesta en el DOM, por ejemplo, innerHTML, outerHTML, etc.

html 
<button hx-get="/detalle" hx-target="#info" hx-swap="beforeend">Mostrar Detalle</button>

<div id="info"></div>
  Control de inserción con `hx-swap`

  • hx-swap="beforeend": Inserta el contenido al final del contenedor.
  • hx-get="/detalle": Solicita los detalles desde el servidor.

10Atributo hx-confirm

Muestra un mensaje de confirmación antes de ejecutar la petición.

html 
<button hx-delete="/borrar/42" hx-confirm="¿Estás seguro que deseas eliminar?" hx-target="#resultado">
  Eliminar
</button>

<div id="resultado"></div>
  Confirmación con `hx-confirm`

  • hx-confirm: Muestra un mensaje antes de ejecutar la petición.
  • hx-delete: Envía una petición DELETE si se confirma.

11Atributo hx-vals

Define datos adicionales que se deben enviar con la petición, por ejemplo, excluir algunos inputs.

html 
<button hx-post="/enviar" hx-vals='{"tipo":"admin"}' hx-target="#respuesta">Enviar</button>

<div id="respuesta"></div>
  Datos adicionales con `hx-vals`

  • hx-vals: Añade valores adicionales al cuerpo de la petición.
  • hx-post="/enviar": Envía los datos al servidor usando POST.

12Atributo hx-include

Permite incluir datos de otros elementos del DOM, por ejemplo, formularios.

html 
<form id="formulario">
  <input type="text" name="nombre" />
</form>

<button hx-post="/guardar" hx-include="#formulario" hx-target="#resultado">Guardar</button>

<div id="resultado"></div>
  Incluir otros elementos con `hx-include`

  • hx-include="#formulario": Incluye los datos del formulario al hacer clic en el botón.
  • hx-post="/guardar": Envia la data combinada al servidor.

13Atributo hx-params

Controla cuales parámetros se deben enviar, por ejemplo, excluir algunos inputs.

html 
<form hx-post="/buscar" hx-params="nombre">
  <input type="text" name="nombre" />
  <input type="text" name="email" />
  <button type="submit">Buscar</button>
</form>
  Filtrar parámetros con `hx-params`

  • hx-params="nombre": Solo envía el campo nombre en la petición.
  • hx-post="/buscar": Realiza la búsqueda en el servidor.

14Atributo hx-headers

Envía encabezados personalizados con la petición, por ejemplo, tokens de seguridad.

html 
<button 
  hx-post="/api/datos" 
  hx-headers='{"X-CSRF-Token": "token123"}' 
  hx-target="#respuesta">
  Enviar con encabezado
</button>

<div id="respuesta"></div>
  Enviar encabezados personalizados con `hx-headers`

  • hx-headers: Agrega encabezados personalizados a la petición (por ejemplo, tokens de seguridad).
  • hx-post="/api/datos": Envía los datos al servidor con el encabezado adicional.
  • hx-target="#respuesta": Muestra la respuesta del servidor en el contenedor #respuesta.