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