Cuando comencé a aprender desarrollo web, me encontré con muchos atributos y etiquetas que facilitaban la creación de formularios.
Uno de los más útiles fue el pattern en HTML. Este atributo me permitió agregar validación de entradas sin necesidad de recurrir a JavaScript, lo cual me pareció increíblemente práctico para asegurar que los datos enviados en un formulario fueran los correctos.
Así que, te explicaré todo lo que aprendí sobre el atributo pattern HTML, cómo usarlo correctamente, y algunos ejemplos prácticos que te ayudarán a optimizar tus formularios.
¿Qué es Pattern en HTML?
El pattern en HTML es un atributo que se utiliza en los elementos <input> para establecer una expresión regular que la entrada del usuario debe seguir.
En otras palabras, este atributo permite definir un patrón de texto (como una dirección de correo electrónico, un número de teléfono, o incluso una contraseña) y asegurarse de que el usuario ingrese los datos en el formato correcto antes de enviar el formulario.
Al principio, cuando estaba construyendo un formulario para un proyecto personal, me encontré con la necesidad de que los usuarios ingresaran su dirección de correo electrónico de una forma específica.
Fue entonces cuando descubrí que podía usar el atributo patrón HTML para aplicar una expresión regular sencilla que validara el formato del correo.
Esto me ahorró mucho tiempo y esfuerzo, ya que no tuve que escribir una función de validación en JavaScript.
Cómo usar Pattern en HTML
Usar el atributo patrón HTML es realmente sencillo. Para aplicarlo en un formulario, solo necesitas añadir el atributo pattern al campo de entrada que deseas validar y definir el patrón que debe seguir la entrada.
Aquí te dejo una guía paso a paso sobre cómo hacerlo.
Paso 1: Definir un campo de entrada
Primero, debes crear un formulario con un campo de entrada que necesite validación.
Por ejemplo, si quieres validar un número de teléfono, puedes crear un campo de texto con el siguiente código:
<form action="/submit-form">
<label for="phone">Número de Teléfono:</label>
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890" required>
<button type="submit">Enviar</button>
</form>
En este ejemplo, el atributo patrón HTML aplica una expresión regular que valida un número de teléfono en el formato 123-456-7890.
Paso 2: Definir la expresión regular
El patrón se define usando una expresión regular (regex).
En el caso del número de teléfono, la expresión \d{3}-\d{3}-\d{4} valida que el número tenga tres dígitos, seguido de un guion, luego tres dígitos, otro guion, y finalmente cuatro dígitos.
Paso 3: Personalizar el mensaje de error
Cuando el usuario ingresa un valor que no coincide con el patrón, el formulario no se enviará y mostrará un mensaje de error.
Puedes personalizar este mensaje con el atributo title:
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890" title="Por favor, ingrese un número de teléfono válido (ejemplo: 123-456-7890)" required>
Este mensaje aparecerá cuando el usuario no ingrese el número en el formato correcto.
Usos que le puedes dar a Pattern en HTML
El atributo patrón HTML es extremadamente versátil y se puede usar para una variedad de validaciones en formularios.
Aquí te dejo 4 ejemplos prácticos de cómo puedes usarlo.
1. Validar correos electrónicos
En lugar de usar una validación compleja con JavaScript, puedes usar el atributo pattern HTML para validar direcciones de correo electrónico en un formulario.
Aquí te dejo un ejemplo:
<form>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
<button type="submit">Enviar</button>
</form>
Este patrón validará si el correo electrónico tiene el formato adecuado, como [email protected].
2. Validar contraseñas
Si necesitas asegurar que los usuarios ingresen una contraseña segura, puedes usar un patrón para garantizar que contenga al menos una mayúscula, un número y un carácter especial.
Mira:
<form>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" title="Debe contener al menos una mayúscula, un número y 6 caracteres." required>
<button type="submit">Enviar</button>
</form>
Este patrón asegura que la contraseña cumpla con ciertos requisitos de seguridad.
3. Validar códigos postales
Si estás creando un formulario para una tienda en línea o un sistema de envío, es posible que necesites validar códigos postales.
El siguiente ejemplo valida un código postal en formato de cinco dígitos:
<form>
<label for="zip">Código Postal:</label>
<input type="text" id="zip" name="zip" pattern="\d{5}" title="Código postal de 5 dígitos" required>
<button type="submit">Enviar</button>
</form>
4. Validar fechas
Si deseas validar una fecha, el atributo patrón HTML también es útil. Por ejemplo, puedes validar una fecha en formato dd/mm/yyyy con este código:
<form>
<label for="date">Fecha:</label>
<input type="text" id="date" name="date" pattern="\d{2}/\d{2}/\d{4}" placeholder="DD/MM/YYYY" required>
<button type="submit">Enviar</button>
</form>
Este patrón asegura que la fecha esté en el formato correcto antes de enviar el formulario.
Si quieres aprender más sobre HTML, CSS, y JavaScript, te invito a unirte al Bootcamp de Desarrollo Web de KeepCoding. En este curso, aprenderás cómo crear formularios dinámicos, validar datos y mucho más, todo mientras trabajas en proyectos reales. ¡Es tu oportunidad para avanzar en tu carrera como desarrollador web!
