Formularios

Bootstrap aplica estilos a los elementos de tipo formulario para mejorar su apariencia y permitirnos crear diferentes alineaciones. La estructura básica de un formulario es la siguiente:

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1"
        placeholder="Enter email">
  </div>
</form>

Formulario básico

Para permitir que Bootstrap ajuste correctamente el espaciado, cada bloque o grupo de un formulario (normalmente formado por una etiqueta label y algún elemento de entrada de datos como un input, textarea, etc.) tendrá que estar agrupado por una caja contenedora con la clase .form-group. Además a cada input se le tiene que aplicar la clase .form-control.

Bootstrap sobrecarga y aplica estilos a los principales elementos de formulario definidos en HTML 5, como son: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, y color.

Formulario inline

Mediante la utilización de la clase .form-inline sobre la etiqueta <form> podemos crear formularios que se dispondrán en una sola línea. A continuación se incluye un ejemplo de este tipo de formularios:

<form class="form-inline" role="form">
  <div class="form-group">
    <div class="input-group">
      <label class="sr-only" for="exampleInputEmail2">Email address</label>
      <div class="input-group-addon">@</div>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Formulario inline

Nota 1: aunque los campos del formulario no contengan etiquetas (labels) es necesario incluirlas por cuestiones de accesibilidad, para dar soporte a los lectores de pantalla. Por este motivo se han incluido en el ejemplo anterior con la clase .sr-only (screen readers only).

Nota 2: Este estilo no se aplicará en pantallas pequeñas tipo móvil.

Formulario horizontal

Mediante la combinación de la clase .form-horizontal con el sistema de rejilla de Bootstrap podemos crear formularios horizontales como en el ejemplo siguiente:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Formulario horizontal

Es importante que nos fijemos que no se utilizan las clases .row para crear filas, ya que son sustituidas por .form-groups. Además, podemos aplicar la clase de las columnas para las etiquetas label directamente sobre dicho elemento, sin necesidad de crear una caja contenedora.

Estados de validación de un formulario

Bootstrap también incluye clases para aplicar diferentes estados de validación a un formulario. Para utilizarlo simplemente tenemos que añadir las clases: .has-warning, .has-error, o .has-success al elemento contenedor, en este caso a .form-group. De esta forma, el color de los elementos del formulario de dicho grupo cambiarán. A continuación podemos ver un ejemplo:

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

estados de validación

Agrupar inputs con otros elementos

Podemos añadir texto o botones al principio, final o a ambos lados de campo tipo <input>. Para esto tenemos que agrupar dicho input dentro de un .input-group y añadir dentro del grupo el elemento que queremos agrupar con la etiqueta .input-group-addon. A continuación se incluye un ejemplo:

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Input con icono