Formulario Básico con Bootstrap

01/Nov/2015 Bootstrap

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


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D