UIEtiquetas flotantes5.3+
Un campo cuya etiqueta está dentro y sube cuando el usuario escribe. Solo para formularios compactos.
Una etiqueta flotante ahorra espacio vertical: la etiqueta hace de placeholder hasta que el campo tiene valor, y entonces se encoge encima. En los formularios de Moodle prefiere una etiqueta normal; usa esta para formularios cortos e independientes, como un inicio de sesión o un filtro rápido.
Cuándo usarlo
Úsalo
- Etiquetas cortas que quepan dentro del campo.
- El mismo enlace
idyforque cualquier etiqueta. - Un placeholder (aunque sea un espacio) en el campo: el efecto depende de él.
No
- Usarla en formularios largos ni junto a campos con etiqueta normal.
- Usar etiquetas largas; se cortan.
- Usarla con un campo que tiene un complemento en un grupo de entrada.
Anatomía
Un campo flotante tiene el control y la etiqueta detrás, ambos dentro de form-floating. La etiqueta se dibuja sobre el control y se mueve cuando el control tiene foco o valor.
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Flotante × formulario corto | Un inicio de sesión, un filtro rápido, un formulario corto de 1 a 4 campos. |
| Flotante × selector | El selector necesita w-100 para llenar la caja; la etiqueta está siempre elevada. |
| Flotante × validación | is-invalid y su mensaje funcionan como en cualquier campo. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| La etiqueta mantiene el tamaño y el color de un placeholder hasta que sube | El formulario es compacto, pero la etiqueta nunca se pierde: se encoge sobre el valor en vez de desaparecer. |
| El mismo relleno lateral que los demás campos | Un campo flotante y uno normal se alinean cuando comparten página. |
Clases
| Clase | Qué hace |
|---|---|
form-floating |
Envuelve el control y su etiqueta (la etiqueta va después del control) |
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.
Accesibilidad
- La etiqueta sigue enlazada con
for: un lector de pantalla la lee como siempre. - El contraste de la etiqueta reducida es el mismo 4,5:1.
- El placeholder no es la etiqueta.