Controles especiales

File inputs y controles de archivo

Los file inputs permiten a los usuarios seleccionar y cargar archivos desde su dispositivo local. Bootstrap proporciona estilos consistentes para estos controles especializados que mantienen la armonía visual con el resto de elementos de formulario.

Estructura básica del file input

El input de tipo file utiliza la clase .form-control para mantener coherencia con otros elementos de formulario:

<div class="mb-3">
  <label for="archivo-basico" class="form-label">Seleccionar archivo</label>
  <input class="form-control" type="file" id="archivo-basico">
</div>

A diferencia de otros inputs de texto, el file input muestra un botón de navegación y el nombre del archivo seleccionado, manteniendo el estilo visual consistente con el sistema de formularios de Bootstrap.

Configuración de tipos de archivo

Puedes restringir los tipos de archivos que el usuario puede seleccionar usando el atributo accept:

<div class="mb-3">
  <label for="imagen" class="form-label">Imagen de perfil</label>
  <input class="form-control" type="file" id="imagen" accept="image/*">
</div>

<div class="mb-3">
  <label for="documento" class="form-label">Documento PDF</label>
  <input class="form-control" type="file" id="documento" accept=".pdf">
</div>

<div class="mb-3">
  <label for="multimedia" class="form-label">Archivo multimedia</label>
  <input class="form-control" type="file" id="multimedia" accept="image/*,video/*,audio/*">
</div>

El atributo accept filtra automáticamente los tipos de archivos en el selector nativo del navegador, mejorando la experiencia del usuario.

File input múltiple

Para permitir la selección múltiple de archivos, utiliza el atributo multiple:

<div class="mb-3">
  <label for="archivos-multiples" class="form-label">Seleccionar múltiples archivos</label>
  <input class="form-control" type="file" id="archivos-multiples" multiple>
</div>

<div class="mb-3">
  <label for="imagenes-galeria" class="form-label">Imágenes para galería</label>
  <input class="form-control" type="file" id="imagenes-galeria" accept="image/*" multiple>
</div>

Con multiple, el usuario puede seleccionar varios archivos simultáneamente manteniendo presionada la tecla Ctrl (Windows/Linux) o Cmd (Mac).

Variaciones de tamaño

Los file inputs soportan las mismas variaciones de tamaño que otros controles de formulario:

<div class="mb-3">
  <label for="archivo-pequeno" class="form-label">Archivo pequeño</label>
  <input class="form-control form-control-sm" type="file" id="archivo-pequeno">
</div>

<div class="mb-3">
  <label for="archivo-normal" class="form-label">Archivo normal</label>
  <input class="form-control" type="file" id="archivo-normal">
</div>

<div class="mb-3">
  <label for="archivo-grande" class="form-label">Archivo grande</label>
  <input class="form-control form-control-lg" type="file" id="archivo-grande">
</div>

Estados y validación visual

Los file inputs mantienen consistencia con los estados de validación del resto de controles:

<div class="mb-3">
  <label for="archivo-valido" class="form-label">Archivo válido</label>
  <input class="form-control is-valid" type="file" id="archivo-valido">
  <div class="valid-feedback">
    ¡Archivo seleccionado correctamente!
  </div>
</div>

<div class="mb-3">
  <label for="archivo-invalido" class="form-label">Archivo inválido</label>
  <input class="form-control is-invalid" type="file" id="archivo-invalido">
  <div class="invalid-feedback">
    Por favor selecciona un archivo válido.
  </div>
</div>

<div class="mb-3">
  <label for="archivo-deshabilitado" class="form-label">Archivo deshabilitado</label>
  <input class="form-control" type="file" id="archivo-deshabilitado" disabled>
</div>

Ejemplo práctico: Formulario de carga

Un ejemplo completo de formulario con diferentes tipos de file inputs:

