Componentes de Bootstrap

Campos de texto

Las entradas de texto de un formulario: texto, email, número, contraseña, área de texto, solo lectura y archivo. Siempre con etiqueta visible y nunca redibujadas por un plugin.

Un campo de texto recoge texto escrito o elegido. Es el form-control del tema: la misma altura, borde y anillo de foco en todos los plugins. Moodle dibuja sus formularios con él; un plugin que necesita un campo usa la clase y nada más.

Cuándo usarlo

Úsalo

Una label visible en cada campo, enlazada con for e id.
Una línea form-text bajo el campo para una pista que hace falta antes de escribir.
readonly para un valor que se puede copiar pero no cambiar, disabled para un campo que ahora no está disponible.
El type correcto (email, number, password, search) para que el teclado y el navegador ayuden.

No

Usar el placeholder como etiqueta: desaparece al escribir.
Redibujar el borde, el radio, el relleno o el anillo de foco en un plugin.
Poner un ancho fijo en píxeles; usa la rejilla o max-width.
Mostrar un error solo con color; añade el texto que dice qué falla (validación).

Anatomía

Un campo tiene una etiqueta encima, el control (texto, con un placeholder opcional), una pista opcional (form-text) debajo y, cuando algo falla, un mensaje (ver validación). Un campo nunca lleva un icono dentro; usa un grupo de entrada para un complemento.

Variantes y estados

Campo de texto

ReposoHoverFocoDesactivado

text

Área de texto

ReposoHoverFocoDesactivado

textarea

Campos de un formulario

Tamaños

Pequeño, normal y grande

Usa el tamaño normal. El pequeño es para sitios densos (una barra de filtros sobre una tabla); el grande, solo para un campo principal único de una página, como un buscador.

Un formulario completo

Cómo se juntan los campos: un título con la regla de los obligatorios, una etiqueta sobre cada campo con su ayuda debajo, campos relacionados en paralelo cuando caben (y apilados cuando no), mensajes de validación junto al campo del que hablan y las acciones al pie de la tarjeta, la principal la última. Un campo lleva una sombra interior suave para que se lea como algo donde escribir, toma un tinte al pasar el puntero y un anillo al enfocarlo.

Un formulario con sus estados de validación

Combinaciones

Combinación	Para qué usarla
Etiqueta + campo + pista	La etiqueta encima, el campo y una pista de una línea. La pista se escribe antes de que exista el error; el error la sustituye.
Campo + grupo de entrada	Una unidad, un prefijo o un botón pegado al campo: usa el grupo de entrada en vez de dibujar el complemento dentro del campo.
Tamaño × contexto	Pequeño en filtros sobre una tabla, normal en formularios, grande para un campo principal como un buscador.
Solo lectura × desactivado	`readonly` para un valor que se puede copiar; `disabled` para un campo que ahora no está disponible (no se envía).

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
El borde tiene un contraste de 3:1 con la página	Un campo es un objetivo: quien tiene poca visión, o una pantalla al sol, debe ver dónde empieza. El borde por defecto de Bootstrap está más cerca de 2:1.
40 px de alto y más aire dentro	Es la altura de un botón, así que un campo y su botón se alinean, y el texto no toca el borde.
El foco es el borde en el color primario más un anillo suave	El campo activo es el que cambió de color, y el anillo es la misma señal que da cualquier otro control.
Las etiquetas van en seminegrita y la pista es pequeña y apagada	El ojo lee etiqueta, campo y pista en ese orden, y la pista nunca compite con lo que escribe el usuario.

Clases

Clase	Qué hace
`form-control`	Base de todo campo de texto, área de texto y entrada de archivo
`form-control-sm`, `form-control-lg`	Más pequeño y más grande
`form-label`	Etiqueta sobre un campo
`form-text`	Pista bajo un campo
`form-control-plaintext`	Un valor de solo lectura mostrado como texto, alineado con los demás campos
`readonly`, `disabled`	Atributos, no clases

En esta versión

Bootstrap 5.3 dibuja el foco como un anillo suave y guarda cada color en variables CSS (--bs-*), así que un tema recolorea un control con una sola variable.

Bootstrap 4.6 dibuja el foco como una sombra de color y compila los colores de cada control, así que un tema lo recolorea recompilando su hoja de estilos.

Accesibilidad

Todo campo tiene etiqueta; si el diseño no la tiene, dale aria-label.
aria-describedby apunta a la pista y al mensaje de error.
autocomplete con el valor correcto en datos personales.
El anillo de foco debe verse siempre; nunca outline: none.
El contraste del texto con el campo es 4,5:1; el del borde con la página, 3:1.