Tema 16 · Formularios

Fundamentos de Formularios (<form>)

Aprende a capturar información de los usuarios: la etiqueta <form>, métodos GET vs POST, vinculación accesible con <label> y agrupación con <fieldset>.

Diseño Web Responsivo y Viewport Tipos de Entrada (Inputs Modernos)

¿Cómo funciona un Formulario Web?

Un formulario en HTML es el mecanismo principal para recolectar información ingresada por un usuario y enviarla a un servidor web para su almacenamiento o procesamiento (como inicio de sesión, registro o pago). 

<form action="/procesar.php" method="POST">
  <label for="correo">Correo electrónico:</label>
  <input type="email" id="correo" name="correo">
  <button type="submit">Enviar Datos</button>
</form>

Atributos Clave de la Etiqueta <form>

Atributo Descripción y Opciones
action Especifica la URL o archivo de backend (PHP, Node, etc.) que recibirá y procesará los datos al hacer clic en enviar.
method="GET" Envía los datos adjuntos a la URL en forma de query string (ej: /buscar?q=html5). Es ideal para motores de búsqueda y filtros. Nunca uses GET para contraseñas, ya que quedan visibles en el historial y en los logs del servidor.
method="POST" Envía los datos de forma invisible dentro del cuerpo (HTTP body) de la petición. Es el estándar obligatorio para contraseñas, transferencias, registros de usuarios y subida de archivos.
enctype Tipo de codificación de los datos. Para formularios estándar se usa application/x-www-form-urlencoded. Si vas a permitir subir archivos (imágenes, PDFs), debes usar obligatoriamente multipart/form-data.

La Importancia Vital de la Etiqueta <label>

Nunca coloques un campo de entrada sin su respectiva etiqueta <label>. Para vincularlos, el valor del atributo for del label debe coincidir exactamente con el id del input:

  • Accesibilidad: Los lectores de pantalla leen la etiqueta en voz alta cuando el usuario ciego se posiciona en el campo.
  • Usabilidad táctil: Cuando el usuario toca o hace clic en el texto de la etiqueta, el cursor se coloca automáticamente dentro del campo de texto (o activa/desactiva la casilla de verificación).

Agrupación con <fieldset> y <legend>

Para formularios largos (como compras o registros médicos), <fieldset> dibuja un recuadro que agrupa campos relacionados, y <legend> define su título descriptivo.

⚡ Estructura de un Formulario de Contacto Accesible

Haz clic en los textos de las etiquetas y observa cómo el foco salta de inmediato al campo correspondiente:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Formulario Básico HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .formulario-card {
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 24px;
      max-width: 480px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    fieldset {
      border: 1px solid #94a3b8;
      border-radius: 6px;
      padding: 15px;
      margin-bottom: 15px;
    }
    legend {
      font-weight: bold;
      color: #0284c7;
      padding: 0 8px;
    }
    .campo-grupo {
      margin-bottom: 12px;
    }
    label {
      display: block;
      font-weight: 600;
      margin-bottom: 4px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    input[type="text"], input[type="email"] {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 0.95rem;
    }
    input:focus {
      outline: none;
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    }
    .btn-submit {
      background: #0284c7;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
      width: 100%;
    }
    .btn-submit:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="formulario-card">
    <h3 style="margin-top: 0; color: #0f172a;">Registro de Aspirantes</h3>

    <form action="#" method="POST" onsubmit="event.preventDefault(); alert('¡Formulario enviado correctamente!');">
      <fieldset>
        <legend>Datos Personales</legend>
        
        <div class="campo-grupo">
          <label for="nombre-completo">Nombre Completo:</label>
          <input type="text" id="nombre-completo" name="nombre" placeholder="Ej: María José Ortiz" required>
        </div>

        <div class="campo-grupo">
          <label for="correo-electronico">Correo Institucional:</label>
          <input type="email" id="correo-electronico" name="correo" placeholder="[email protected]" required>
        </div>
      </fieldset>

      <button type="submit" class="btn-submit">
        Enviar Solicitud de Inscripción
      </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.