<form>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="foto-perfil" class="form-label">Foto de perfil</label>
      <input class="form-control" type="file" id="foto-perfil" accept="image/jpeg,image/png">
      <div class="form-text">Solo archivos JPG o PNG, máximo 5MB</div>
    </div>
    
    <div class="col-md-6 mb-3">
      <label for="cv-documento" class="form-label">Currículum vitae</label>
      <input class="form-control" type="file" id="cv-documento" accept=".pdf,.doc,.docx">
      <div class="form-text">PDF, DOC o DOCX</div>
    </div>
  </div>
  
  <div class="mb-3">
    <label for="portafolio" class="form-label">Archivos de portafolio</label>
    <input class="form-control" type="file" id="portafolio" multiple accept="image/*,.pdf">
    <div class="form-text">Selecciona múltiples imágenes o PDFs</div>
  </div>
  
  <div class="mb-3">
    <label for="archivo-adicional" class="form-label">Archivo adicional (opcional)</label>
    <input class="form-control form-control-sm" type="file" id="archivo-adicional">
  </div>
  
  <button type="submit" class="btn btn-primary">Enviar archivos</button>
</form>

Los file inputs de Bootstrap aprovechan el comportamiento nativo del navegador para la selección de archivos, proporcionando una interfaz familiar para los usuarios mientras mantienen la consistencia visual del framework.

Range sliders y controles numéricos

Los range sliders y controles numéricos proporcionan interfaces intuitivas para que los usuarios seleccionen valores dentro de rangos específicos. Bootstrap ofrece clases especializadas que mantienen la coherencia visual mientras aprovechan las capacidades nativas del navegador.

Range sliders básicos

El input de tipo range utiliza la clase .form-range para aplicar los estilos específicos de Bootstrap:

<div class="mb-3">
  <label for="volumen" class="form-label">Volumen</label>
  <input type="range" class="form-range" id="volumen" min="0" max="100" value="50">
</div>

A diferencia de otros controles que usan .form-control, los range sliders utilizan .form-range para optimizar su apariencia y comportamiento específico como controles deslizantes.

Configuración de rangos y pasos

Puedes definir valores mínimos, máximos y pasos usando los atributos estándar de HTML:

<div class="mb-3">
  <label for="precio" class="form-label">Rango de precio (€)</label>
  <input type="range" class="form-range" id="precio" min="10" max="500" step="10" value="100">
  <div class="form-text">Desde €10 hasta €500, en incrementos de €10</div>
</div>

<div class="mb-3">
  <label for="calificacion" class="form-label">Calificación</label>
  <input type="range" class="form-range" id="calificacion" min="1" max="5" step="0.5" value="3">
  <div class="form-text">De 1 a 5 estrellas, en medios puntos</div>
</div>

<div class="mb-3">
  <label for="progreso" class="form-label">Progreso del proyecto (%)</label>
  <input type="range" class="form-range" id="progreso" min="0" max="100" step="1" value="75">
</div>

El atributo step controla la granularidad del slider, permitiendo valores decimales o incrementos específicos según las necesidades del formulario.

Controles numéricos básicos

Los inputs de tipo number mantienen la clase .form-control estándar mientras proporcionan controles específicos para números:

<div class="mb-3">
  <label for="cantidad" class="form-label">Cantidad</label>
  <input type="number" class="form-control" id="cantidad" min="1" max="99" value="1">
</div>

<div class="mb-3">
  <label for="edad" class="form-label">Edad</label>
  <input type="number" class="form-control" id="edad" min="18" max="120" value="25">
</div>

Los controles numéricos incluyen botones nativos del navegador para incrementar o decrementar valores, proporcionando una experiencia familiar para los usuarios.

Variaciones de tamaño en controles numéricos

Los inputs numéricos soportan las variaciones de tamaño estándar de Bootstrap:

<div class="mb-3">
  <label for="numero-pequeno" class="form-label">Cantidad pequeña</label>
  <input type="number" class="form-control form-control-sm" id="numero-pequeno" min="1" max="10" value="1">
</div>

<div class="mb-3">
  <label for="numero-normal" class="form-label">Cantidad normal</label>
  <input type="number" class="form-control" id="numero-normal" min="1" max="100" value="10">
</div>

