¿Qué es un input?

Un input es un elemento HTML que permite al usuario introducir información. Su comportamiento se define mediante el atributo type y puede combinarse con atributos de validación, estilos y eventos JavaScript.

Tipos de input más comunes

Comparativa de atributos clave

Ejemplos de código HTML

A continuación, fragmentos listos para copiar y adaptar a tu proyecto.

<form action="/procesar" method="POST" class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="nombre" class="form-label">Nombre completo</label>
    <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Juan Pérez" required>
    <div class="invalid-feedback">Este campo es obligatorio.</div>
  </div>
  <div class="mb-3">
    <label for="correo" class="form-label">Correo electrónico</label>
    <input type="email" class="form-control" id="correo" name="correo" placeholder="usuario@ejemplo.com" required>
    <div class="invalid-feedback">Introduce un correo válido.</div>
  </div>
  <div class="mb-3">
    <label for="fecha_nac" class="form-label">Fecha de nacimiento</label>
    <input type="date" class="form-control" id="fecha_nac" name="fecha_nac" required>
    <div class="invalid-feedback">Selecciona una fecha.</div>
  </div>
  <div class="mb-3">
    <label class="form-label">Género</label>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="genero" id="genero_m" value="M" required>
      <label class="form-check-label" for="genero_m">Masculino</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="genero" id="genero_f" value="F">
      <label class="form-check-label" for="genero_f">Femenino</label>
    </div>
    <div class="invalid-feedback d-block">Selecciona una opción.</div>
  </div>
  <div class="mb-3">
    <label for="archivo" class="form-label">Adjuntar CV</label>
    <input type="file" class="form-control" id="archivo" name="archivo" accept=".pdf,.doc,.docx" required>
    <div class="invalid-feedback">Sube tu CV en formato PDF o Word.</div>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Este formulario incluye validación nativa y estilos de Bootstrap 5 para una experiencia responsive.

Accesibilidad y buenas prácticas

• Usa siempre <label> asociado mediante for al id del input.
• Añade atributos aria-describedby para mensajes de error.
• Evita placeholder como sustituto de la etiqueta; sirve solo como pista.
• Implementa novalidate solo cuando manejas la validación con JavaScript.
• Para usuarios de lectores de pantalla, proporciona descripciones claras y evita campos ocultos sin necesidad.

Seguridad y sanitización de datos

Los input solo recogen datos; la protección debe hacerse del lado del servidor:

• Escapa siempre los valores antes de mostrarlos en HTML (htmlspecialchars en PHP, escape en Django, etc.).
• Valida en backend: no confíes únicamente en la validación del navegador.
• Para type="file", verifica extensiones y tipos MIME, y guarda los archivos fuera del directorio público.
• Usa Content‑Security‑Policy y X‑Content‑Type‑Options: nosniff para prevenir ataques de inyección.

Optimización y rendimiento

Los formularios ligeros mejoran la velocidad de carga y la experiencia móvil:

• Minimiza el número de script y style que se cargan antes del formulario.
• Usa autocomplete="off" solo cuando sea estrictamente necesario.
• Aplica defer o async a los scripts de validación.

Conclusión

Dominar los diferentes tipos de input y sus atributos permite crear formularios seguros, accesibles y altamente usables. Combínalos con Bootstrap para una UI responsive y con validación tanto del cliente como del servidor para una experiencia robusta.