martes, 20 de septiembre de 2016

Formulario Sencillo con Bootstrap

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

Formulario sencillo con 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

Sublimetext2

Escribimos la estructura básica de HTML
estructura HTML

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

estructura HTML

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

incluir bootstrap

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

class container


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.

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

col-md-4

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.








3 comentarios:

  1. Thanks for sharing, nice post!

    Phục vụ cho nhu cầu vận chuyển container bằng đường bộ ngày càng lớn, vận chuyển xăng dầu bằng đường sắt và vận tải, gửi hàng hóa vận chuyển xe máy bắc nam bằng đường sắt cũng đã xây dựng nên những qui trình, dịch vụ vận chuyển hàng hóa bằng các toa xe chuyên dùng chuyên nghiệp và có hệ thống. Đảm bảo mang đến chất lượng tốt nhất cho khách hàng sử dụng dịch vụ.

    ResponderEliminar
  2. Excelente !! Me ayudó a aclarar muchas dudas...

    ResponderEliminar