Tabla responsiva en Bootstrap En este post te mostraré cómo hacer que una tabla o elemento table de HTML sea responsiva en Bootstrap 4. Una tabla responsiva en Bootstrap 4 es una tabla que se adapta a cualquier tamaño de pantalla, aunque específicamente hablando de tablas, las de Bootstrap se deben encerrar en un div que hace que al tabla sea “scrollable”, pero la tabla mantiene su tamaño. Con los ejemplos verás a lo que me refiero. ...
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. ...
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 que se enfoque el input o textarea. Para esto vamos a usar querySelector, pues necesitamos una referencia al DOM. ...
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. ...
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 que a su vez se conecta con MySQL. ...
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. ...
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 este caso el tr y el td document.querySelector - Obtener referencia a elementos del DOM elemento.appendChild - Adjuntar un elemento hijo a otro elemento Lo que vamos a dibujar en la tabla es un arreglo. Es decir, a partir del arreglo vamos a dibujar una tabla HTML con JavaScript de manera dinámica. ...
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 o de ellos mismos. Lo que haremos hoy es ver cómo asociar información de una variable de JavaScript a un elemento HTML para después recuperarla en el click del botón: ...
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. ...
Integrar reCAPTCHA v2 con PHP en formulario En este post te enseñaré a integrar el servicio llamado reCAPTCHA v2 con PHP, el cual es un simple captcha o checkbox de “no soy un robot” en un formulario HTML. También te enseñaré a verificarlo con PHP del lado del servidor. El servicio que vamos a integrar es reCAPTCHA v2, el cual funciona en varios lenguajes de servidor, pues se consume usando HTTP; hoy veremos cómo hacerlo en PHP. Veremos un ejemplo del formulario y de la comprobación en el lado del servidor. También dejaré una demostración. Al final tendremos algo como lo del gif: ...