[Bootstrap 3] Crear un Formulario Vertical

 in Web Development  tagged bootstrap3 by

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.


<!– 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>

view raw

bootstrap-template1.html

hosted with ❤ by GitHub

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


<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>

view raw

bs3-form-v.html

hosted with ❤ by GitHub

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.


<!– 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>

view raw

bs3-form-v2.html

hosted with ❤ by GitHub

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.

Leave a comment

One thought on “[Bootstrap 3] Crear un Formulario Vertical”