Atributos Especiales Thymeleaf

th:abbr: Establece el atributo abbr de un elemento.
```
<span th:abbr="${abreviatura}">Texto</span>
```
Proporciona una abreviatura para el texto.

th:accept: Define los tipos de archivo que se pueden cargar en un campo de entrada de tipo archivo.
```
<input type="file" th:accept=".jpg,.png" />
```
Permite cargar solo archivos con extensiones .jpg y .png.

th:accept-charset: Especifica los conjuntos de caracteres aceptables para el formulario.
```
<form th:accept-charset="UTF-8" method="post">
    <button type="submit">Enviar</button>
</form>
```
Este formulario acepta datos codificados en UTF-8.

th:accesskey: Establece una tecla de acceso rápido para el elemento.
```
<a th:accesskey="s" th:href="@{/home}">Ir a inicio</a>
```
Permite acceder al enlace usando la tecla de acceso especificada.

th:action: Especifica la URL a la que se enviará el formulario.
```
<form th:action="@{/submit}" method="post">
    <button type="submit">Enviar</button>
</form>
```
Este formulario se enviará a la URL /submit.

th:align: Establece el alineamiento de un elemento.
```
<div th:align="center">Texto centrado</div>
```
Este elemento estará alineado al centro.

th:alt: Proporciona texto alternativo para imágenes.
```
<img th:src="@{/images/logo.png}" th:alt="${descripcionImagen}" />
```
El texto alternativo se obtiene de una variable del modelo.

th:archive: Define un archivo de archivo para un elemento de audio o video.
```
<audio th:archive="${archivoAudio}"></audio>
```
Especifica un archivo adicional que acompaña al elemento de audio.

th:audio: Define un elemento de audio.
```
<audio th:src="@{/audio/mi_audio.mp3}" controls></audio>
```
Este elemento reproduce el audio especificado.

th:autocomplete: Establece el comportamiento de autocompletado en un campo de entrada.
```
<input type="text" th:autocomplete="on" />
```
Este campo permitirá el autocompletado de los datos ingresados.

th:axis: Define el eje para un elemento en un gráfico.
```
<canvas th:axis="x" id="miGrafico"></canvas>
```
Establece el eje en el que se representará el gráfico.

th:background: Establece una imagen de fondo para un elemento.
```
<div th:style="'background-image: url(' + ${imagenFondo} + ')'">
    Contenido con fondo
</div>
```
Establece una imagen de fondo dinámica basada en la variable imagenFondo.

th:bgcolor: Establece el color de fondo de un elemento.
```
<div th:bgcolor="${colorFondo}">Contenido</div>
```
El color de fondo se establece dinámicamente desde la variable colorFondo.

th:border: Establece el estilo del borde de un elemento.
```
<table th:border="1">
    <tr><td>Datos</td></tr>
</table>
```
Establece un borde para la tabla.

th:cellpadding: Establece el espacio entre el borde de una celda y su contenido.
```
<table th:cellpadding="10">
    <tr><td>Datos</td></tr>
</table>
```
Define el espacio de relleno de las celdas en la tabla.

th:cellspacing: Establece el espacio entre las celdas de una tabla.
```
<table th:cellspacing="5">
    <tr><td>Datos</td><td>Datos</td></tr>
</table>
```
Define el espacio entre las celdas de la tabla.

th:challenge: Establece el desafío para un elemento en la autenticación de cliente.
```
<iframe th:challenge="reCAPTCHA"></iframe>
```
Utiliza un desafío de reCAPTCHA para la autenticación del cliente.

th:charset: Define el conjunto de caracteres de un documento.
```
<meta th:charset="UTF-8">
```
Especifica que el documento utiliza el conjunto de caracteres UTF-8.

th:cite: Establece una cita para el contenido.
```
<blockquote th:cite="${fuente}">Cita aquí</blockquote>
```
Proporciona una referencia a la fuente de la cita.

th:class: Permite añadir o modificar clases CSS dinámicamente.
```
<div th:class="${activo ? 'activo' : 'inactivo'}">Contenido</div>
```
La clase se establece en activo o inactivo dependiendo de la variable.

th:classid: Especifica un identificador de clase.
```
<div th:classid="${idClase}">Contenido</div>
```
Asigna un identificador de clase dinámicamente.

th:codebase: Define la base del código para un elemento.
```
<applet th:codebase="${rutaApplet}"></applet>
```
Define la base del código para un applet.

