Formulario Básico con Bootstrap

Bootstrap, al igual que con otros elementos del lenguaje HTML, nos proporciona un conjunto de funcionalidades para extender las capacidades de los formularios. En este ejemplo vamos a ver como podemos crear un formulario básico con Bootstrap.

Crear el formulario HTML

Lo primero será crear un formulario básico directamente con HTML:

<form>
  <label for="nombre">Nombre:</label>
  <input id="nombre" name="nombre" type="text"></input>
  <label for="email">Email:</label>
  <input id="email" name="email" type="text"></input>
  <label>
    <input type="checkbox"></input> Recordar datos
  </label>
  <button type="submit">Enviar</button>
</form>

En este formulario lo que nos podemos encontrar son elementos label para especificar las etiquetas, elementos input para crear las cajas de texto o checkboxes y button para crear los botones.

Aplicar la clase form-control

El primer elemento que nos proporciona Bootstrap es la clase form-control la cual sirve para identificar un campo de entrada, ya sea un input, select o un textarea. Mediante la clase form-control vamos a conseguir que el elemento de entrada ocupe un 100% del contenedor en el cual está definido.

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

Agrupar elementos con form-group

Esta clase nos sirve para agrupar elementos dentro del formulario. Por ejemplo si tenemos una etiqueta y un campo de entrada podemos agruparlos en un solo elemento mediante la clase form-group:

<div class="form-group">
  <label for="email">Email:</label>
  <input class="form-control" id="email" name="email" type="text"></input>
</div>

Estilizar botones con btn

Si tenemos un botón podemos adecuarle, aunque no esté en un formulario. Para ello vamos a apoyarnos en la clase btn dentro del elemento button. La cual hará que la apariencia del botón sea más relevante.

<button class="btn btn-default" type="submit">Enviar</button>

Además contamos con clases como btn-default, btn-primary, btn-success, que nos permiten asociar diferentes visualizaciones al botón.

Formulario básico completo

Con los conceptos form-control, btn y form-group podemos construir un formulario sencillo mediante Bootstrap. Finalmente nuestro formulario básico con Bootstrap quedaría de la siguiente forma:

<form>
  <div class="form-group">
    <label for="nombre">Nombre:</label>
    <input class="form-control" id="nombre" name="nombre" type="text"></input>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input class="form-control" id="email" name="email" type="text"></input>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input type="checkbox"></input> Recordar datos
      </label>
    </div>
  </div>
  <button class="btn btn-default" type="submit">Enviar</button>
</form>