Validar formularios en HTML no siempre exige JavaScript. Con los atributos correctos dentro de la etiqueta form, puedes obligar al usuario a completar campos, exigir formatos específicos y limitar rangos numéricos o de fechas, todo desde el navegador. Esta guía está pensada para quienes empiezan en desarrollo web y quieren formularios más confiables sin escribir lógica adicional.

¿Cómo obligar a llenar un campo con required en HTML?

Cuando un campo es indispensable, el atributo required evita que el formulario se envíe vacío. Lo agregas dentro del input y el navegador bloquea el envío hasta que el usuario escriba algo.

En un input de tipo email, el navegador ya valida que exista la arroba al intentar enviar. Pero sin required, alguien podría enviarlo en blanco. Al sumar el atributo, aparece ese mensaje flotante que dice este campo es requerido.

¿Qué hace el atributo required en un formulario? Marca un campo como obligatorio. Si el usuario intenta enviar el formulario sin llenarlo, el navegador muestra un aviso y bloquea el envío.

Una buena práctica complementaria es usar placeholder para mostrar un ejemplo del formato esperado, como usuario@ejemplo.com. Ese texto desaparece cuando el usuario empieza a escribir y guía sin saturar la interfaz [00:55].

¿Cómo validar un teléfono con el atributo pattern?

Un input de teléfono no tiene validación automática contra letras. Aquí entra pattern, que recibe una expresión regular y define qué caracteres son aceptados.

Para exigir nueve dígitos numéricos, el patrón se escribe así: [0-9]{9}. Los corchetes definen el rango de caracteres permitidos, y la llave indica la cantidad exacta. Si el usuario escribe letras o menos de nueve números, el navegador lanza un mensaje de no hace match con lo solicitado [02:50].

¿Para qué sirve el atributo title en un input?

El atributo title muestra un mensaje al hacer hover sobre el campo. Es útil para explicar el formato esperado, como ingresa nueve dígitos, sin ocupar espacio visible en el formulario.

¿Qué es una expresión regular en HTML? Es una fórmula que describe un patrón de texto. Sirve para validar formatos como teléfonos, códigos postales o identificaciones, indicando qué caracteres y en qué cantidad se permiten.

¿Cómo limitar números y fechas con min, max y step?

Los inputs de tipo number y date aceptan límites mínimos y máximos. Esto es clave cuando vendes productos por unidad, manejas rangos de edad o necesitas controlar disponibilidad.

¿Cómo funcionan min, max y step en inputs numéricos?

Para un campo de cantidad, puedes definir:

• min="1" para impedir números negativos o cero.
• max="100" para fijar un tope superior.
• step="5" para que los incrementos vayan de cinco en cinco, ideal en ventas por mayoreo.

Con esa configuración, al usar las flechas del input, los valores saltan 1, 6, 11, 16 y así sucesivamente. Si el usuario escribe una letra, el navegador rechaza el envío porque el tipo number solo acepta dígitos [05:50].

¿Cómo restringir el rango de fechas en un input date?

En un input de tipo date, los mismos atributos min y max reciben fechas en formato AAAA-MM-DD. Por ejemplo, min="2024-01-01" y max="2024-12-31" dejan al usuario elegir solo días dentro de ese año. Si intenta navegar al 2023 en el calendario, no puede [08:30].

Esto es especialmente útil cuando necesitas filtrar usuarios por edad o restringir reservas a un periodo específico.

¿Cómo exigir contraseñas seguras con minlength?

Las contraseñas requieren dos validaciones básicas: que existan y que tengan una longitud mínima. La primera se resuelve con required, la segunda con minlength.

El estándar recomendado es de ocho caracteres como mínimo. Si agregas minlength="8", el navegador rechaza contraseñas como 1234 y muestra un aviso indicando cuántos caracteres faltan para cumplir el requisito [10:25].

¿Cuál es la longitud mínima recomendada para una contraseña? Ocho caracteres. Es una buena práctica de seguridad que se implementa fácilmente con el atributo minlength en HTML.

Estos atributos te dan una primera línea de defensa frente a datos mal formados, sin depender aún de JavaScript. ¿Qué validaciones sueles aplicar tú en tus formularios? Cuéntame en los comentarios qué patrones has usado para casos específicos como códigos postales o identificaciones.