Formulario horizontal con Bootstrap

29/Oct/2015 Bootstrap Deja un comentario

Ya vimos en otro ejemplo cómo podíamos crear un formulario en línea con Bootstrap, en este caso vamos a ver cómo podemos crear un formulario horizontal con Bootstrap. Un formulario horizontal será aquél que distribuya de forma homogénea los campos del formulario en líneas estructurales de tal manera que las etiquetas de los campos se queden alineadas a la izquierda de los campos de texto.

Veremos que Bootstrap trata a los formularios horizontales de la misma que utiliza los grid para realizar el diseño responsive de elementos.

Pero creo que lo mejor es que veáis como sería un formulario horizontal con Bootstrap en una imagen:

formulario_bootstrap_horizontal

Cómo podéis apreciar se ve la alineación horizontal del formulario.

Recuerda que siempre que utilices Bootstrap necesitarás importar la librería Javascript bootstrap.js y la hoja de estilos bootstrap.css.

Así que vamos paso a paso. Lo primero será crear nuestro formulario, el cual tendrá dos campos de texto para un usuario y password, un checkbox para marcar un recordatorio y un botón de envío.

Para añadir los controles hay que recordar que en Bootstrap se maneja el form-group, el cual agrupa un label y un input. Y que los elementos de entrada se codifican como form-control

  1. <div class="form-group">
  2. <label for="nombre">Nombre:</label>
  3. <input class="form-control" id="nombre" type="text" name="nombre"/>
  4. </div>
  5. <div class="form-group">
  6. <label for="email">Email:</label>
  7. <input class="form-control" id="email" type="text" name="email"/>
  8. </div>

Ahora vamos a añadir el checkbox como otro form-group.

  1. div class="form-group">
  2. <div class="checkbox">
  3. <input type="checkbox"> Recordar datos
  4. </label>
  5. </div>
  6. </div>

Y por último añadimos el botón.

  1. <div class="form-group">
  2. <button type="submit" class="btn btn-default">Enviar</button>
  3. </div>

Ahora vamos a definir que el formulario es un grid. Para ello asignamos la clase "form-horizontal" al formulario.

  1. <form class="form-horizontal">...</form>

En este momento los elementos del formulario se sitúan e un un grid de tamaño 12. Es por ello que mediante los elementos col-xs-x (dispositivos <768px), col-sm-x (dispositivos >=768px), col-md-x (dispositivos >= 992px) y col-lg-x (dispositivos >= 1200px) podemos colocar nuestros elementos del formulario.

En nuestro caso vamos a utilizar col-sm-x para colocar los elementos. Ahora el tema es dónde utililizar esta clase dentro de los elementos que tenemos ya en el formulario.

Por ejemplo, para los campos de texto vamos a hacer que la etiqueta ocupe 2 posiciones y el campo de texto 10. Recuerda que el máximo es 12. Para ello vamos a apoyarnos en la clase del elemento label, pero el input deberemos de recubrirlo con una capa.

  1. <div class="form-group">
  2. <label class="col-sm-2 control-label" for="email">Email</label>
  3. <div class="col-sm-10">
  4. <input class="form-control" id="email" type="text" name="email"/>
  5. </div>
  6. </div>
  7.  
  8. <div class="form-group">
  9. <label class="col-sm-2 control-label" for="password">Password</label>
  10. <div class="col-sm-10">
  11. <input class="form-control" id="password" type="password" name="password"/>
  12. </div>
  13. </div>

Para el caso del botón y del checkbox pasa lo mismo, que tenemos que recurbrirlo con una capa para poder aplicar el estilo.

  1. <div class="form-group">
  2. <div class="col-sm-offset-2 col-sm-10">
  3. <div class="checkbox">
  4. <input type="checkbox"> Recordar datos
  5. </label>
  6. </div>
  7. </div>
  8. </div>

En este caso hemos utilizado también la clase col-sm-offset-2 la cual indica que ese elemento evite dos posiciones, por lo cual conseguiremos que se represente debajo de los campos de entrada.

De esta forma hemos visto que con las mismas técnicas de un grid podemos montar un formulario horizontal con Bootstrap.

Vídeos sobre Bootstrap


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*