th:codetype: Establece el tipo de código para un elemento.
```
<applet th:codetype="application/java" />
```
Especifica el tipo de código para el applet.

th:cols: Define el número de columnas en un área de texto.
```
<textarea th:cols="30"></textarea>
```
Establece 30 columnas para el área de texto.

th:colspan: Establece cuántas columnas debe ocupar una celda en una tabla.
```
<td th:colspan="2">Celdas combinadas</td>
```
La celda ocupa dos columnas en la tabla.

th:compact: Indica que un elemento debe ser presentado de forma compacta.
```
<ul th:compact="true">
    <li>Elemento 1</li><br/>
    <li>Elemento 2</li><br/>
</ul>
```
Presenta la lista de forma compacta.

th:content: Establece el contenido de un elemento.
```
<div th:content="${contenido}"></div>
```
El contenido se establece dinámicamente desde una variable.

th:contenteditable: Indica que el contenido de un elemento puede ser editado por el usuario.
```
<div th:contenteditable="true">Contenido editable</div>
```
Este elemento puede ser editado directamente en el navegador.

th:contextmenu: Especifica el menú contextual asociado a un elemento.
```
<div th:contextmenu="@{/menu}">Contenido</div>
```
Asocia un menú contextual a este elemento.

th:data: Establece un atributo de datos personalizado en un elemento.
```
<div th:data-custom="${valorPersonalizado}">Contenido</div>
```
Agrega un atributo de datos personalizado.

th:datetime: Define una fecha y hora.
```
<time th:datetime="${fechaHora}">Fecha y hora</time>
```
Representa una fecha y hora utilizando el atributo datetime.

th:dir: Establece la dirección del texto.
```
<div th:dir="ltr">Texto de izquierda a derecha</div>
```
Define que el texto se leerá de izquierda a derecha.

th:draggable: Indica si un elemento puede ser arrastrado.
```
<div th:draggable="true">Contenido arrastrable</div>
```
Permite arrastrar este elemento.

th:dropzone: Define la zona donde se pueden soltar los elementos arrastrados.
```
<div th:dropzone="copy">Suelta aquí</div>
```
Especifica que se puede copiar al soltar en esta zona.

th:enctype: Establece la codificación del formulario.

<form th:enctype="multipart/form-data" method="post">
    <input type="file" />
    <button type="submit">Enviar</button>
</form>

Define la codificación para la carga de archivos.

th:for: Especifica el valor del atributo for en una etiqueta de etiqueta.
```
<label th:for="${idCampo}">Etiqueta</label>
```
Asocia la etiqueta con un campo de entrada específico.

th:form: Define el formulario asociado a un elemento.
```
<input th:form="${idFormulario}" type="text" />
```
Asocia este campo de entrada a un formulario específico.

th:formaction: Define la URL a la que se enviará el formulario cuando se use este botón.
```
<button th:formaction="@{/submit}">Enviar</button>
```
Especifica la acción del formulario al enviar este botón.

th:formenctype: Establece la codificación del formulario.
```
<form th:formenctype="application/json">
    <button type="submit">Enviar</button>
</form>
```
Define la codificación para el formulario.

th:formmethod: Especifica el método HTTP para enviar el formulario.
```
<form th:formmethod="post">
    <button type="submit">Enviar</button>
</form>
```
Define que el formulario se enviará utilizando el método POST.

th:formtarget: Especifica el objetivo de la respuesta al enviar el formulario.
```
<form th:formtarget="_blank">
    <button type="submit">Enviar</button>
</form>
```
El formulario se abrirá en una nueva pestaña al enviarse.

th:fragment: Define un fragmento que se puede reutilizar en otras partes de la plantilla.
```
<div th:fragment="miFragmento">Contenido del fragmento</div>
```
Este fragmento puede ser referenciado en otras partes de la plantilla.

th:frame: Define un marco para un elemento.
```
<iframe th:frame="no" src="@{/pagina}"></iframe>
```
Especifica que no se permitirá un marco en este iframe.

th:frameborder: Define el borde de un marco.
```
<iframe th:frameborder="0"></iframe>
```
Especifica que no debe haber borde en el iframe.

th:headers: Define los encabezados HTTP adicionales para la solicitud.
```
<div th:headers="${encabezados}">Contenido</div>
```
Especifica encabezados adicionales a enviar con la solicitud.

th:height: Establece la altura de un elemento.
```
<img th:src="@{/imagenes/logo.png}" th:height="100" />
```
Define que la imagen tendrá una altura de 100 píxeles.

