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.

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

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

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

Fuente: Evilnapsix

Posts Relacionados

Comments

comments

Deja una respuesta

Tu email no será publicado. Los campos requeridos estan marcados con *
Puedes usar tags HTML y los atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>