Bootstrap - Label Flotante: Una Guía Completa para Principiantes

¡Hola هناك، aspirantes a desarrolladores web! Hoy vamos a sumergirnos en el maravilloso mundo de las Label Flotantes de Bootstrap. Como tu profesor de informática del vecindario, estoy emocionado de guiarte en este viaje. No te preocupes si eres nuevo en la programación, tomaremos las cosas paso a paso y antes de que te des cuenta, estarás flotando etiquetas como un profesional.

¿Qué son las Label Flotantes?

Antes de sumergirnos, vamos a entender qué son las label flotantes. Imagina que estás llenando un formulario y la etiqueta de cada entrada flota mágicamente sobre el campo cuando comienzas a escribir. ¡Eso es lo esencial de las label flotantes! Proporcionan una interfaz de usuario limpia e intuitiva que ahorra espacio y se ve bastante genial también.

Ejemplo Básico

Vamos a empezar con un ejemplo básico para mojar nuestros pies:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Dirección de correo electrónico</label>
</div>

¿Qué está pasando aquí? Vamos a desglosarlo:

1. Envolvemos nuestro entrada y etiqueta en un div con la clase form-floating.
2. El input viene antes del label (¡este orden es importante!).
3. Añadimos un placeholder al entrada, que Bootstrap utilizará para determinar el tamaño de la etiqueta.

Cuando te enfoques en el entrada o comiences a escribir, la etiqueta flotará elegantemente sobre el campo de entrada. Es como magia, pero solo es CSS inteligente.

Textareas

Las label flotantes no son solo para entradas simples. Funcionan genial con textareas también:

<div class="form-floating">
<textarea class="form-control" placeholder="Deja un comentario aquí" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comentarios</label>
</div>

Este funciona igual que nuestro ejemplo básico, pero con un textarea en lugar de un input. Perfecto para cuando necesitas que los usuarios introduzcan texto más largo.

Selects

¿Qué pasa con los menús desplegables? Bootstrap te tiene cubierto:

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Ejemplo de menú desplegable con etiqueta flotante">
<option selected>Abre este menú desplegable</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<label for="floatingSelect">Funciona con selects</label>
</div>

La label flotante aparecerá cuando se seleccione una opción. Es una gran manera de hacer que tus formularios se vean consistentes en diferentes tipos de entrada.

Deshabilitado

A veces, es posible que necesites deshabilitar una entrada. Así es cómo puedes hacerlo mientras mantienes la label flotante:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">Dirección de correo electrónico (deshabilitado)</label>
</div>

Simplemente añade el atributo disabled a tu entrada, y Bootstrap lo estilizará apropiadamente.

Texto en solo lectura

¿Qué pasa si quieres mostrar información que no puede ser cambiada? Entra el texto en solo lectura:

<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">Entrada vacía</label>
</div>

Esto crea un campo no editable que aún se beneficia del estilo de label flotante.

Grupos de entrada

Las label flotantes también se pueden usar con grupos de entrada para layouts de formulario más complejos:

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Nombre de usuario">
<label for="floatingInputGroup1">Cantidad</label>
</div>
</div>

Este ejemplo combina un grupo de entrada (el prefijo de signo de dólar) con un entrada con label flotante.

Diseño

Finalmente, veamos cómo podemos organizar estas entradas con label flotante en una cuadrícula sensible:

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">Dirección de correo electrónico</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Abre este menú desplegable</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<label for="floatingSelectGrid">Funciona con selects</label>
</div>
</div>
</div>

Esto crea un diseño de dos columnas que se apila verticalmente en pantallas más pequeñas.

Juntando Todo

Ahora que hemos cubierto todos estos diferentes aspectos de las label flotantes, creemos un pequeño formulario que ponga todo junto:

<form class="container mt-5">
<h2>Contáctenos</h2>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="John Doe">
<label for="floatingName">Nombre Completo</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
<label for="floatingEmail">Dirección de correo electrónico</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>Elige un tema</option>
<option value="1">Consulta General</option>
<option value="2">Soporte Técnico</option>
<option value="3"> Retroalimentación</option>
</select>
<label for="floatingSelect">Tema</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Deja un comentario aquí" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">Comentarios</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Enviar</button>
</div>
</div>
</form>

Este formulario combina todos los elementos que hemos discutido: entradas, selects y textareas, todos con label flotantes, organizados en un diseño de cuadrícula sensible.

Conclusión

Y ahí lo tienes, amigos. Hemos cubierto todos los detalles de las label flotantes de Bootstrap. Desde entradas básicas hasta layouts complejos, ahora tienes las herramientas para crear formularios elegantes y amigables para el usuario que impresionarán a tus usuarios y harán que tus sitios web se destaquen.

Recuerda, la práctica hace la perfección. Intenta experimentar con estos ejemplos, mezcla y combina diferentes elementos y mira lo que puedes crear. Antes de que te des cuenta, estarás flotando etiquetas como un desarrollador web experimentado.

¡Feliz programación, y que tus etiquetas siempre floten elegantemente!

Credits: Image by storyset