th:high: Establece el valor alto para elementos de entrada como input o meter.
```
<meter th:high="90"></meter>
```
Define que el valor alto del medidor es 90.

th:href: Establece la URL de un enlace.
```
<a th:href="@{/pagina}">Ir a la página</a>
```
Define el destino del enlace.

th:hreflang: Especifica el idioma del documento al que se vincula.
```
<a th:hreflang="es" th:href="@{/pagina}">Ir a la página</a>
```
Define que el idioma del enlace es español.

th:hspace: Especifica el espacio horizontal alrededor de un elemento.
```
<img th:src="@{/imagenes/logo.png}" th:hspace="20" />
```
Define un espacio horizontal de 20 píxeles alrededor de la imagen.

th:http-equiv: Proporciona información sobre el contenido del documento.
```
<meta th:http-equiv="X-UA-Compatible" content="IE=edge" />
```
Indica que el documento es compatible con IE.

th:icon: Establece un ícono para un documento.
```
<link th:icon="@{/favicon.ico}" rel="icon" />
```
Define un ícono para la página.

th:id: Establece el identificador único de un elemento.
```
<div th:id="${identificador}">Contenido</div>
```
Define un identificador único para este elemento.

th:inline: Permite la inclusión en línea de otros elementos.
```
<div th:inline="text">Texto incluido</div>
```
Especifica que se permite la inclusión de texto.

th:keytype: Especifica el tipo de clave de un elemento.
```
<input th:keytype="text" />
```
Define que el tipo de clave es texto.

th:kind: Especifica el tipo de contenido de un elemento.
```
<video th:kind="subtitles" src="@{/video/subtitulada.mp4}"></video>
```
Define que el video tiene subtítulos.

th:label: Define la etiqueta para un elemento de formulario.
```
<label th:label="${etiqueta}">Etiqueta</label>
```
Especifica la etiqueta asociada a un campo de entrada.

th:lang: Establece el idioma del contenido.
```
<div th:lang="es">Contenido en español</div>
```
Define que el contenido está en español.

th:list: Especifica el ID de un elemento de lista de selección.
```
<input th:list="${idLista}" type="text" />
```
Asocia el campo de entrada con un elemento de lista.

th:longdesc: Proporciona una descripción larga de un elemento.
```
<img th:src="@{/imagenes/logo.png}" th:longdesc="@{/descripcionLarga}" />
```
Especifica una descripción larga para la imagen.

th:low: Establece el valor bajo para elementos de entrada como input o meter.
```
<meter th:low="10"></meter>
```
Define que el valor bajo del medidor es 10.

th:manifest: Define el archivo de manifiesto para una aplicación web.
```
<html th:manifest="@{/manifest.appcache}"></html>
```
Especifica el archivo de manifiesto para el navegador.

th:marginheight: Especifica la altura del margen de un iframe.
```
<iframe th:marginheight="10" src="@{/pagina}"></iframe>
```
Define que el margen superior e inferior del iframe es de 10 píxeles.

th:marginwidth: Especifica el ancho del margen de un iframe.
```
<iframe th:marginwidth="10" src="@{/pagina}"></iframe>
```
Define que el margen izquierdo y derecho del iframe es de 10 píxeles.

th:max: Establece el valor máximo para elementos de entrada.
```
<input type="number" th:max="100" />
```
Define que el valor máximo de este campo es 100.

th:maxlength: Establece el número máximo de caracteres permitidos en un campo de texto.
```
<input type="text" th:maxlength="10" />
```
Define que se permiten hasta 10 caracteres en este campo.

th:media: Especifica el tipo de medio para un enlace.
```
<link th:media="screen" rel="stylesheet" />
```
Define que este enlace es para pantallas.

th:method: Especifica el método HTTP para enviar el formulario.
```
<form th:method="post">
    <button type="submit">Enviar</button>
</form>
```
Define que el formulario se enviará utilizando el método POST.

th:min: Establece el valor mínimo para elementos de entrada.
```
<input type="number" th:min="1" />
```
Define que el valor mínimo de este campo es 1.

th:name: Establece el nombre del elemento.
```
<input type="text" th:name="nombreCampo" />
```
Define el nombre del campo de entrada.

th:onabort: Especifica el manejador del evento abort.
```
<img th:onabort="handleAbort()" th:src="@{/imagenes/logo.png}" />
```
Define un manejador para el evento de aborto de carga de imagen.

