Input y textarea

Inputs básicos y tipos fundamentales

Los inputs representan la base fundamental para la captura de datos del usuario en cualquier formulario web. Bootstrap transforma estos elementos HTML básicos en componentes visuales consistentes y profesionales mediante la aplicación de la clase .form-control.

La clase form-control

La clase fundamental .form-control es el punto de partida para estilizar cualquier input en Bootstrap. Esta clase aplica automáticamente el diseño característico del framework: bordes suaves, padding apropiado, tipografía consistente y estados de focus bien definidos.

<input type="text" class="form-control" placeholder="Introduce tu texto">

Al aplicar .form-control, el input adquiere inmediatamente la apariencia estándar de Bootstrap: fondo blanco, borde gris claro, esquinas redondeadas y una transición suave al hacer focus que cambia el color del borde al azul primario.

Input de texto básico

El tipo text es el más versátil y común de todos los inputs. Permite al usuario introducir cualquier tipo de texto libre, desde nombres hasta comentarios breves:

<input type="text" class="form-control" placeholder="Nombre completo">
<input type="text" class="form-control" placeholder="Empresa u organización">

Estos inputs se comportan de manera predecible en todos los navegadores y dispositivos, manteniendo la consistencia visual que caracteriza a Bootstrap.

Input para email

El tipo email está específicamente diseñado para capturar direcciones de correo electrónico. Aunque visualmente es idéntico al input de texto, los navegadores modernos proporcionan validación nativa y teclados optimizados en dispositivos móviles:

<input type="email" class="form-control" placeholder="correo@ejemplo.com">

Este tipo de input resulta especialmente útil en formularios de registro y contacto, donde la validez del email es crucial para la comunicación posterior.

Input para contraseñas

Los inputs de password ocultan automáticamente el texto introducido, mostrando puntos o asteriscos en su lugar. Mantienen toda la funcionalidad visual de Bootstrap mientras proporcionan la seguridad necesaria:

<input type="password" class="form-control" placeholder="Contraseña">
<input type="password" class="form-control" placeholder="Confirmar contraseña">

Es común utilizar múltiples inputs de password en formularios de registro para confirmar que el usuario ha introducido correctamente su contraseña deseada.

Input numérico

El tipo number está optimizado para la entrada de valores numéricos. Los navegadores suelen mostrar controles de incremento y decremento, y en dispositivos móviles aparece un teclado numérico:

<input type="number" class="form-control" placeholder="Edad" min="18" max="99">
<input type="number" class="form-control" placeholder="Cantidad" step="0.01">

Los atributos min, max y step permiten controlar el rango y precisión de los valores que puede introducir el usuario, aunque estas validaciones las veremos en lecciones posteriores.

Ejemplo práctico: formulario de contacto

Un formulario de contacto básico demuestra cómo combinar diferentes tipos de input manteniendo la consistencia visual:

<div class="mb-3">
  <label class="form-label">Nombre completo</label>
  <input type="text" class="form-control" placeholder="Tu nombre y apellidos">
</div>

<div class="mb-3">
  <label class="form-label">Correo electrónico</label>
  <input type="email" class="form-control" placeholder="tu@email.com">
</div>

<div class="mb-3">
  <label class="form-label">Teléfono</label>
  <input type="text" class="form-control" placeholder="+34 600 000 000">
</div>

<div class="mb-3">
  <label class="form-label">Edad</label>
  <input type="number" class="form-control" placeholder="25" min="16">
</div>

Combinación con utilidades conocidas

Los inputs con .form-control se integran perfectamente con las utilidades que ya dominas. Puedes aplicar espaciado, colores de fondo sutiles, o dimensiones específicas:

<!-- Input con margen inferior -->
<input type="text" class="form-control mb-4" placeholder="Con espaciado">

<!-- Input con ancho específico -->
<input type="email" class="form-control w-75" placeholder="75% de ancho">