<div class="mb-3">
  <label for="numero-grande" class="form-label">Cantidad grande</label>
  <input type="number" class="form-control form-control-lg" id="numero-grande" min="1" max="1000" value="100">
</div>

Configuración avanzada de controles numéricos

Los inputs numéricos permiten configuraciones específicas para diferentes tipos de valores:

<div class="row">
  <div class="col-md-6 mb-3">
    <label for="precio-producto" class="form-label">Precio (€)</label>
    <input type="number" class="form-control" id="precio-producto" 
           min="0" max="9999.99" step="0.01" value="19.99" placeholder="0.00">
  </div>
  
  <div class="col-md-6 mb-3">
    <label for="descuento" class="form-label">Descuento (%)</label>
    <input type="number" class="form-control" id="descuento" 
           min="0" max="100" step="5" value="0">
  </div>
</div>

<div class="mb-3">
  <label for="peso" class="form-label">Peso (kg)</label>
  <input type="number" class="form-control" id="peso" 
         min="0.1" max="999.9" step="0.1" value="1.0">
</div>

Estados y validación

Ambos tipos de controles mantienen consistencia con el sistema de validación de Bootstrap:

<div class="mb-3">
  <label for="rango-valido" class="form-label">Configuración válida</label>
  <input type="range" class="form-range is-valid" id="rango-valido" 
         min="0" max="100" value="80">
  <div class="valid-feedback">
    Configuración guardada correctamente
  </div>
</div>

<div class="mb-3">
  <label for="numero-invalido" class="form-label">Cantidad inválida</label>
  <input type="number" class="form-control is-invalid" id="numero-invalido" 
         min="1" max="10" value="15">
  <div class="invalid-feedback">
    La cantidad debe estar entre 1 y 10
  </div>
</div>

<div class="mb-3">
  <label for="control-deshabilitado" class="form-label">Control deshabilitado</label>
  <input type="number" class="form-control" id="control-deshabilitado" 
         value="5" disabled>
</div>

Ejemplo práctico: Configurador de producto

Un formulario completo que combina range sliders y controles numéricos:

<form>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title mb-0">Configurador de producto</h5>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="config-calidad" class="form-label">Calidad de imagen</label>
          <input type="range" class="form-range" id="config-calidad" 
                 min="1" max="10" value="7">
          <div class="form-text">De baja (1) a máxima calidad (10)</div>
        </div>
        
        <div class="col-md-6 mb-3">
          <label for="config-cantidad" class="form-label">Cantidad</label>
          <input type="number" class="form-control" id="config-cantidad" 
                 min="1" max="50" value="1">
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-4 mb-3">
          <label for="ancho" class="form-label">Ancho (cm)</label>
          <input type="number" class="form-control form-control-sm" id="ancho" 
                 min="10" max="200" step="0.5" value="20">
        </div>
        
        <div class="col-md-4 mb-3">
          <label for="alto" class="form-label">Alto (cm)</label>
          <input type="number" class="form-control form-control-sm" id="alto" 
                 min="10" max="200" step="0.5" value="30">
        </div>
        
        <div class="col-md-4 mb-3">
          <label for="grosor" class="form-label">Grosor (mm)</label>
          <input type="number" class="form-control form-control-sm" id="grosor" 
                 min="1" max="50" value="3">
        </div>
      </div>
      
      <div class="mb-3">
        <label for="transparencia" class="form-label">Transparencia</label>
        <input type="range" class="form-range" id="transparencia" 
               min="0" max="100" step="10" value="0">
        <div class="form-text">0% opaco - 100% transparente</div>
      </div>
      
      <div class="mb-3">
        <label for="presupuesto" class="form-label">Presupuesto máximo (€)</label>
        <input type="number" class="form-control" id="presupuesto" 
               min="10" max="1000" step="5" value="100">
      </div>
    </div>
    
    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Aplicar configuración</button>
      <button type="reset" class="btn btn-secondary">Restablecer</button>
    </div>
  </div>
</form>

