Formulario Sencillo con Bootstrap

Hola, en esta ocasión realizaremos este formulario en HTML utilizando el framework  bootstrap

Conocimientos previos

para poder realizar este formulario debes de saber manejar un editor de texto como notepad++ u otro  similar, yo utilizare sublimetext2 ademas debes de tener conocimientos básico de HTML y CSS.

Lo primero que debemos hacer es abrir nuestro editor de texto, a continuación creamos y guardamos un archivo HTML, preferiblemente dentro de una carpeta, yo lo llamare miformulario.html

Escribimos la estructura básica de HTML

Ingresamos el titulo de la página en el elemento <title>, yo lo llamare datos persona.

Ahora incluiremos bootstrap mediante la etiqueta link esto lo haremos en el head, también incluiremos una etiqueta meta con el atributo charset y el valor UTF-8, este permite que el documento reconozca los caracteres especiales como tildes y ñ.

Ya en este punto vamos a trabajar con bootstrap para dividir la página en filas y columnas. Esto lo hacemos con el  gryd system , este  traducie  sistema malla o red, lo que haremos es crear campos  así:

Para esto bootstrap trabaja una clase llamada row (Fila) y unas clases llamadas col

Las clases col van dentro de un elemento definido con la clase  row así:

<div class="row">

          <div class="col-...-...">

</div>

La clase col consta de dos parámetros más:

<col-tipo de pantalla-numero partes>

Cada que definimos un elemento con class row dividimos el ancho de la pantalla en 12 partes, por lo cual a cada columna le podemos asignar las partes que queramos sin sobre pasar las 12, si dejamos menos de doce dependiendo nuestro diseño se pueden llega a desorganizar.

Referente al tipo de pantalla se utiliza así:

Tipo de pantalla	clase	Resolución a la que aplica
Larga	Lg	> 1117 px
Mediana	md	> 970 px
Pequeña	sm	> 750 px
Extra pequeña	xm	<750 px

Un ejemplo:

Queremos dividir la pantalla en una fila y tres columnas para una pantalla de una computadora de escritorio.

Entonces creamos un elemento con clase row y tres elemento col para pantalla mediana como no podemos sobre pasar las 12 partes dividimos estas 12 en 3 y asignamos el resultado (4) a cada col  así:

<div class="row">

                <div class="col-md-4"></div>

                <div class="col-md-4"></div>

                <div class="col-md-4"></div>

</div>

Así tenemos una columna con tres filas.

Para trabajar con bootstrap debemos de definir un div con clase "container" y dentro de este  contener la demás estructura.

 Nuestro código quedaría así:

Ahora como queremos crear tres filas cada una con tres columnas basados en el ejemplo anterior creamos el row

Dentro de este creamos tres col-md-4 y vamos a colocar unos comentarios para distinguirlas.

Ahora solo copiamos las etiquetas definidas con clase row, y su contenido, dos veces más.

Así hemos creado una Grid o red y tiene el mismo concepto de una tabla tiene filas, columnas y la intercesión de estas que forman una celda.  

Entonces en  cada celda de estas vamos a crear un objeto de nuestro formulario, así;

   

Para nombre, apellido Rh vamos a utilizar un input type text.

Para género, tipo de documento utilizaremos select.

Para las fechas expedición y fecha d nacimiento unos input  type date.

Para el número de documento utilizaremos un input type number.

Así:

El botón lo ubique fuera de la grid, las etiqueta form debe de encerrar desde donde iniciamos la grid hasta el botón

Al abrir nuestro archivo visualizaremos algo como esto:

Esto sucede porque a todos los objetos(input, select) del formulario debemos de asignar la clase “form-control”

Al botón le agregaremos la clase “btn btn-default” y el type “submit”. Ahora veremos nuestra página así:

Para que exista un espacio entre cada casilla vamos a definir un objeto con la clase “form-group” encerrando cada fila o row así;

Nuestra página se debe de visualizar así:

Luego agregaremos estos valores en la apertura de la etiqueta from:

style="margin:5%; background-color:#F2F2F2; padding: 5%;

el atributo Style en este podemos establecer:

Un margen con margin  en este caso de 5% de la página.

Un color de fondo con background-color este es un color definido en código hexadecimal.

Y el margen interno con padding.

Y ya tenemos nuestro formulario al visualizarlo debe de mostrarse como la imagen del principio.

Formulario Sencillo con Bootstrap