Diseño de formularios¶

Aunque las opciones que ofrece Bootstrap para diseño de formularios son en sí un componente más, vamos a dedicarles este documento aparte para poderlas abordar con más calma.

Bootstrap ofrece un conjunto amplio de clases, componentes y utilidades para diseñar formularios modernos, responsivos y accesibles. A continuación se explican las opciones principales y para qué sirve cada selector de clase que se usa normalmente.

1. Agrupar controles¶

A la hora de agrupar etiquetas y controles asociados, podemos englobarlos dentro de un contenedor (div, por ejemplo) y darle un margen en los lados que queramos:

<div class="mb-3">
  <label ...
  <input ...
</div>

2. Selectores para etiquetas y controles¶

Los principales selectores de clase para etiquetas y controles son form-label y form-control, respectivamente. El primero da un estilo consistente a las etiquetas en cuanto a espaciado, tamaño, tipografía... Y el segundo (normalmente para inputs de una sola línea) les da el 100% de anchura disponible, con un borde y padding predefinidos, y un focus visual mejorado.

Aquí vemos un ejemplo:

<div class="mb-3">
  <label class="form-label" for="nombre">Nombre:</label>
  <input type="text" name="nombre" id="nombre" class="form-control">
</div>

2.1. Campos checkbox y radio¶

Los campos de tipo checkbox o radio buttons tienen una casuística particular. Si les aplicamos el selector form-control obtenemos un efecto no deseado (que el pequeño recuadro ocupe el 100% de ancho disponible), y para ellos tenemos otros selectores especiales como form-check (para el contenedor que los englobe), form-check-input (para aplicar en el propio control) y form-check-label (para aplicar en la etiqueta asociada). Aquí vemos un ejemplo:

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">Aceptar términos</label>
</div>

Además, tenemos el selector form-switch, que convierte el checkbox en un interruptor tipo switch. Se aplica sobre el elemento contenedor, junto a form-check:

<div class="form-check form-switch">
    ...

2.2. Listas¶

En el caso de las listas también disponemos del selector form-select, que admite variantes como form-select-lg (tamaño grande) o form-select-sm (tamaño pequeño).

<select class="form-select">
  <option>Opción 1</option>
</select>

3. Ejemplo¶

Así definiríamos un formulario normal y corriente sin hacer uso de Bootstrap:

<form action="mipagina.php" method="post">
    <label for="nombre">Introduce tu nombre:</label>
    <br>
    <input type="text" name="nombre" id="nombre" size="20">
    <br>

    <label for="email">Introduce tu e-mail:</label>
    <br>
    <input type="email" name="email" id="email" size="20" maxlength="50">
    <br>

    <input type="checkbox" name="casado" id="casado">
    <label for="casado">Casado</label>
    <br>

    <label>Elige tu idioma preferido:</label>
    <br>
    <input type="radio" name="idioma" id="ingles" value="ingles" checked>
    <label for="ingles">Inglés</label>
    <br>
    <input type="radio" name="idioma" id="frances" value="frances">
    <label for="frances">Francés</label>
    <br>

    <input type="submit" value="Enviar datos">
</form>

Y su aspecto visual sería éste:

Ahora vamos a añadir la clase form-label a las etiquetas y form-control a los inputs de tipo texto (nombre y email) y al botón de enviar:

<form action="mipagina.php" method="post">
    <div class="mb-3">
        <label class="form-label" for="nombre">Introduce tu nombre:</label>
        <input class="form-control" type="text" name="nombre" id="nombre">
    </div>

    <div class="mb-3">
        <label class="form-label" for="email">Introduce tu e-mail:</label>
        <input class="form-control" type="email" name="email" id="email" maxlength="50">
    </div>

    <div class="mb-3 form-check">
        <input type="checkbox" name="casado" id="casado" class="form-check-input">
        <label class="form-check-label" for="casado">Casado</label>
    </div>

    <p>Elige tu idioma preferido:</p>

    <div class="form-check">
        <input type="radio" name="idioma" id="ingles" value="ingles" checked class="form-check-input">
        <label class="form-check-label" for="ingles">Inglés</label>
    </div>
    <div class="form-check">
        <input type="radio" name="idioma" id="frances" value="frances" class="form-check-input">
        <label class="form-check-label" for="frances">Francés</label>
    </div>

    <div class="mt-3">
        <input class="btn btn-primary" type="submit" value="Enviar datos">
    </div>
</form>

Ahora la apariencia es la siguiente:

Ejercicio 1

Diseña un formulario Bootstrap con una apariencia como la siguiente. En el desplegable deben aparecer las opciones "ESO", "Bachillerato", "FP" y "Otros".

Ejercicio 2

Descarga este formulario y aplícale los estilos facilitados por Bootstrap para poderlo visualizar de este modo:

Ejercicio 3

Diseña una página con un botón de edición (busca el icono del lápiz en la librería Bootstrap icons). Al pulsar el botón se abrirá un panel modal con un formulario para editar datos del perfil de un usuario: