Tema 6

Formularios y Tipos de Input en HTML5

Aprende a capturar datos de usuarios con formularios accesibles, etiquetas label, validaciones nativas y tipos de input modernos.

Formularios en la Web Moderna

El elemento <form> es el contenedor que agrupa campos interactivos para enviar información al servidor o procesarla con JavaScript.

Tipos de Input Imprescindibles

Tipo (type) Propósito y Validación Nativa
text Entrada de texto general de una sola línea.
email Valida automáticamente formato de correo con @ y dominio.
password Oculta los caracteres ingresados con puntos o asteriscos.
number Entrada numérica con atributos min, max y step.
date Selector nativo de fecha con calendario emergente del sistema.
checkbox / radio Selección múltiple (checkbox) o excluyente entre opciones (radio).

⚡ Ejemplo de Formulario Completo de Matrícula

Formulario con validación nativa HTML5, selector de cursos y campo de fecha:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Formularios HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 20px; background: #f8fafc; }
    .card { background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; max-width: 440px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
    .field { margin-bottom: 14px; }
    label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: #1e293b; }
    input[type="text"], input[type="email"], select, textarea {
      width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; font-size: 0.9rem;
    }
    input:focus, select:focus, textarea:focus { border-color: #2563eb; outline: none; }
    .btn { background: #2563eb; color: white; border: none; padding: 10px 18px; border-radius: 6px; font-weight: bold; width: 100%; cursor: pointer; }
    .btn:hover { background: #1d4ed8; }
  </style>
</head>
<body>

  <div class="card">
    <h3 style="margin-top: 0; color: #0f172a;">Inscripción al Bootcamp</h3>
    
    <form onsubmit="alert('¡Formulario validado y enviado correctamente!'); return false;">
      <div class="field">
        <label for="nombre">Nombre Completo:</label>
        <input type="text" id="nombre" name="nombre" placeholder="Ej: Valentina Restrepo" required>
      </div>

      <div class="field">
        <label for="correo">Correo Electrónico:</label>
        <input type="email" id="correo" name="correo" placeholder="[email protected]" required>
      </div>

      <div class="field">
        <label for="programa">Programa de Interés:</label>
        <select id="programa" name="programa" required>
          <option value="">-- Selecciona una especialidad --</option>
          <option value="fullstack">Bootcamp Fullstack Completo</option>
          <option value="backend">Desarrollo Backend PHP &amp; MySQL</option>
          <option value="frontend">Frontend con JavaScript &amp; CSS3</option>
        </select>
      </div>

      <div class="field">
        <label>
          <input type="checkbox" required> Acepto los términos de Kilopolis Academia
        </label>
      </div>

      <button type="submit" class="btn">Confirmar Inscripción &raquo;</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.