En este post te mostraré a usar th:each en Thymeleaf para iterar o recorrer colecciones, algo así como dibujar una lista o repetir un elemento HTML. Además de repetir una lista te enseñaré la sintaxis básica de th:each. Finalmente veremos un ejemplo con Spring Boot para renderizar una lista de productos traída desde un repositorio […]
th:each en Thymeleaf para recorrer listas Leer más »
En este post te enseñaré a evitar o desactivar el autocompletado que aparece por defecto en un input de HTML 5, el cual se ve como en la siguiente imagen: Para lograrlo se utiliza el atributo autocomplete de HTML.
Desactivar autocompletado en input de HTML 5 Leer más »
En este post te mostraré a enfocar o darle focus a un elemento de un formulario de HTML usando JavaScript, ya sea un input o un textarea. Enfocar un elemento en JavaScript es hacer que, cuando el usuario comience a escribir usando el teclado, el texto aparezca en el campo de texto, en pocas palabras
Enfocar input o textarea con JavaScript Leer más »
En este post te mostraré a usar el atributo autofocus de los input en HTML para dar un focus automático a los elementos, es decir, dar focus a un campo de texto cuando se carga la página, sin usar JavaScript. Nota: si quieres enfocar un elemento de manera programada, utiliza JavaScript y la función focus.
Focus automático a input de HTML 5 Leer más »
Agregar clase a elemento HTML con Thymeleaf En este post te mostraré cómo agregar una clase HTML a un elemento (como un div, un párrafo, etcétera) de manera dinámica usando Thymeleaf, un motor de plantillas usado mayormente en Spring Boot.
Thymeleaf – Añadir clase dinámica a elemento HTML Leer más »
Explicación de querySelector y querySelectorAll en JavaScript Introducción a querySelector y querySelectorAll en JS. En este post te explicaré dos funciones de JavaScript que funcionan para obtener referencia a un elemento del DOM. Estoy hablando de: document.querySelector document.querySelectorAll Que bien son un remplazo de document.getElementById y otras funciones un poco complejas.
querySelector y querySelectorAll en JavaScript Leer más »
Uso de los atributos data en HTML y JavaScript Los atributos data de HTML son atributos personalizados que ayudan a asociar información a un elemento HTML (incluso si es creado de manera dinámica) con JavaScript. Estos atributos vienen de maravilla cuando tenemos elementos dinámicos y queremos acceder a ellos en el click de un botón
JavaScript – Asociar información a elementos dinámicos con data-* Leer más »
Renderizar o dibujar una tabla HTML con JavaScript En este post te mostraré a crear una tabla dinámica o elemento <table> de HTML con JavaScript. Es decir, con JavaScript puro dibujar una tabla, agregarle filas y columnas. Para ello no usaremos ningún framework. Las funciones que veremos son: document.createElement – Para crear un elemento, en
Dibujar tabla HTML dinámica con JavaScript Leer más »