Formulario Básico con Bootstrap

01/Nov/2015 Bootstrap Deja un comentario

Bootstrap, al igual que con otros elementos del lenguaje HTML, nos proporciona un conjunto de funcionalidades para extender las capacidades de los formularios. En este ejemplo vamos a ver como podemos crear un formulario básico con Bootstrap.

Lo primero será crear un formulario básico directamente con HTML.

  1. <label for="nombre">Nombre:</label>
  2. <input class="form-control" id="nombre" type="text" name="nombre"/>
  3.  
  4. <label for="email">Email:</label>
  5. <input class="form-control" id="email" type="text" name="email"/>
  6.  
  7. <input type="checkbox"> Recordar datos
  8. </label>
  9. <button type="submit">Enviar</button>
  10. </form>

En este formulario lo que nos podemos encontrar son elementos label para especificar las etiquetas, elementos input para crear las cajas de texto o checkboxes y button para crear los botones. Entre otros muchos elementos HTML que nos sirven para crear un formulario.

form-control

El primer elemento que nos proporciona Bootstrap es la clase form-control la cual sirve para identificar un campo de entrada, ya sea un input, select o un textarea.

Mediante la clase form-control vamos a conseguir que el elemento de entrada ocupe un 100% del contenedor en el cual está definido.

  1. <label for="nombre">Nombre:</label>
  2. <input class="form-control" id="nombre" type="text" name="nombre"/>

form-group

Esta clase nos sirve para agrupar elementos dentro del formulario. Por ejemplo si tenemos una etiqueta y un campo de entrada podemos agruparlos en un solo elemento mediante la clase form-group.

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

btn

Si tenemos un botón podemos adecuarle, aunque no esté en un formulario. Para ello vamos a apoyarnos en la clase btn dentro del elemento button. La cual hará que la apariencia del botón sea más relevante.

  1. <button type="submit" class="btn btn-default">Enviar</butto

Además contamos con clases como btn-default, btn-primary, btn-success,... que nos permiten asociar diferentes visualizaciones al botón.

Con los conceptos form-control, btn y form-group podemos construir un formulario sencillo mediante Bootstrap. Finalmente nuestro formulario básico con Bootstrap quedaría de la siguiente forma:

  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>
  9.  
  10. <div class="form-group">
  11. <div class="checkbox">
  12. <input type="checkbox"> Recordar datos
  13. </label>
  14. </div>
  15. </div>
  16.  
  17. <button type="submit" class="btn btn-default">Enviar</button>
  18. </form>

Vídeos sobre Bootstrap


¿Algo que nos quieras comentar?

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

*

*