Validación Básica de Formularios

Seguimos con nuestro curso de HTML5, y hoy vamos a charlar sobre cómo hacer que los formularios sean más inteligentes usando validación básica con atributos HTML. Esto significa asegurarnos de que los usuarios llenen los campos correctamente antes de enviar el formulario, sin necesidad de JavaScript o servidores.

¿Qué es la validación básica de formularios?

La validación es el proceso de comprobar que los datos que un usuario ingresa en un formulario sean correctos o cumplan ciertas reglas, como no dejar campos vacíos o usar un correo válido. HTML5 trae atributos especiales que hacen esta validación automáticamente en el navegador, sin código extra. Estos atributos trabajan con etiquetas como <input>, <textarea> y <form>, y son súper fáciles de usar.

¿Por qué es útil?

Evita errores (como correos mal escritos).
Mejora la experiencia del usuario (les dice qué falta).
Es accesible y funciona en todos los navegadores modernos.

Atributos clave para validación

Vamos a ver los atributos más importantes para validar formularios. Los usaremos principalmente con <input> y <textarea>, pero también afectan al <form>.

1. required

Qué hace: Obliga a que el campo no esté vacío antes de enviar el formulario.
Dónde se usa: <input>, <textarea>, <select>.
Cómo se ve: Si el usuario intenta enviar sin llenar, el navegador muestra un mensaje como «Por favor, completa este campo».

Ejemplo:

<input type="text" name="nombre" required>

Si dejas el campo vacío y envías, no te deja hasta que escribas algo.

2. type