Los range sliders y controles numéricos aprovechan las capacidades nativas del navegador para proporcionar interfaces intuitivas, mientras que las clases de Bootstrap garantizan una presentación visual coherente con el resto del sistema de formularios.

Controles de fecha, hora y color

Los controles de fecha, hora y color aprovechan las capacidades nativas del navegador para proporcionar interfaces especializadas de selección. Bootstrap mantiene la consistencia visual aplicando .form-control a estos elementos especiales, garantizando que se integren armoniosamente con el resto del sistema de formularios.

Controles de fecha básicos

El input de tipo date permite seleccionar fechas usando el selector nativo del navegador:

<div class="mb-3">
  <label for="fecha-nacimiento" class="form-label">Fecha de nacimiento</label>
  <input type="date" class="form-control" id="fecha-nacimiento" value="1990-01-01">
</div>

<div class="mb-3">
  <label for="fecha-evento" class="form-label">Fecha del evento</label>
  <input type="date" class="form-control" id="fecha-evento" min="2024-01-01" max="2024-12-31">
  <div class="form-text">Selecciona una fecha dentro del año 2024</div>
</div>

Los controles de fecha muestran un calendario cuando el usuario hace clic, proporcionando una interfaz visual intuitiva que varía según el navegador y sistema operativo.

Controles de tiempo

Los inputs de tipo time permiten seleccionar horas y minutos con precisión:

<div class="mb-3">
  <label for="hora-cita" class="form-label">Hora de la cita</label>
  <input type="time" class="form-control" id="hora-cita" value="09:00">
</div>

<div class="mb-3">
  <label for="hora-apertura" class="form-label">Hora de apertura</label>
  <input type="time" class="form-control" id="hora-apertura" 
         min="06:00" max="10:00" step="900" value="08:00">
  <div class="form-text">Entre 06:00 y 10:00, en intervalos de 15 minutos</div>
</div>

El atributo step en controles de tiempo define los intervalos en segundos (900 segundos = 15 minutos), permitiendo configurar la precisión según las necesidades del formulario.

Controles de fecha y hora combinados

El input datetime-local combina fecha y hora en un solo control:

<div class="mb-3">
  <label for="reunion" class="form-label">Fecha y hora de reunión</label>
  <input type="datetime-local" class="form-control" id="reunion" 
         value="2024-12-15T14:30">
</div>

<div class="mb-3">
  <label for="publicacion" class="form-label">Programar publicación</label>
  <input type="datetime-local" class="form-control" id="publicacion" 
         min="2024-01-01T00:00" max="2024-12-31T23:59">
  <div class="form-text">Programa la fecha y hora de publicación</div>
</div>

Controles de mes y semana

Bootstrap también soporta controles especializados para selección de meses y semanas:

<div class="row">
  <div class="col-md-6 mb-3">
    <label for="mes-reporte" class="form-label">Mes del reporte</label>
    <input type="month" class="form-control" id="mes-reporte" value="2024-01">
  </div>
  
  <div class="col-md-6 mb-3">
    <label for="semana-vacaciones" class="form-label">Semana de vacaciones</label>
    <input type="week" class="form-control" id="semana-vacaciones" value="2024-W25">
  </div>
</div>

Estos controles simplifican la selección cuando solo necesitas precisión a nivel de mes o semana, reduciendo la complejidad de la interfaz para el usuario.

Selectores de color

Los inputs de tipo color proporcionan selectores visuales de color:

<div class="mb-3">
  <label for="color-tema" class="form-label">Color del tema</label>
  <input type="color" class="form-control form-control-color" id="color-tema" value="#0d6efd">
</div>

<div class="mb-3">
  <label for="color-fondo" class="form-label">Color de fondo</label>
  <input type="color" class="form-control form-control-color" id="color-fondo" 
         value="#ffffff" title="Elige un color de fondo">
</div>

La clase .form-control-color optimiza la presentación del selector de color, ajustando sus dimensiones para mostrar mejor la muestra del color seleccionado.

Variaciones de tamaño