La flexibilidad de Bootstrap permite que estos inputs básicos se adapten a cualquier diseño manteniendo siempre su funcionalidad y accesibilidad nativas.

Textareas y controles de tamaño

Los textareas son elementos fundamentales para capturar texto multilínea del usuario, como comentarios, descripciones o mensajes extensos. Bootstrap los integra perfectamente en su sistema de formularios aplicando la misma clase .form-control que utilizas con los inputs básicos.

Textarea básica con form-control

Al igual que los inputs, las textareas adoptan el estilo característico de Bootstrap mediante la clase .form-control. Esto garantiza consistencia visual con el resto de elementos del formulario:

<textarea class="form-control" placeholder="Escribe tu comentario aquí..."></textarea>

Esta textarea básica mantiene la apariencia estándar de Bootstrap: bordes suaves, padding apropiado y la transición de focus que ya conoces de los inputs.

Control de altura con el atributo rows

El atributo rows es la forma más directa de controlar la altura inicial de una textarea. Este valor determina cuántas líneas de texto serán visibles por defecto:

<!-- Textarea compacta para comentarios breves -->
<textarea class="form-control" rows="2" placeholder="Comentario breve"></textarea>

<!-- Textarea estándar para mensajes -->
<textarea class="form-control" rows="4" placeholder="Describe tu consulta"></textarea>

<!-- Textarea extensa para contenido largo -->
<textarea class="form-control" rows="8" placeholder="Escribe tu historia completa"></textarea>

Un valor de 2-3 rows funciona bien para comentarios cortos, 4-5 rows para descripciones estándar, y 6-8 rows o más para contenido extenso como testimonios o reportes.

Combinación con utilidades de dimensionado

Las utilidades de width que ya dominas se aplican perfectamente a las textareas, permitiendo crear layouts más específicos:

<!-- Textarea que ocupa la mitad del ancho disponible -->
<textarea class="form-control w-50" rows="3" placeholder="Media anchura"></textarea>

<!-- Textarea que ocupa el 75% del espacio -->
<textarea class="form-control w-75" rows="4" placeholder="Tres cuartos de anchura"></textarea>

<!-- Textarea de anchura completa (comportamiento por defecto) -->
<textarea class="form-control w-100" rows="5" placeholder="Anchura completa"></textarea>

Control de altura con utilidades de sizing

Además del atributo rows, puedes utilizar las utilidades de height para un control más preciso del tamaño vertical:

<!-- Altura específica usando utilidades -->
<textarea class="form-control h-25" placeholder="25% de altura del contenedor"></textarea>
<textarea class="form-control h-50" placeholder="50% de altura del contenedor"></textarea>

Sin embargo, el atributo rows suele ser más predecible y fácil de mantener para el contenido textual.

Ejemplo práctico: formulario de feedback

Un formulario de feedback demuestra el uso apropiado de textareas de diferentes tamaños según el tipo de información solicitada:

<div class="mb-3">
  <label class="form-label">Nombre del producto</label>
  <input type="text" class="form-control" placeholder="¿Sobre qué producto opinas?">
</div>

<div class="mb-3">
  <label class="form-label">Calificación general</label>
  <textarea class="form-control" rows="2" placeholder="Resumen en una o dos líneas"></textarea>
</div>

<div class="mb-3">
  <label class="form-label">Experiencia detallada</label>
  <textarea class="form-control" rows="6" placeholder="Cuéntanos tu experiencia completa con el producto"></textarea>
</div>

<div class="mb-3">
  <label class="form-label">Sugerencias de mejora</label>
  <textarea class="form-control w-75" rows="4" placeholder="¿Qué cambiarías o mejorarías?"></textarea>
</div>

Textareas en diferentes contextos

Las textareas se adaptan naturalmente a diferentes tipos de formularios según su propósito específico:

Para formularios de contacto:

