Tema 18 · Formularios

Atributos y Validación Nativa

Aprende a validar formularios en el navegador sin una sola línea de JavaScript: required, pattern con RegEx, min/max, readonly y disabled.

Tipos de Entrada (Inputs Modernos) Select, Textarea, Datalist y Output

Validación Nativa sin JavaScript

Antes de HTML5, cualquier validación de formularios requería complejos scripts en JavaScript. Hoy en día, los navegadores modernos incluyen un motor de validación nativo integrado que detiene el envío, resalta el campo con error y muestra mensajes traducidos al idioma del usuario de forma automática.

Atributos de Restricción y Validación

Atributo Función Ejemplo
required Obliga a llenar el campo antes de poder presionar enviar. <input type="text" required>
pattern Valida el texto contra una Expresión Regular (RegEx). pattern="[0-9]{3}-[0-9]{3}"
min / max Establece valores mínimos y máximos para números o fechas. <input type="number" min="18" max="99">
minlength / maxlength Restringe el conteo mínimo y máximo de caracteres permitidos. <input type="password" minlength="8">
step Define el intervalo legal de salto numérico (útil para decimales o monedas). <input type="number" step="0.5">
placeholder Texto de ayuda en gris que desaparece cuando el usuario empieza a escribir. placeholder="[email protected]"

readonly vs disabled: ¿Cuál es la diferencia?

Comportamiento readonly (Solo Lectura) disabled (Deshabilitado)
¿El usuario puede editarlo? No No
¿Se puede enfocar / seleccionar texto? Sí No
¿Su valor se envía al servidor (POST/GET)? Sí, se envía normalmente No, se descarta por completo

⚡ Validación de Formulario en Tiempo Real

Intenta presionar "Registrar Usuario" sin escribir nada, o ingresa un código que no cumpla con el patrón RegEx de 4 números:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Validación Nativa HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-val { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; }
    .campo { margin-bottom: 14px; }
    label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: #1e293b; }
    input {
      width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
    }
    /* Estilos visuales con pseudoclases de validación */
    input:invalid:focus { border-color: #ef4444; background: #fff5f5; }
    input:valid:focus { border-color: #10b981; }
    .btn-submit {
      background: #0284c7; color: white; border: none; padding: 10px; border-radius: 6px; font-weight: bold; width: 100%; cursor: pointer;
    }
    .btn-submit:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="card-val">
    <h3 style="margin-top: 0; color: #0f172a;">Validación Estricta HTML5</h3>

    <form action="#" method="POST" onsubmit="event.preventDefault(); alert('¡Formulario validado con éxito!');">
      <div class="campo">
        <label for="codigo-seguridad">Código PIN de 4 Dígitos (Pattern RegEx):</label>
        <input type="text" id="codigo-seguridad" name="pin" 
               pattern="[0-9]{4}" 
               maxlength="4" 
               placeholder="Ej: 1234" 
               title="El PIN debe contener exactamente 4 dígitos numéricos" 
               required>
      </div>

      <div class="campo">
        <label for="edad-usuario">Edad (Mínimo 18 años):</label>
        <input type="number" id="edad-usuario" name="edad" min="18" max="100" placeholder="18" required>
      </div>

      <div class="campo">
        <label for="campo-bloqueado">ID de Transacción (Readonly):</label>
        <input type="text" id="campo-bloqueado" name="txn_id" value="TXN-2026-KLP-884" readonly style="background: #f1f5f9;">
      </div>

      <button type="submit" class="btn-submit">Validar y Enviar</button>
    </form>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.