Los controles especiales mantienen compatibilidad con las variaciones de tamaño de Bootstrap:

<div class="mb-3">
  <label for="fecha-pequena" class="form-label">Fecha compacta</label>
  <input type="date" class="form-control form-control-sm" id="fecha-pequena">
</div>

<div class="mb-3">
  <label for="hora-normal" class="form-label">Hora estándar</label>
  <input type="time" class="form-control" id="hora-normal">
</div>

<div class="mb-3">
  <label for="color-grande" class="form-label">Color destacado</label>
  <input type="color" class="form-control form-control-color form-control-lg" id="color-grande" value="#198754">
</div>

Estados y validación

Los controles especiales integran perfectamente con el sistema de validación de Bootstrap:

<div class="mb-3">
  <label for="fecha-valida" class="form-label">Fecha confirmada</label>
  <input type="date" class="form-control is-valid" id="fecha-valida" value="2024-06-15">
  <div class="valid-feedback">
    Fecha disponible y confirmada
  </div>
</div>

<div class="mb-3">
  <label for="hora-invalida" class="form-label">Hora no disponible</label>
  <input type="time" class="form-control is-invalid" id="hora-invalida" value="13:00">
  <div class="invalid-feedback">
    Esta hora no está disponible
  </div>
</div>

<div class="mb-3">
  <label for="color-deshabilitado" class="form-label">Color bloqueado</label>
  <input type="color" class="form-control form-control-color" id="color-deshabilitado" 
         value="#6c757d" disabled>
</div>

Ejemplo práctico: Formulario de evento

Un formulario completo que demuestra la integración de diferentes controles especiales:

<form>
  <div class="card">
    <div class="card-header">
      <h5 class="card-title mb-0">Programar nuevo evento</h5>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="fecha-inicio" class="form-label">Fecha de inicio</label>
          <input type="date" class="form-control" id="fecha-inicio" 
                 min="2024-01-01" value="2024-06-15" required>
        </div>
        
        <div class="col-md-6 mb-3">
          <label for="fecha-fin" class="form-label">Fecha de finalización</label>
          <input type="date" class="form-control" id="fecha-fin" 
                 min="2024-01-01" value="2024-06-15">
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="hora-inicio" class="form-label">Hora de inicio</label>
          <input type="time" class="form-control" id="hora-inicio" 
                 value="09:00" step="900">
        </div>
        
        <div class="col-md-6 mb-3">
          <label for="hora-fin" class="form-label">Hora de finalización</label>
          <input type="time" class="form-control" id="hora-fin" 
                 value="17:00" step="900">
        </div>
      </div>
      
      <div class="mb-3">
        <label for="recordatorio" class="form-label">Recordatorio</label>
        <input type="datetime-local" class="form-control form-control-sm" id="recordatorio" 
               value="2024-06-14T09:00">
        <div class="form-text">Configura cuándo recibir el recordatorio</div>
      </div>
      
      <div class="row">
        <div class="col-md-8 mb-3">
          <label for="periodo-reporte" class="form-label">Periodo del reporte mensual</label>
          <input type="month" class="form-control" id="periodo-reporte" value="2024-06">
        </div>
        
        <div class="col-md-4 mb-3">
          <label for="color-categoria" class="form-label">Color de categoría</label>
          <input type="color" class="form-control form-control-color" id="color-categoria" 
                 value="#0d6efd" title="Color del evento">
        </div>
      </div>
      
      <div class="mb-3">
        <label for="semana-revision" class="form-label">Semana de revisión</label>
        <input type="week" class="form-control form-control-sm" id="semana-revision" value="2024-W25">
        <div class="form-text">Selecciona la semana para revisar el evento</div>
      </div>
    </div>
    
    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Crear evento</button>
      <button type="reset" class="btn btn-outline-secondary">Limpiar</button>
    </div>
  </div>
</form>

Los controles de fecha, hora y color aprovechan las implementaciones nativas de cada navegador, proporcionando experiencias optimizadas para cada plataforma mientras mantienen la coherencia visual del sistema de diseño de Bootstrap.