<div class="mb-3">
  <label class="form-label">Mensaje</label>
  <textarea class="form-control" rows="5" placeholder="Describe tu consulta o mensaje"></textarea>
</div>

Para áreas de comentarios:

<div class="mb-3">
  <label class="form-label">Tu comentario</label>
  <textarea class="form-control" rows="3" placeholder="Comparte tu opinión"></textarea>
</div>

Para descripciones de productos o servicios:

<div class="mb-3">
  <label class="form-label">Descripción</label>
  <textarea class="form-control" rows="7" placeholder="Describe las características principales"></textarea>
</div>

Consideraciones de usabilidad

El tamaño apropiado de una textarea comunica al usuario qué cantidad de texto se espera. Una textarea de 2 rows sugiere una respuesta breve, mientras que una de 8 rows invita a proporcionar más detalles.

<!-- Sugiere respuesta corta -->
<textarea class="form-control" rows="2" placeholder="Título o resumen"></textarea>

<!-- Invita a respuesta detallada -->
<textarea class="form-control" rows="8" placeholder="Describe tu experiencia completa"></textarea>

Las textareas mantienen toda la flexibilidad de Bootstrap, permitiendo que se combinen con las utilidades de espaciado, colores y dimensiones que ya conoces, creando interfaces de formulario coherentes y funcionales.

Estados y personalización básica

Los inputs y textareas en Bootstrap pueden presentar diferentes estados visuales que comunican información importante al usuario sobre la interacción y disponibilidad de los campos. Además, las utilidades que ya conoces permiten personalizar su apariencia de forma sencilla y consistente.

Estados básicos de los inputs

El estado normal es el que hemos visto hasta ahora, donde el campo está disponible para interacción. Sin embargo, existen dos estados adicionales fundamentales que modifican tanto la apariencia como el comportamiento del elemento.

Estado disabled (deshabilitado)

El atributo disabled hace que un campo no sea interactivo y le aplica un estilo visual distintivo. Bootstrap reduce automáticamente la opacidad y cambia el cursor para indicar que el campo no está disponible:

<!-- Input deshabilitado -->
<input type="text" class="form-control" value="Campo no disponible" disabled>

<!-- Email deshabilitado con placeholder -->
<input type="email" class="form-control" placeholder="Email no editable" disabled>

<!-- Textarea deshabilitada -->
<textarea class="form-control" rows="3" disabled>Este contenido no se puede modificar</textarea>

Los campos deshabilitados no envían su valor cuando se submite el formulario y no pueden recibir focus del usuario. Son útiles para mostrar información contextual que no debe modificarse.

Estado readonly (solo lectura)

El atributo readonly permite que el usuario vea y seleccione el contenido del campo, pero no puede modificarlo. Visualmente es similar al estado normal, pero con una ligera diferencia en el color de fondo:

<!-- Input de solo lectura -->
<input type="text" class="form-control" value="Información solo de lectura" readonly>

<!-- Number input readonly -->
<input type="number" class="form-control" value="100" readonly>

<!-- Textarea readonly -->
<textarea class="form-control" rows="2" readonly>Este texto se puede seleccionar pero no editar</textarea>

A diferencia de disabled, los campos con readonly sí envían su valor al submeter el formulario y pueden recibir focus, permitiendo al usuario seleccionar y copiar el contenido.

Ejemplo práctico: formulario de perfil

Un formulario de perfil demuestra el uso apropiado de los diferentes estados según el contexto:

<div class="mb-3">
  <label class="form-label">Nombre de usuario</label>
  <input type="text" class="form-control" value="usuario123" readonly>
  <small class="form-text text-muted">El nombre de usuario no se puede cambiar</small>
</div>

<div class="mb-3">
  <label class="form-label">Email principal</label>
  <input type="email" class="form-control" value="usuario@ejemplo.com" readonly>
</div>

<div class="mb-3">
  <label class="form-label">Teléfono</label>
  <input type="text" class="form-control" placeholder="Introduce tu teléfono">
