Tema 17 · Formularios

Tipos de Entrada (Inputs Modernos)

Explora el catálogo completo de inputs en HTML5: textos, contraseñas, emails, selectores de fecha, colores, controles deslizantes y casillas.

Fundamentos de Formularios (<form>) Atributos y Validación Nativa

La Revolución de los Inputs en HTML5

HTML5 amplió dramáticamente las capacidades del elemento <input>. En lugar de depender de librerías pesadas de JavaScript para crear selectores de fechas o selectores de color, el navegador ahora los renderiza de forma nativa y optimizada para dispositivos móviles.

Tipo (type) Descripción Ventaja en Móviles (Smartphones)
type="text" Campo de texto estándar de una sola línea. Teclado alfanumérico habitual.
type="password" Oculta los caracteres ingresados mostrando asteriscos o puntos. Desactiva sugerencias automáticas de texto.
type="email" Valida automáticamente que el formato contenga un usuario y un dominio válido. Despliega teclas directas para @ y .com.
type="number" Solo permite dígitos numéricos; admite min, max y step. Abre el teclado numérico de diez dígitos.
type="tel" Captura números de teléfono internacional. Abre el teclado de marcación telefónica.
type="url" Valida direcciones web que inicien con protocolo (ej: https://). Muestra la barra inclinada / y dominios rápidos.
type="date" Selector de fecha (año, mes, día). Abre el calendario táctil nativo de iOS / Android.
type="color" Selector gráfico de color con paleta visual. Abre el widget selector de color del sistema operativo.
type="range" Control deslizante (slider) entre un rango mínimo y máximo. Barra táctil deslizable con el dedo.
type="checkbox" Casilla de verificación de opciones múltiples e independientes. Interruptor o casilla marcable.
type="radio" Selección única y excluyente; deben compartir el mismo atributo name. Botón circular de opción única.
type="file" Permite subir archivos locales. Soporta accept="image/*" y multiple. Abre la cámara o la galería de fotos.

⚡ Galería Interactiva de Tipos de Input

Interactúa con el selector de color, el control deslizante, el calendario de fecha y las casillas de opción:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Muestrario de Inputs HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .grid-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      max-width: 620px;
      background: white;
      padding: 24px;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
    }
    .full-width { grid-column: span 2; }
    label { font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 5px; color: #334155; }
    input[type="text"], input[type="email"], input[type="number"], input[type="date"] {
      width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
    }
    input[type="color"] {
      width: 100%; height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 2px;
    }
    input[type="range"] { width: 100%; cursor: pointer; }
    .opcion-radio { display: flex; align-items: center; gap: 8px; font-weight: normal; margin-top: 5px; }
  </style>
</head>
<body>

  <form class="grid-form" onsubmit="event.preventDefault(); alert('¡Datos recibidos con éxito!');">
    <div class="full-width">
      <h3 style="margin-top: 0; color: #0f172a;">Configuración de Perfil</h3>
    </div>

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

    <div>
      <label for="campo-fecha">Fecha de Nacimiento:</label>
      <input type="date" id="campo-fecha" name="fecha_nacimiento">
    </div>

    <div>
      <label for="campo-color">Color de Tema Favorito:</label>
      <input type="color" id="campo-color" name="color_tema" value="#0284c7">
    </div>

    <div>
      <label for="campo-rango">Nivel de Experiencia (1 - 100):</label>
      <input type="range" id="campo-rango" name="nivel_experiencia" min="1" max="100" value="75">
    </div>

    <div class="full-width">
      <label>Modalidad Preferida (Radio):</label>
      <div style="display: flex; gap: 20px;">
        <label class="opcion-radio">
          <input type="radio" name="modalidad" value="online" checked> Online en Vivo
        </label>
        <label class="opcion-radio">
          <input type="radio" name="modalidad" value="presencial"> Presencial
        </label>
      </div>
    </div>

    <div class="full-width" style="margin-top: 10px;">
      <button type="submit" style="background: #0284c7; color: white; border: none; padding: 10px; border-radius: 6px; font-weight: bold; width: 100%; cursor: pointer;">
        Guardar Configuración
      </button>
    </div>
  </form>

</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.