Qué hace: Define el tipo de dato esperado y valida automáticamente según eso.
Valores comunes:
email: Comprueba que sea un correo válido (con @ y dominio).
number: Solo permite números (puedes añadir min y max).
url: Valida que sea una URL (como https://...).
Cómo se ve: Si el dato no cumple, el navegador muestra un error, como «Ingresa un correo válido».

Ejemplo:

<input type="email" name="correo" required>

Debes escribir algo como juan@email.com. Si pones «juan123», el navegador lo rechaza.

3. min y max

Qué hace: Establece límites para campos numéricos (type="number") o fechas.
Dónde se usa: <input type="number">, <input type="date">.
Cómo se ve: El navegador impide enviar si el número está fuera del rango.

Ejemplo:

<input type="number" name="edad" min="18" max="99" required>

Solo acepta números entre 18 y 99.

4. minlength y maxlength

Qué hace: Limita la cantidad de caracteres en campos de texto.
Dónde se usa: <input type="text">, <textarea>.
Cómo se ve: Impide enviar si el texto es demasiado corto o largo.

Ejemplo:

<input type="text" name="contraseña" minlength="6" maxlength="12" required>

La contraseña debe tener entre 6 y 12 caracteres.

5. pattern

Qué hace: Usa una expresión regular para validar el formato del texto.
Dónde se usa: <input type="text">.
Cómo se ve: Si el texto no coincide con el patrón, el navegador muestra un error.

Ejemplo:

<input type="text" name="codigo" pattern="[A-Z]{3}" title="Debe ser 3 letras mayúsculas">

Solo acepta 3 letras mayúsculas (como «ABC»). El title explica el error.

6. novalidate (en <form>)

Qué hace: Desactiva la validación HTML para el formulario entero (útil para pruebas).
Dónde se usa: <form>.
Cómo se ve: Permite enviar sin comprobar nada.

Ejemplo:

<form action="/enviar" method="POST" novalidate>
    <input type="email" name="correo">
    <button type="submit">Enviar</button>
</form>

Aquí no valida, aunque el campo sea un correo.

Combinándolas: Ejemplo Completo

Vamos a crear un formulario de registro con validación básica, usando todos estos atributos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario de Registro</title>
</head>
<body>
    <!-- Cabecera -->
    <header>
        <h1>Regístrate</h1>
    </header>

    <!-- Formulario con validación -->
    <main>
        <form action="/registro" method="POST">
            <!-- Nombre -->
            <label for="nombre">Nombre:</label><br>
            <input type="text" id="nombre" name="nombre" required minlength="2" maxlength="50" placeholder="Tu nombre"><br>

            <!-- Correo -->
            <label for="email">Correo:</label><br>
            <input type="email" id="email" name="email" required placeholder="tu@correo.com"><br>

            <!-- Edad -->
            <label for="edad">Edad:</label><br>
            <input type="number" id="edad" name="edad" min="18" max="120" required><br>

            <!-- Código (3 letras mayúsculas) -->
            <label for="codigo">Código (3 letras mayúsculas):</label><br>
            <input type="text" id="codigo" name="codigo" pattern="[A-Z]{3}" title="Debe ser 3 letras mayúsculas" required><br>

            <!-- Mensaje -->
            <label for="mensaje">Comentarios:</label><br>
            <textarea id="mensaje" name="mensaje" rows="4" cols="40" placeholder="Opcional"></textarea><br>

            <!-- Botón -->
            <button type="submit">Registrar</button>
        </form>
    </main>

    <!-- Pie -->
    <footer>
        <p>© 2025 - Juan</p>
    </footer>
</body>
</html>

¿Qué ves?

Un formulario con:
Nombre: Obligatorio, entre 2 y 50 caracteres.
Correo: Obligatorio, debe ser un email válido.
Edad: Obligatorio, entre 18 y 120.
Código: Obligatorio, 3 letras mayúsculas (ej. ABC).
Mensaje: Opcional (sin required).
Si algo no cumple, el navegador muestra un mensaje de error (en español si tu navegador está configurado así).
<label> mejora la accesibilidad al conectar con cada campo.

Nota:

El action="/registro" es un ejemplo. Necesitas un servidor para procesar los datos.

Ejemplo con Más Opciones

Vamos a añadir un campo de tipo radio y checkbox con validación:

<form action="/encuesta" method="POST">
    <!-- Nombre -->
    <label for="nombre">Nombre:</label><br>
    <input type="text" id="nombre" name="nombre" required minlength="2"><br>

    <!-- Preferencia -->
    <p>¿Qué lenguaje prefieres?</p>
    <input type="radio" id="html" name="lenguaje" value="html" required>
    <label for="html">HTML</label><br>
    <input type="radio" id="css" name="lenguaje" value="css">
    <label for="css">CSS</label><br>

    <!-- Aceptar términos -->
    <input type="checkbox" id="terminos" name="terminos" required>
    <label for="terminos">Acepto los términos</label><br>

    <!-- Botón -->
    <button type="submit">Enviar</button>
</form>

Radio: Obligatorio elegir una opción (name="lenguaje" agrupa las opciones).
Checkbox: Debes marcarlo para enviar.
Resultado: No puedes enviar sin elegir un lenguaje y aceptar los términos.

Consejos:

Prueba los errores: Deja campos vacíos o pon datos inválidos (como «123» en un type="email") para ver los mensajes del navegador.
Usa required con cuidado: No lo pongas en campos opcionales.
Combina atributos: Por ejemplo, type="email" required asegura un correo válido y no vacío.
Testea en varios navegadores: Chrome, Firefox y Safari muestran mensajes similares, pero el estilo puede variar.
Añade <label>: Mejora la accesibilidad y hace los campos más clicables.

Que ha aprendido hoy:

Atributos de validación:
required: Campo obligatorio.
type: Valida formatos (email, number, url).
min/max: Límites para números.
minlength/maxlength: Longitud de texto.
pattern: Formato personalizado.
novalidate: Desactiva validación (para pruebas).
Estos atributos hacen que tus formularios sean robustos y fáciles de usar sin código extra.

Con esto, tus formularios no solo piden datos, sino que los piden bien. ¿Te animas a crear un formulario con validación para algo que te guste, como una encuesta? El siguiente capitulos hablaremos sobre vídeo y audio en html.

Formularios Básicos

Video y Audio en html