Tutorial de Bootstrap 3: Formularios

Posiblemente uno de los elementos más importantes de nuestra Webs, los formularios. Con ellos, los usuario introducen datos que le pedimos y son enviados a nuestro servidor para ser procesados por nosotros.

Campos de formularios

Campos de entrada o Input

• type = Sirve para indicar uno de los tipos de control del formulario.
• Text: Muestra una caja para texto de una sola línea.
• Checkbox: Una casilla de selección, si hay varias podemos hacer múltiples selecciones.
• Radio: un botón de opción, sólo podemos elegir una única opción.
• File: Para subir archivos a nuestro servidor
• Reset: Crea un botón que al hacer clic en él, el formulario vuelve a sus valores por defecto.
• Submit: Crea un botón que cuando clicamos en él, enviamos la información introducida en el formulario al servidor

Con la aparición de HTML5, aparecieron más inputs para formularios .

Existen también otros elementos, pero no se tratan con la etiqueta de input, que son textarea y select. Con textarea tendremos un campo de texto de varias líneas, destinado normalmente a párrafos y select, para elegir una opción de una lista desplegable.

Recuerda que para definir qué tipo de input es el que vamos a mostrar al usuario, hay que utilizar type.

Texto

Para un input tipo texto en una sola línea, utilizaremos text. Si le añadimos la clase .form-control el input se adaptará al 100% de la página.

Cuando queramos tener un campo para escribir párrafos largos , utilizaremos textarea. Recordad que este campo no es un input. añadimos rows= para ver cuantas líneas queremos que sea de alto.

Checkboxes y radio buttons

Para elegir entre varias opciones, tenemos dos soluciones. Los checkboxes donde podremos elegir varias opciones a la vez y los radio buttons donde podemos elegir una única opción .

Si queremos diseñar nuestro formulario en una línea , añadimos la clase .checkbox-inline, tanto para los checkbox como los radio buttons.

Listas desplegables

Además de los checkbox y radio buttons, tenemos listas despegables . Se suelen utilizar cuando tenemos muchas opciones a elegir. Estas listas desplegables se utilizan mucho para los campos de fecha.
 

También podemos tener listas desplegadas, además en ellas podemos elegir múltiples opciones. Para ello, le añadimos múltiple.

Tamaño de los campos

Para modificar la anchura de de los campos de nuestro formulario utilizamos de nuevo el sistema de grid . Sabiendo ya como funciona, os resultará muy fácil.

Si queremos modificar la altura de nuestros input, es más fácil. Tenemos dos opciones la clase input-lg para un tamaño grande o input-sm, para tamaño mediano. Si no le añadimos ninguna clase, aparecerá con el tamaño por defecto.

Una vez que nuestro usuario rellena el formulario, es necesario un botón de enviar para que nos llegue la información que el usuario nos ha facilitado. Con Bootstrap tenemos muchos tipos de botones para ello.

Y para el tamaño de los botones tenemos 3 opciones, .btn-lg, .btn-sm, o .btn-xs.