Ver índice de contenidos del libro

5.2. Formulario en línea

Para que el formulario ocupe el menor espacio posible, añade la clase .form-inline para que las etiquetas <label> se muestren a la izquierda de cada campo del formulario. Ejemplo:

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="ejemplo_email_2">Email</label>
    <input type="email" class="form-control" id="ejemplo_email_2"
           placeholder="Introduce tu email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="ejemplo_password_2">Contraseña</label>
    <input type="password" class="form-control" id="ejemplo_password_2" 
           placeholder="Contraseña">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> No cerrar sesión
    </label>
  </div>
  <button type="submit" class="btn btn-default">Entrar</button>
</form>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Formulario en línea en Bootstrap 3

Figura 5.2 Formulario en línea en Bootstrap 3

Como los elementos <input>, <select> y <textarea> tienen por defecto una anchura del 100% en Bootstrap 3, para utilizar los formularios en línea tienes que establecer a mano la anchura de cada campo de formulario.

Truco Los lectores utilizados por las personas discapacitadas tienen problemas con los formularios que no incluyen un <label> por cada campo de formulario. Si quieres ocultar estos elementos para los formularios en línea, utiliza la clase .sr-only explicada en los capítulos anteriores.