th:onafterprint: Especifica el manejador del evento afterprint.
```
<script th:onafterprint="handleAfterPrint()"></script>
```
Define un manejador para el evento que se dispara después de imprimir.

th:onbeforeprint: Especifica el manejador del evento beforeprint.
```
<script th:onbeforeprint="handleBeforePrint()"></script>
```
Define un manejador para el evento que se dispara antes de imprimir.

th:onblur: Especifica el manejador del evento blur.
```
<input th:onblur="handleBlur()" type="text" />
```
Define un manejador para el evento de desenfoque de campo de entrada.

th:onchange: Especifica el manejador del evento change.
```
<input th:onchange="handleChange()" type="text" />
```
Define un manejador para el evento de cambio en el campo de entrada.

th:onclick: Especifica el manejador del evento click.
```
<button th:onclick="handleClick()">Hacer clic</button>
```
Define un manejador para el evento de clic en el botón.

th:ondblclick: Especifica el manejador del evento dblclick.
```
<button th:ondblclick="handleDblClick()">Doble clic</button>
```
Define un manejador para el evento de doble clic en el botón.

th:onerror: Especifica el manejador del evento error.
```
<img th:onerror="handleError()" th:src="@{/imagenes/logo.png}" />
```
Define un manejador para el evento de error al cargar la imagen.

th:onfocus: Especifica el manejador del evento focus.
```
<input th:onfocus="handleFocus()" type="text" />
```
Define un manejador para el evento de enfoque del campo de entrada.

th:oninput: Especifica el manejador del evento input.
```
<input th:oninput="handleInput()" type="text" />
```
Define un manejador para el evento de entrada en el campo de entrada.

th:oninvalid: Especifica el manejador del evento invalid.
```
<input th:oninvalid="handleInvalid()" type="text" />
```
Define un manejador para el evento de campo de entrada no válido.

th:onsubmit: Especifica el manejador del evento submit.
```
<form th:onsubmit="handleSubmit()">
    <button type="submit">Enviar</button>
</form>
```
Define un manejador para el evento de envío del formulario.

th:readonly: Especifica que un campo de entrada es de solo lectura.
```
<input th:readonly="true" type="text" />
```
Este campo no se puede editar por el usuario.

th:rel: Especifica la relación entre el documento actual y el documento vinculado.
```
<link th:rel="stylesheet" th:href="@{/estilos.css}" />
```
Define que este enlace es para una hoja de estilo.

th:required: Especifica que un campo de entrada es obligatorio.
```
<input th:required="true" type="text" />
```
Este campo debe ser completado antes de enviar el formulario.

th:rev: Especifica que el enlace es una relación inversa.
```
<a th:rev="author" th:href="@{/pagina}">Página de autor</a>
```
Define una relación inversa para este enlace.

th:rows: Define el número de filas en un área de texto.
```
<textarea th:rows="5"></textarea>
```
Establece 5 filas para el área de texto.

th:scope: Especifica el alcance de una celda en una tabla.
```
<th th:scope="col">Encabezado de columna</th>
```
Define que esta celda es un encabezado de columna.

th:seamless: Indica que un iframe debe ser sin costuras.
```
<iframe th:seamless="true" src="@{/pagina}"></iframe>
```
Especifica que el iframe debe ser sin costuras.

th:src: Establece la URL de una imagen o un script.
```
<img th:src="@{/imagenes/logo.png}" alt="Logo" />
```
Define la fuente de la imagen.

th:style: Especifica el estilo en línea de un elemento.
```
<div th:style="color: red;">Texto rojo</div>
```
Define un estilo en línea para este elemento.

th:tabindex: Establece el índice de tabulación de un elemento.
```
<input th:tabindex="1" type="text" />
```
Define que este campo será el primero en el orden de tabulación.

th:title: Especifica el título de un elemento.
```
<div th:title="${titulo}">Texto</div>
```
Define el título que aparece al pasar el cursor sobre este elemento.

th:type: Establece el tipo de un campo de entrada.
```
<input th:type="text" />
```
Define que este campo es de tipo texto.

th:value: Establece el valor de un campo de entrada.
```
<input th:value="${valor}" type="text" />
```
Define el valor inicial de este campo.

th:width: Establece el ancho de un elemento.
```
<img th:src="@{/imagenes/logo.png}" th:width="100" />
```
Define que la imagen tendrá un ancho de 100 píxeles.

th:wrap: Especifica cómo se debe envolver el contenido.
```
<textarea th:wrap="soft"></textarea>
```
Define que el texto se envolverá automáticamente.