HTML

Formulario con Flask

Procesar formulario con Flask

Hoy vamos a ver cómo trabajar con los formularios web en Flask para introducir datos y enviarlos de tal manera que Flask pueda procesarlos.

Formulario con Flask

Procesar formulario usando Python y Flask

Para ello vamos a usar el módulo request y acceder a request.form.get, usando también render_template para renderizar las vistas.

Continue reading…

Tabla responsiva en Bootstrap – Ejemplo

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.

Continue reading…

Recorrer lista en Thymeleaf y Spring Boot usando th each

th:each en Thymeleaf para recorrer listas

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.

Continue reading…

Enfocar input o textarea con JavaScript

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.

Continue reading…

Documento modificado con querySelector y querySelectorAll en JavaScript

querySelector y querySelectorAll en JavaScript

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.

Continue reading…

Asociar información a elementos dinámicos con JavaScript

JavaScript – Asociar información a elementos dinámicos con data-*

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:

Asociar información a elementos dinámicos con JavaScript

Demostración de click del botón al agregar información con los atributos data

Accede a la demostración aquí.

Continue reading…

Dibujar tabla HTML con JavaScript - Tabla dinámica de productos

Dibujar tabla HTML dinámica con JavaScript

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.

Continue reading…

Demostración de reCAPTCHA v2 con PHP

reCAPTCHA v2 con PHP – Ejemplo de integración

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:

Demostración de reCAPTCHA v2 con PHP

Formulario de Bootstrap 4 con reCAPTCHA v2 y PHP

Continue reading…

Códigos de barras con JavaScript - Productos

Códigos de barras con JavaScript usando JSBarcode

Códigos de barras con JavaScript

En este post te voy a mostrar algunos ejemplos y usos de la librería JsBarcode para generar códigos de barras en elementos HTML usando JavaScript.

Vamos a generar códigos de barras con JavaScript en 3 elementos:

  1. SVG
  2. Canvas
  3. Imagen

Si deseas mantener la calidad del código de barras, recomiendo que uses el formato SVG.

Nota: esta librería no necesita otras librerías o dependencias, funciona con JavaScript puro y por lo tanto se puede usar en cualquier proyecto de JavaScript.

Continue reading…