Y vamos a continuar con la codificación de nuestro ejercicio
vamos a modificar ahora nuestro archivo estilos puntos.
En este caso vamos a agregar los siguientes estilos tanto al elemento de Bodhi como a la clase llamada
de foul vamos a indicar un Jaitt de 1.6 m que es el tipo de fuente que vamos a utilizar posteriormente
vamos a definir un font family de tipo lucidas Sans Unicode.
Pero también podemos tener las opciones de lucidas Gray y sans serif.
En dado caso de que no estén las primeras opciones de este font family Font seis de 12 píxeles y el
color de seis seis nueve.
En este caso también es un código hexadecimal y con eso terminamos los estilos a nuestros elementos
de Bodhi y la clase de Falwell ahora vamos a definir el estilo llamado Juan con énfasis.
Este es un selector de tipo Heydi es decir que va a ser aplicado de manera única en todo nuestro documento
HTML y agregamos los siguientes atributos.
El margen de 45 píxeles especificamos el ancho de la tabla el cual es de 480 píxeles el texto online
lo vamos a alinear hacia la izquierda y no vamos a dejar espacios entre los renglones y las columnas
de la tabla.
Por lo tanto vamos a utilizar la opción de Border colapsã y el valor de colapsã es decir que va a quitar
los espacios entre renglones y columnas de la tabla y estos son todos los estilos que vamos a agregar
a este selector posteriormente vamos a agregar este selector pero para el elemento caption únicamente
para el título de nuestra tabla así que el iPhone 6 lo vamos a definir como 20 píxeles y este es el
único valor que vamos a modificar.
El título de nuestra tabla posteriormente también para los elementos de tipo T H.
Vamos a agregar el 6 de 14 píxeles el fondo weight normal y un padre de 12 píxeles en la parte superior
e inferior y de 15 píxeles en la parte izquierda y derecha también un color.
En este caso también el color lo estamos especificando con un código hexadecimal y estos son los estilos
que vamos a agregar a nuestros elementos de tipo Th.
Recordemos que es un tablet
continuando con la modificación ahora para los elementos de tipo TD los Tibol data vamos a agregar un
par de 10 píxeles en la parte superior e inferior de 15 píxeles en la parte izquierda y derecha asignamos
un color también y un borde en la parte superior.
En este caso de un pixel indicamos que es el estilo de tipo Solid y modificamos también el color de
este tipo de borde y también vamos a agregar una clase llamada o Furst que es la que vamos a aplicar
a nuestras columnas del lado izquierdo del formulario.
El background indicamos el color en este caso también el color en un código hexadecimal el borde.
Vamos a indicar que va a tener 10 pixeles de tipo sólido y también transparente el borde LEF la propiedad
de Border Leff.
También indicamos 10 píxeles Solid Transparent y esos son los valores que vamos a agregar a nuestro
estilo a nuestra clase o Shepherds y también cuando nos posicionamos en nuestros elementos de tipo TD
vamos a hacer lo siguiente vamos a agregar algunas propiedades más en este caso el color va a cambiar
según estamos indicando y también el background esto para que tenga un cierto efecto cuando estemos
posicionándonos en nuestros elementos del formulario HTML.
Recuerden que cualquier duda pueden dar clic en los nombres de los archivos.
Sin embargo se les solicita codificar línea de línea para que vaya quedando claro el manejo de formularios
HTML
finalmente vamos a ejecutar nuestro proyecto y el resultado es como sigue.
Podemos observar que hemos agregado en este caso un título formulario de registro de datos y en este
formulario hemos utilizado una tabla HTML para poder dar este estilo.
Hemos agregado dos columnas y 9 renglones.
En este caso la columna del lado izquierdo en su mayoría hemos aplicado el estilo de O.C first pero
en el último renglón únicamente agregamos un renglón para agregar los botones de limpiar o enviar este
formulario del lado izquierdo.
Hemos agregado las etiquetas por ejemplo la etiqueta de usuario password tecnologías de interés etc.
y del lado derecho hemos agregado los componentes HTML que nos van a servir precisamente para capturar
la información de este formulario y una vez que el usuario haya proporcionado esta información entonces
esta es la información que se va a enviar al servidor.
Hemos comentado que en este curso únicamente vamos a trabajar con la presentación de la información
y en otro curso como en el curso de serles quijotes Sepes vamos a procesar esta información que se envíe
al servidor Java.
Sin embargo todo este código que se genere se puede procesar con cualquier otra tecnología del lado
del servidor no necesariamente con el lenguaje Java sino que este formulario puede procesarse con otros
lenguajes como puede ser punto net PHP u otro tipo de lenguajes del lado del servidor.
También en cada uno de los elementos pueden dar clic derecho e inspeccionar cada uno de estos elementos.
De esta manera van a poder observar no solamente el tipo de componentes sino también los estilos que
se han aplicado a cada uno de estos elementos y así poder aclarar cualquier duda que tengan respecto
a la información que hemos trabajado en este formulario HTML.
Posteriormente en este mismo curso vamos a procesar este formulario por medio del lenguaje de JavaScript.
Así que este código lo vamos a reutilizar en otro ejercicio pero podemos comentar que en este caso el
usuario puede ir proporcionando información en estos campos por ejemplo en este Input text puede capturar
el nombre de usuario en este campo puede capturar el password y podremos observar que no se va a desplegar
la información sino que va a poner asteriscos debido a que especificamos que este campo va a ser de
tipo password.
Por lo tanto el navegador en automático en lugar de mostrar los caracteres va a mostrar asterisco por
cada caracter que se capture.
Posteriormente indicamos las tecnologías de interés por medio de elementos de tipo check box y mencionamos
que en este caso es común que lo configuramos para que el usuario pueda seleccionar más de una opción.
Posteriormente utilizamos un radio botón y en este caso mencionamos que es común que el usuario seleccione
únicamente una opción o selecciona hombre o selecciona mujer pero no ambas opciones posteriormente en
la ocupación.
Agregamos un elemento de tipo select y agregamos varias opciones así que el usuario una vez que dé clic
en esta lista se le van a desplegar las opciones según hayamos agregado a ese tipo Select pero en este
caso fue un Select que únicamente va a poder seleccionar una opción el usuario sin embargo también tenemos
elec para seleccionar múltiples opciones así que en este caso es un selector de tipo múltiple y el usuario
puede seleccionar más de una opción según se esté mostrando y finalmente agregamos un texto àrea para
que el usuario pueda capturar.
En este caso un texto más largo y también por medio de esta pestaña puede ser más grande o más pequeño.
Este campo de texto finalmente agregamos dos botones un botón de tipo reset y un botón de tipo submit
en automático en navegador al agregar estos botones por un lado va a limpiar el contenido si es que
damos clic en este botón de reset va a limpiar todos los valores y los va a regresar a su estado por
default.
Pero si damos clic en el botón de enviar entonces va a tomar toda esta información que ya hemos capturado
y la va a enviar al servidor.
En este caso si recordamos en nuestro formulario indicamos por medio del atributo Action una o R.L y
o R.L.
Eso se debe encontrar el servidor.
La ruta del servidor que va a procesar este formulario.
Sin embargo como hemos comentado en este curso únicamente nos estamos enfocando a la parte de la presentación
así como tareas extra pueden inspeccionar cada uno de los elementos de este formulario y así no solamente
saber los componentes HTML que hemos definido sino también los estilos que hemos aplicado a cada uno
de los elementos de este formulario
como tareas extra se deja probar con distintos valores y en este ejemplo nos está enviando la información
a ningún servidor.
Como hemos comentado esto lo estudiaremos en el siguiente curso de Servlets y jote Sepes pero ya tenemos
listo el formulario que vamos a trabajar en el siguiente curso.
Lo importante aquí es entender e inspeccionar los elementos HTML que utilizamos para crear este formulario
como conclusión.
Con este ejercicio hemos creado un formulario HTML con varios de los componentes que utilizaremos más
comúnmente en nuestras aplicaciones web.
En el siguiente capítulo veremos cómo validar un formulario utilizando javascript.
Finalmente en el siguiente curso veremos cómo procesar esta información de un servidor Java utilizando
servlets y JSP.
Con esto concluimos el ejercicio de formularios con HTML.