Los formularios verticales se distinguen por que la etiqueta como el elemento input/textarea/select/… estan hacia abajo o en forma vertical.

En este articulo les mostrare como crear formularios verticales usando Bootstrap 3.

Plantilla Bootstrap

Antes de empezar debemos agregar bootstrap a nuestro documento HTML, tambien tenemos que tener en cuenta que el formualrio dependera del contenedor donde lo coloquemos.

Aqui les dejo una plantilla que pueden usar y que de hecho la usaremos en todos los ejemplos.

Como podemos ver en la plantilla tenemos una columna “col-md-12” que quiere decir que esa columna ocupa todo lo ancho de la ventana.

Formulario 1

Este ejemplo de formulario solo tiene 2 elementos, un input tipo texto y un boton.

Debemos notar que el input y su label estan dentro de un <div class=”form-group”></div> y el input tiene la clase “form-control”, la cual es util para todos los inputs, textarea y select.

Formulario 2

A continuacion les propongo un ejemplo mas completo, con mas campos.

Resultado

Esta es una imagen del resultado del formulario 2.

Como pueden ver se sigue un orden, primero la etiqueta y despues el input correspondiente, mas adelante veremos los formularios horizontales y las diferencias.