</div>

<div class="mb-3">
  <label class="form-label">Servicio premium</label>
  <input type="text" class="form-control" value="No disponible en tu plan" disabled>
</div>

Personalización de colores con utilidades

Las utilidades de color que ya dominas se pueden aplicar para personalizar la apariencia de los inputs según el contexto o la marca:

<!-- Input con fondo de color suave -->
<input type="text" class="form-control bg-light" placeholder="Fondo claro">

<!-- Input con texto de color específico -->
<input type="text" class="form-control text-primary" value="Texto en color primario">

<!-- Textarea con fondo de color temático -->
<textarea class="form-control bg-info-subtle" rows="3" placeholder="Fondo informativo suave"></textarea>

Es importante mantener la legibilidad al aplicar colores personalizados, especialmente en fondos que pueden afectar el contraste del texto.

Personalización de tamaños

Bootstrap ofrece variaciones de tamaño específicas para los elementos de formulario que complementan las utilidades generales de dimensionado:

<!-- Input pequeño -->
<input type="text" class="form-control form-control-sm" placeholder="Input pequeño">

<!-- Input tamaño normal (por defecto) -->
<input type="text" class="form-control" placeholder="Input normal">

<!-- Input grande -->
<input type="text" class="form-control form-control-lg" placeholder="Input grande">

Las mismas clases funcionan con textareas para mantener consistencia en todo el formulario:

<!-- Textarea pequeña -->
<textarea class="form-control form-control-sm" rows="2" placeholder="Textarea compacta"></textarea>

<!-- Textarea grande -->
<textarea class="form-control form-control-lg" rows="4" placeholder="Textarea destacada"></textarea>

Combinando estados y personalización

Puedes combinar diferentes estados con las utilidades de personalización para crear interfaces más expresivas:

<!-- Campo readonly con estilo informativo -->
<input type="text" class="form-control bg-info-subtle" value="ID: 12345" readonly>

<!-- Campo deshabilitado con tamaño pequeño -->
<input type="text" class="form-control form-control-sm" value="Función no disponible" disabled>

<!-- Textarea grande con fondo suave -->
<textarea class="form-control form-control-lg bg-light" rows="5" placeholder="Descripción detallada"></textarea>

Ejemplo práctico: formulario de configuración

Un formulario de configuración muestra cómo los estados y la personalización trabajan juntos para crear una interfaz clara y funcional:

<div class="mb-3">
  <label class="form-label">ID de cuenta</label>
  <input type="text" class="form-control form-control-sm bg-light" value="ACC-789456" readonly>
</div>

<div class="mb-3">
  <label class="form-label">Plan actual</label>
  <input type="text" class="form-control text-success" value="Plan Premium" readonly>
</div>

<div class="mb-3">
  <label class="form-label">Nombre para mostrar</label>
  <input type="text" class="form-control form-control-lg" placeholder="Tu nombre público">
</div>

<div class="mb-3">
  <label class="form-label">Función avanzada</label>
  <input type="text" class="form-control text-muted" value="Disponible próximamente" disabled>
</div>

<div class="mb-3">
  <label class="form-label">Biografía</label>
  <textarea class="form-control bg-light" rows="4" placeholder="Cuéntanos sobre ti"></textarea>
</div>

Consideraciones de accesibilidad

Los estados visuales deben ser claros para todos los usuarios. Bootstrap se encarga automáticamente de aplicar los atributos ARIA apropiados y cambios de color que mantengan el contraste adecuado.

<!-- Los estados se comunican visualmente y programáticamente -->
<input type="text" class="form-control" value="Solo lectura" readonly aria-label="Campo de solo lectura">
<input type="text" class="form-control" value="No disponible" disabled aria-label="Campo deshabilitado">

La combinación inteligente de estados y personalización permite crear formularios que no solo funcionan bien, sino que también comunican claramente su propósito y disponibilidad al usuario.