[Bootstrap 3] Crear un Formulario Vertical
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered by http://evilnapsis.com –> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bootstrap 3 – Form Vertical – Ex #1</title> | |
| <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <!– Codigo Bootstrap Va AQUI –> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form> | |
| <div class="form-group"> | |
| <label for="name1">Nombre</label> | |
| <input type="text" class="form-control" id="name1" name="name" placeholder="nombre"> | |
| </div> | |
| <button type="submit" class="btn btn-default">Submit</button> | |
| </form> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered by http://evilnapsis.com –> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bootstrap 3 – Form Vertical – Ex #2</title> | |
| <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-7"> | |
| <!– Codigo Bootstrap Va AQUI –> | |
| <h1>Boostrap 3 – Form Vertical – Ex #2</h1> | |
| <form> | |
| <div class="form-group"> | |
| <label for="name1">Nombre</label> | |
| <input type="text" class="form-control" id="name1" name="name" placeholder="Nombre" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="description1">Descripcion</label> | |
| <textarea class="form-control" id="description1" rows="4" name="description" placeholder="Descripcion" required></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="options1">Opciones</label> | |
| <select name="options" id="options1" class="form-control"> | |
| <option value="">Opcion Default</option> | |
| <option value="1">Opcion 1</option> | |
| <option value="2">Opcion 2</option> | |
| <option value="3">Opcion 3</option> | |
| </select> | |
| </div> | |
| <div class="checkbox"> | |
| <label> | |
| <input type="checkbox" name="acept" required> Acepto terminos y condiciones. | |
| </label> | |
| </div> | |
| <div class="radio"> | |
| <label class="radio-inline"> | |
| <input type="radio" name="radio1" id="myradio1" value="option1"> 1 | |
| </label> | |
| <label class="radio-inline"> | |
| <input type="radio" name="radio1" id="myradio2" value="option2"> 2 | |
| </label> | |
| </div> | |
| <button type="submit" class="btn btn-default">Submit</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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.
Gracias Agustín, buen tutorial, tus ejemplos me han ayudado mucho.
Saludos