Los formularios son uno de los elementos más importantes de los sitios y aplicaciones web. Por eso Bootstrap permite diseñar formularios con aspectos muy variados y define decenas de estilos para todos los campos del formulario.

Configuración por defecto

En bootstrap, los controles del formulario reciben algunos estilos de forma global. Los controles textuales <input>, <textarea> y <select>, si se les aplica la clase .form-control se presentan con una anchura del 100%.

Tipos de formularios

Bootstrap proporciona tres tipos distintos de formulario:

Formulario vertical (por defecto)
Formulario horizontal
Formulario en línea

Hay que seguir las siguientes reglas para diseñar correctamente cualquiera de los tres tipos de formulario:

Hay que envolver las etiquetas (labels) y controles en <div class=”form-group”>. Esto es necesario para conseguir un espaciado óptimo.
Hay que añadir la clase .form-control a todos los elementos contextuales <input>, <textarea> y <select>.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo: Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario Vertical (básico)</h2>
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Teclea tu email">
    </div>
    <div class="form-group">
      <label for="pwd">Contraseña:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Teclea tu contraseña">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Recu&eacute;rdame</label>
    </div>
    <button type="submit" class="btn btn-default">Enviar</button>
  </form>
</div>

</body>
</html>

Vista en el navegador

Formularios Bootstrap en línea

En los formularios en línea, todos los elementos, se encuentran, horizontalmente, uno tras otro, con las etiquetas a la izquierda.

Nota: Lo anteriormente explicado sólo se aplica para formularios en ventanas gráficas de al menos 768 pixels de ancho.

Para diseñar un formulario en línea debes de añadir la clase .form-inline al elemento <form>.

El siguiente ejemplo crea un formulario en línea con dos campos de entrada, una casilla de verificación y un botón de confirmación.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo: Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario en línea</h2>
  <p>Asegúrese que el ancho de visualización es al menos de 768px para ver todos los elementos del formulario en línea, y con las etiquetas a la izquierda.</p>
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Teclee su email">
    </div>
    <div class="form-group">
      <label for="pwd">Contraseña:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Teclee su contraseña">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Recu&eacute;rdeme</label>
    </div>
    <button type="submit" class="btn btn-default">Enviar</button>
  </form>
</div>

</body>
</html>

Vista en el navegador

(Haz clic en la imagen para ver un ejemplo real)

Consejo: Si no incluyes una etiqueta para cada elemento del formulario, los navegadores tendrán problemas para representar el formulario. Puedes ocultar las etiquetas, utilizando la clase .sr-only

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ejemplo: Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario en línea con la clase .sr-only</h2>
  <p>Asegúrese que el ancho de visualización es al menos de 768px para ver todos los elementos del formulario en línea, y con las etiquetas a la izquierda.</p>
  <form class="form-inline">
    <div class="form-group">
      <label class="sr-only" for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Teclea tu email">
    </div>
    <div class="form-group">
      <label class="sr-only" for="pwd">Contraseña:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Teclea tu contraseña">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Recu&eacute;rdeme</label>
    </div>
    <button type="submit" class="btn btn-default">Enviar</button>
  </form>
</div>

</body>
</html>

Vista en el navegador

(haz clic en la imagen para ver un ejemplo real)

Formulario Bootstrap horizontal

Un formulario horizontal se distingue de los otros tanto en la disposición del margen izquierdo como en la presentación del mismo.

Normas adicionales para diseñar un formulario horizontal:

Añade la clase .form-horizontal a elemento <form>
Añade la clase .control-label a todos los elementos <label>

Consejo: utiliza las clases Bootstrap predefinidas de cuadrícula (grid) para alinear etiquetas y grupos de controles en un diseño horizontal.

El siguiente ejemplo crea un formulario horizontal con dos campos de entrada, una casilla de verificación y un botón enviar.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo: Webdisenia</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Formulario horizontal</h2>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Teclea email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Contraseña:</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="pwd" placeholder="Teclea tu contraseña">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox"> Recu&eacute;rdame</label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>

</body>
</html>