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.
