Diseño de formularios

Bootstrap dispone de unos pocos selectores de clase que nos ayudan a dotar de un estilo diferente a nuestros formularios.

1. Principales selectores de clase

Por ejemplo, podemos utilizar los selectores de clase form-label para etiquetas y form-control para el resto de controles. Observemos la diferencia...

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">
    <label class="form-label" for="nombre">Introduce tu nombre:</label>
    <br>
    <input class="form-control" type="text" name="nombre" id="nombre" size="20">
    <br>

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

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

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

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

Ahora la apariencia es la siguiente:

Puedes leer más sobre el diseño de formularios con Bootstrap aquí.

1.1. El caso de los botones

En cuanto a los botones, Bootstrap también ofrece algunos selectores de clase para definir distintos tipos de botones, con distintas apariencias y colores. Por ejemplo, este botón se verá con texto blanco y fondo azul, al ser de tipo primary:

<input type="submit" value="Enviar datos" class="form-control btn btn-primary">

En general, tenemos disponible la siguiente gama de clases de botones (y veremos a continuación que esos mismos selectores se pueden aplicar también a otros componentes):

Ejercicio 1

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